Javascript 泛型错误，类型T上不存在变量名

我对typescript泛型有问题。代码如下：

接口：

export interface Hero {
  id: number
  name: string
  localized_name: string
  avatar: string
}

export interface Item {
  id: number
  name: string
  cost: number
  secret_shop: boolean
  side_shop: boolean
  recipe: boolean
  localized_name: string
  avatar: string
}

函数本身

export const getContent = async <T>(genre: string): Promise<T[]> => {
  const res = await fetch(`${apiEndpoint}${genre})
  const response = await res.json()
  const defaultContent = response.result[category]
  const contentWithImage = defaultContent.map((item: T) => {
    const contentImageUrl = `${imgURL}${item.name.replace('__', '')}.png`

    return { ...item,  avatar: contentImageUrl }
  })
  return contentWithImage
}

export const getContent=async（类型：string）：Promise=>{ const res=await fetch（`${apidendpoint}${genre}） const response=wait res.json（） const defaultContent=response.result[category] const contentWithImage=defaultContent.map（（项目：T）=>{ const contentImageUrl=`${imgURL}${item.name.replace（'''.''.''）}.png` 返回{…项目，化身：contentImageUrl} }) 返回contentWithImage } 这样称呼：

const heroes = await getContent<Hero>('heroes')

const heroes=wait getContent（'heroes'））

或

const items=wait getContent（'items'））

我得到了一个类型上未定义的名称（在地图中的项目上），但我真的没有得到它

如果你有任何提示，

---

谢谢

如果您想访问

T

的属性，您需要添加一个约束。约束确保传入的任何参数都满足约束要求

export const getContent = async <T extends { name : string }>(genre: string): Promise<T[]> => {
  const res = await fetch(`${apiEndpoint}${genre}`)
  const response = await res.json()
  const defaultContent = response.result[category]
  const contentWithImage = defaultContent.map((item: T) => {
    const contentImageUrl = `${imgURL}${item.name.replace('__', '')}.png`

    return { ...item,  avatar: contentImageUrl }
  })
  return contentWithImage
}

export const getContent=async（类型：string）：Promise=>{ const res=wait fetch（`${apidendpoint}${genre}`） const response=wait res.json（） const defaultContent=response.result[category] const contentWithImage=defaultContent.map（（项目：T）=>{ const contentImageUrl=`${imgURL}${item.name.replace（'''.''.''）}.png` 返回{…项目，化身：contentImageUrl} }) 返回contentWithImage } 通常不建议使用必须显式指定的泛型类型参数。如果只有这两个选项，重载可能是更好的选择：

async function getContent (genre: "heroes"): Promise<Hero[]>
async function getContent (genre: "items"): Promise<Item[]> 
async function getContent (genre: string): Promise<(Item | Hero)[]>{
  const res = await fetch(`${apiEndpoint}${genre}`)
  const response = await res.json()
  const defaultContent = response.result[category]
  const contentWithImage = defaultContent.map((item: Item | Hero) => {
    const contentImageUrl = `${imgURL}${item.name.replace('__', '')}.png`

    return { ...item,  avatar: contentImageUrl }
  })
  return contentWithImage
}

异步函数getContent（类型：“英雄”）：Promise
异步函数getContent（类型：“items”）：Promise
异步函数getContent（类型：string）：Promise{
const res=wait fetch（`${apidendpoint}${genre}`）
const response=wait res.json（）
const defaultContent=response.result[category]
const contentWithImage=defaultContent.map（（项目：项目|英雄）=>{
const contentImageUrl=`${imgURL}${item.name.replace（'''.''.''）}.png`
返回{…项目，化身：contentImageUrl}
})
返回contentWithImage
}

Hmmm我明白了，有没有办法确保我的变量

item

的类型是

Hero

或

item

，具体取决于

？因为对我来说，这就是item:T的意思，但我必须是wrong@Herv你可以使用重载。。我将添加一个version@Hervé添加了很多版本库！这种模式一点也不好，但它纯粹是一个关于泛型的问题。如果此代码必须投入生产，我会将其分为两种方法；）您可以使约束

T扩展（Hero | Item）

或从两者中提取通用

INamed

接口，并在约束中使用该接口。

async function getContent (genre: "heroes"): Promise<Hero[]>
async function getContent (genre: "items"): Promise<Item[]> 
async function getContent (genre: string): Promise<(Item | Hero)[]>{
  const res = await fetch(`${apiEndpoint}${genre}`)
  const response = await res.json()
  const defaultContent = response.result[category]
  const contentWithImage = defaultContent.map((item: Item | Hero) => {
    const contentImageUrl = `${imgURL}${item.name.replace('__', '')}.png`

    return { ...item,  avatar: contentImageUrl }
  })
  return contentWithImage
}