如何在ListItemContainer中基于type属性推导Items具体类型？

问题核心 #

你当前的泛型定义虽然能在外部传参时做类型校验，但组件内部通过type === 'note'判断时，TypeScript无法自动将items的类型收窄为NoteItem[]——因为泛型参数T是抽象的，TS无法跟踪它在条件判断后的具体值，导致只能访问所有Item的共享属性。

解决方案：改用可辨识联合类型 #

将ListItemContainerProps定义为可辨识联合类型，把type字段和对应的items类型绑定在一起，让TS能通过type的值精准推断items的具体类型。

1. 重新定义组件Props

替换原有的泛型ListItemContainerProps为联合类型：

type ListItemContainerProps = {
  [K in keyof ListTypes]: {
    type: K;
    items: ListTypes[K][];
  };
}[keyof ListTypes];

2. 修改组件实现

去掉泛型参数，直接接收联合类型的props，此时条件判断会自动收窄类型：

const ListItemContainer = ({ type, items }: ListItemContainerProps) => {
  const Component = getListWrapper(type);

  // 现在可以正常访问note专属属性
  if (type === 'note') {
    console.log(items[0].isPinned);
  }

  return (
    <ul>
      {items.map((item) => (
        <Component key={item.id} item={item} />
      ))}
    </ul>
  );
};

3. 优化getListWrapper的类型严谨性

原有的getListWrapper用了联合类型Props，存在类型松散的问题，改成泛型让它返回对应类型的组件：

export const getListWrapper = <K extends keyof ListWrappers>(type: K) => {
  const Component = listWrappers[type];
  
  if (!Component) {
    throw new Error(`No wrapper found for type: ${type}`);
  }

  return Component as (props: ComponentProps<typeof Component>) => JSX.Element;
};

为什么这个方案有效？ #

可辨识联合类型将每个type值与对应的items类型封装在同一个分支里，当你判断type === 'note'时，TS能直接定位到该分支，自动将items推断为NoteItem[]，自然就能访问专属属性了。

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