TypeScript函数体内使用泛型报错？如何正确复用泛型？

报错原因 #

1. 泛型无约束导致属性访问错误
   filterName函数的泛型参数OptionValueType没有任何类型约束，TypeScript无法推断该类型必然包含name属性，因此访问el.name时会触发类型错误：Property 'name' does not exist on type 'OptionValueType'。

2. 返回类型不匹配
   filterName执行后返回的是string[]（提取每个元素的name字段），但filterOptions声明的返回类型是OptionsArray<OptionValueType>（即原类型的数组），两者类型完全不兼容，导致返回filteredOptions时类型报错。

正确实现方式 #

要解决问题，需要给泛型添加约束，并修正逻辑（你原本应该是想过滤选项而非提取名称）：

type OptionsArray<T> = T[]

type Option = {
  name: string
}

// 给泛型添加约束，确保类型包含name属性
const filterName = <OptionValueType extends { name: string },>(options: OptionsArray<OptionValueType>) => 
  options.map(el => el.name)

export const filterOptions = <OptionValueType extends { name: string },>(
  options: OptionsArray<OptionValueType>, 
  filterBy: string
): OptionsArray<OptionValueType> => {
    if (filterBy === '') {
        return [...options];
    } else {
        // 修正逻辑：筛选出name包含过滤关键词的选项
        const filteredOptions = options.filter(el => el.name.includes(filterBy));
      
        return [...filteredOptions];
    }
};

// 调用示例
filterOptions<Option>([{name: 'Alex'}, {name: 'Bob'}], 'Al')

关键修改点 #

• 泛型约束：通过extends { name: string }限定泛型类型必须包含name属性，让TypeScript认可对el.name的访问。
• 逻辑修正：将原本提取name的逻辑改为筛选符合条件的选项，确保返回类型与函数声明的OptionsArray<OptionValueType>一致。

如果你的实际需求是提取所有元素的name字段，只需调整函数的返回类型即可：

export const extractAllNames = <OptionValueType extends { name: string },>(
  options: OptionsArray<OptionValueType>, 
): OptionsArray<string> => {
    return filterName(options);
};

内容的提问来源于stack exchange，提问作者DevOverflow