Typescript 基于不同参数推断参数类型

我想知道在使用

array.map（）

时，是否可以根据另一个参数推断出一个参数

我有一个类似于

的组件，它只映射项目，并将每个项目传递给renderItem函数。我希望下面的

renderItem=（card）=>{}

是每个

cards

项的类型（在我的例子中是

CardDomainModel

）

到目前为止，我有：

import { Group, ListSkeleton } from 'components'
import React, { FC, ReactElement } from 'react'

interface IList<T> {
  isLoading?: boolean
  items: T[]
  renderItem: (item: T) => ReactElement
}

/*
---
This (T) `any` must be of whatever type `items` is?
---
*/
export const List: FC<IList<any>> = ({ items, renderItem, isLoading }) => {
  if (isLoading) {
    return <ListSkeleton />
  }

  return (
    <Group spacing={2} direction="vertical">
      {items.map((item) => renderItem(item))}
    </Group>
  )
}

从“组件”导入{Group，ListSkeleton}
从“React”导入React，{FC，ReactElement}
接口IList{
isLoading？：布尔值
项目：T[]
renderItem:（项目：T）=>ReactElement
}
/*
---
这（T）`any`必须是`items`的任何类型？
---
*/
导出常量列表：FC=（{items，renderItem，isLoading}）=>{
如果（孤岛加载）{
返回
}
返回(
{items.map（（item）=>renderItem（item））}
)
}

及

从“组件”导入{CardListItem，List}
从“模型”导入{CardDomainModel}
从“React”导入React，{FC，memo}
接口ICardListView{
卡片：CardDomainModel[]
}
/*
---
我希望这个'card'参数是'CardDomainModel'，从'items={cards}推断出来`
---
*/
const renderItem=（卡片）=>{
返回(
)
}
导出常量卡片列表：FC=memo（{cards}）=>{
返回
})

我不认为那里会有自动推断，你应该做的是将renderItem函数的card参数键入CardDomainModel，typescript会自动检查renderItem参数是否与项类型匹配

我认为那里不会有自动推断，您应该做的是将renderItem函数的card参数键入CardDomainModel，typescript将自动检查renderItem参数是否与项类型匹配

Ye这就是我所做的。谢谢：）是的，我就是这么做的。谢谢：）

import { CardListItem, List } from 'components'
import { CardDomainModel } from 'models'
import React, { FC, memo } from 'react'

interface ICardListView {
  cards: CardDomainModel[]
}
/*
---
I want this `card` paramter to be `CardDomainModel`, inferred from `items={cards}`
---
*/
const renderItem = (card) => {
  return (
    <CardListItem
      key={card.id}
      name={card.cardholderName}
      last4={card.last4}
      currentSpending={card.currentSpending}
      limit={card.limit}
      status={card.cardStatus}
      lastTransactionDate="2015851-24"
    />
  )
}

export const CardList: FC<ICardListView> = memo(({ cards }) => {
  return <List items={cards} renderItem={renderItem} />
})