如何指定使用Typescript道具接口的类函数

Question

我刚刚发现我可以做：

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

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

}

这很有用，但我有这个。 包是我的redux商店里的道具之一

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

所以在函数的参数中，我想使用IBagProps界面中的bag props

我该怎么办？

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

但是看起来所有道具都会通过

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]

Answer 2

就这么简单：

const bagTotal = (products: IBagProps['bag']['products']) => {

}

但是通常您只是直接使用Product[] 。

UPD，如果您可能是想将IBagProps传递给您的函数，并且必须从那里提取products ，那么可以像这样进行销毁：

const bagTotal = ({ bag: {products} }: IBagProps) => {
    products.map(p => p.name)
  }

Answer 3

您可以利用查找类型 ：

class Bag extends React.Component<IBagProps> {
  bagTotal = (products: IBagProps['bag']['products']) => {
    /* ... */
  }
}

但这并不是最优雅的方法。 如果您的方法依赖于Product[] ，则完全可以这样说：

class Bag extends React.Component<IBagProps> {
  bagTotal = (products: Product[]) => {
    /* ... */
  }
} 

它不仅更具可读性，而且不依赖于道具的形状。 如果有一天您决定将其结构更改为，可以这样说：

interface IBagProps {
  products: Product[]
}

您的方法签名将不会受到影响，因为它不会受到影响。