如何指定使用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[]
}

您的方法簽名將不會受到影響，因為它不會受到影響。