Javascript 如何指定类函数以使用typescript props接口

我刚刚发现我可以做到：

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

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

}

这很有用，但我有这个。我从redux商店买的道具之一是什么

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

因此，在函数的参数中，我想使用

IBagProps

界面中的袋子道具

我该怎么做

我想这样做：

bagTotal=（产品：IBagProps）=>{

---

但这看起来会让所有道具通过您可以访问

包的类型，如下所示：

type BagsInfo = IBagProps['bag']

然后，您可以将
bagTotal
函数重构为类似于：

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

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

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

您可以通过如下方式访问
行李
成员的类型：

type BagsInfo = IBagProps['bag']

然后，您可以将
bagTotal
函数重构为类似于：

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

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

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

就这么简单：

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

}

但通常您只需直接使用
产品[]

UPD，如果您的意思可能是将
IBagProps
传递给您的函数，并且您必须从中提取
products
，那么可以这样进行分解：

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

就这么简单：

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

}

但通常您只需直接使用
产品[]

UPD，如果您的意思可能是将
IBagProps
传递给您的函数，并且您必须从中提取
products
，那么可以这样进行分解：

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

您可以利用查找类型：

它不仅更具可读性，而且也不取决于道具的形状。如果有一天你决定将道具的结构改为：

interface IBagProps {
  products: Product[]
}

您的方法签名不会受到影响，因为它不应该受到影响。
您可以利用查找类型：

它不仅更具可读性，而且也不取决于道具的形状。如果有一天你决定将道具的结构改为：

interface IBagProps {
  products: Product[]
}

您的方法签名不会受到影响，因为它不应该受到影响。
bagTotal=（产品：产品[]）…
？@Quirimo有什么问题？抱歉？为什么函数param不能是产品的简单数组？因为产品是bag对象中的数组，而bag来自道具。所以我认为它应该存在于道具界面中？@Quirimo有意义吗？
bagTotal=（产品：产品[]）…
？@quirimmo有什么问题？抱歉？为什么函数param不能是产品的简单数组？因为产品是包对象中的数组，而包来自道具。所以我认为它应该存在于道具界面中？@quirimmo有意义吗？好吧，我没抓住重点。我需要更多上下文信息：你是如何连接的
bagTotal
到
IBagProps
？它是一个redux选择器吗？作为一个解决方案，您可以调整输入参数：
const adapt=（fn:（products:products[]）=>number=>（bagProps:IBagProps=>fn（bagProps.bag.products）
，然后在使用
bagTotal
时只需使用
adapt（bagTotal）包装
好的，我会尽力解释得更好。我知道我能做到：
bagTotal=（产品：产品[]）
。但我只是想从
IBagProps
中获取它，因为我认为将它放在道具中更有意义，因为它是从那里开始的？好的，我没有抓住要点。我需要更多的上下文信息：您如何将
bagTotal
连接到
IBagProps
？它是一个redux选择器吗？作为一个解决方案，您可以调整输入参数：de>const adapt=（fn:（products:Product[]）=>number）=>（bagProps:IBagProps）=>fn（bagProps.bag.products）

然后在使用

bagTotal

时，只需使用

adapt（bagTotal）

就可以了，我会尝试更好地解释。我知道我能做到这一点：

bagTotal=（products:Product[]）

。但我只是想从

IBagProps

中获得它，因为我认为将它放在道具中更有意义，因为它是从那里来的？尽管第一种方式看起来不正确，我也没有见过人们这样使用它。我知道我可以直接使用

产品[]

但这是否意味着在我的PropsInterface中，我应该让包空着？@RedBaron第一种方法没有太大的错误，但是，正如我所说的，通常你只使用

产品[]

。关于你的第二个问题，对不起，我不明白。我对react不太熟悉，因此也不太熟悉

PropsInterface

。尽管第一种方法看起来不正确，我也没见过有人这样使用它。我知道我可以直接使用

产品[]

但这是否意味着在我的PropsInterface中，我应该让包空着？@RedBaron第一种方法没有太大的错误，但是，正如我所说的，通常你只使用

产品[]

。关于你的第二个问题，对不起，我不太了解react，因此我也不太熟悉

PropsInterface

。