Typescript React：从泛型ItemStore推断Item类型遇类型异常问题排查

定义的存储类型 #

首先定义了用于存储项的泛型类型ItemStore<T>：

export type ItemStore<T> = {
  allById: {
    [id: string]: T,
  },
  activeById: {
    [id: string]: T,
  },
  all: T[],
  active: T[],
  fetching: boolean,
  cursor: string,
}

泛型组件实现 #

接着编写了泛型组件StoreItemList，期望通过传入的store类型自动推断出Item类型，从而让labelKey和valueKey仅接受该Item的键：

type Props<S, I = S extends ItemStore<infer IT> ? IT : never> = {
  store: S,
  labelKey: keyof I,
  valueKey: keyof I,
}

function StoreItemList<S>(props: Props<S>): JSX.Element {
  // 组件逻辑
}

示例用法 #

示例中定义了UserItem类型和对应的userStore，并使用StoreItemList组件：

type UserItem = {
  id: number,
  name: string,
}

const userStore: UserStore<UserItem> = { ... }

<StoreItemList
  store={userStore}
  labelKey="id"     // 预期仅接受'id'和'name'（UserItem的键）
  valueKey="name"   // 预期仅接受'id'和'name'（UserItem的键）
/>

问题现象及原因 #

上述实现未达到预期效果：示例中的store被识别为unknown。排查后发现，问题出在使用styled-components包裹组件styled(StoreItemList)时——移除该包裹后，类型推断恢复正常。这是styled-components处理泛型组件的已知问题。

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