javascript - 如何指定类函数来使用 typescript props 接口(interface)

Question

我刚刚发现我可以做到:

interface Product {
  name: string,
  price: number,
  category: string,
  id: string,
  quantity: number
}

bagTotal = (products: Product[]) => {

}

这很有用，但我有这个。其中 bag 是来 self 的 redux 商店的 Prop 之一

interface IBagProps {
  bag: {
    products: Product[]
  }
}

所以在函数的参数中我想使用来自IBagProps接口(interface)的bag props

我该怎么做？

我想做这样的事情:bagTotal = (products: IBagProps) => {

但是看起来它会传递所有的 props

Answer 1

您可以像这样访问 bag 成员的类型:

type BagsInfo = IBagProps['bag']

然后您可以将 bagTotal 函数重构为类似于以下内容的内容:

function bagTotal(bagsInfo: BagsInfo) {
  return bagsInfo.products.length
}

如果您的 bagTotal 函数直接“连接”到 products 数组，您可以通过以下方式检索 Product 类型:

type Product = IBagProps['bags']['products'][number]