TypeScript类型推断失效求助：基于currentWay推导list类型

问题背景 #

我通过以下方式实现类型关联：

1. 定义ItemMap映射各类型到对应项：

type ItemMap = {
  write: string[];
  see: string[];
  find: DataLibraryType[];
  read: UploadFile[];
};

2. 为SearchListProps定义泛型参数K（继承WaysType），实现不同currentWay对应不同list类型：

type WaysType = 'write' | 'read' | 'see' | 'find'
interface SearchListProps<K extends WaysType> {
 currentWay: K;
 list: ItemMap[K];
 onClick: (val: ItemMap[K][number]) => void;
 onRemove?: () => void;
}

但遇到两个TypeScript错误：

• map方法的参数index隐式为any类型（错误码ts(7044)）；
• 当currentWay为'read'时，访问currentFile.name报错，提示“属性'name'不存在于类型'string | DataLibraryType | UploadFile'”，list类型未被正确推断为UploadFile[]。

期望在switch的每个case中，list能被正确推断为对应类型（比如'read'时为UploadFile[]）。

解决方案 #

方法一：改用联合类型实现类型关联（推荐） #

将SearchListProps定义为联合类型，让TypeScript能通过currentWay的值自动收窄list和元素的类型：

type WaysType = 'write' | 'read' | 'see' | 'find';
type ItemMap = {
  write: string[];
  see: string[];
  find: DataLibraryType[];
  read: UploadFile[];
};

// 生成每个way对应的props类型的联合类型
type SearchListProps = {
  [K in WaysType]: {
    currentWay: K;
    list: ItemMap[K];
    onClick: (val: ItemMap[K][number]) => void;
    onRemove?: () => void;
  };
}[WaysType];

// 组件实现
const SearchList = (props: SearchListProps) => {
  const { currentWay, list, onClick, onRemove } = props;

  return (
    <div>
      {list.map((item, index) => {
        switch(currentWay) {
          case 'read':
            // item自动推断为UploadFile，可安全访问name属性
            return <div key={index} onClick={() => onClick(item)}>{item.name}</div>;
          case 'write':
          case 'see':
            // item自动推断为string
            return <div key={index} onClick={() => onClick(item)}>{item}</div>;
          case 'find':
            // item自动推断为DataLibraryType
            return <div key={index} onClick={() => onClick(item)}>{item.id}</div>;
        }
      })}
      {onRemove && <button onClick={onRemove}>移除</button>}
    </div>
  );
};

这种方式下，TypeScript会根据switch中currentWay的具体值，自动推断list的数组类型和元素类型，既解决了index隐式any的问题，也能在对应case中安全访问元素的专属属性。

方法二：保留泛型，添加自定义类型守卫 #

如果需要保留泛型组件结构，可以通过自定义类型守卫来明确每个case的类型：

type WaysType = 'write' | 'read' | 'see' | 'find';
type ItemMap = {
  write: string[];
  see: string[];
  find: DataLibraryType[];
  read: UploadFile[];
};

interface SearchListProps<K extends WaysType> {
 currentWay: K;
 list: ItemMap[K];
 onClick: (val: ItemMap[K][number]) => void;
 onRemove?: () => void;
}

// 自定义类型守卫：判断是否为'read'类型的props
function isReadProps(props: SearchListProps<any>): props is SearchListProps<'read'> {
  return props.currentWay === 'read';
}

// 组件实现
const SearchList = <K extends WaysType>(props: SearchListProps<K>) => {
  if (isReadProps(props)) {
    return (
      <div>
        {props.list.map((item, index) => (
          <div key={index} onClick={() => props.onClick(item)}>{item.name}</div>
        ))}
      </div>
    );
  }

  // 其他case同理，需为每个way编写对应类型守卫
  return <div>{/* 其他类型的渲染逻辑 */}</div>;
};

这种方式需要为每个WaysType成员编写类型守卫，代码量较大，适合必须保留泛型的场景。

错误原因 #

1. index隐式any：泛型K在组件内部是未知的约束，TypeScript无法确定list的具体数组类型，因此map的index被推断为any（严格模式下触发报错）。
2. 属性访问报错：泛型K的不确定性导致元素类型为所有可能类型的联合（string | DataLibraryType | UploadFile），TypeScript无法确认当前元素是UploadFile，因此禁止访问name属性。

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