如何在打字稿中将泛型类型数组转换为专用类型数组

Question

我在我的应用程序中使用了 firebase。因此，firebase 的 snapshotChanges() 方法返回一个 SnapshotAction 数组类型的 Observable，我想在订阅 Observable 后将其转换为特定类型的数组。那么，我们如何在 typescript 中做到这一点呢？

查看下面的代码库以更好地理解它，

// Below observable is returned by firebase snapshotChanges() method 
Observable<SnapshotAction<Product>[]>

// Now, after I subscribe to the above observable I get below type,
SnapshotAction<Product>[]

// Now I want to convert "SnapshotAction<Product>[]" to "Product[]" in typescript

Answer 1

快照操作有一个有效负载字段，它将为您提供一个

DatabaseSnapshot<Product>

DatabaseSnapshot 有一个 val() 方法，该方法将根据快照是否存在返回 Product 或 null。所以你可以写一个这样的小函数来提取产品：

function example(input: SnapshotAction<string>[]): (string | null)[] {
    return input.map(action => action.payload.val())
}

注意这是返回字符串 | null 因为快照可能不存在。你可以看看

action.payload.exists()

如果您想进行额外的检查或过滤。

Answer 2

所以，我最终通过映射 SnapshotActionSnapshotAction[ ] 数组转换为更具体的类型 Product[ ] > 并从中提取 Product 类型的有效负载（json）值，然后将其推送到我在下面代码的第一行中声明的 Product[] 中。

products: Product[] = [];

this.productService.getAll().pipe(
      switchMap((products: SnapshotAction<Product>[]) => {
      
        // Our intention starts here
        products.map((product: SnapshotAction<Product>) => {
          let prod: Product = product.payload.val();
          prod.key = product.key;
          
          this.products.push(prod);
        });
        
      });
    );

Final Outcome: 
[
      {category: 'bread', imageUrl: 'img1_url.jpg', price: 3, title: 'Freshly Baked Bread', key: '-MrS7JBEldfwCbmGSCBY'},
      {category: 'fruits', imageUrl: 'img2_url.jpg', price: 234, title: 'Orange', key: '-MrSweHxR168xz3lyxm1'},
      {category: 'vegetables', imageUrl: 'img3_url.jpg', price: 2.22, title: 'Spinach', key: '-MrTBTEe4sXK3Hh31Fui'}
]