如何推断无泛型参数字段类型？TypeScript组件配置类型问题

错误原因 #

你写的ComponentConfig类型最终会被解析为never，因为never extends infer Props会把Props推断为never，而never并不满足Record<string, any>约束，最终整个类型收缩为never。任何符合预期的配置对象都无法赋值给never类型，因此触发TS2322错误。

优雅实现方式 #

1. 定义泛型ComponentConfig类型 #

先明确泛型约束，让Props必须满足Record<string, any>：

// 假设你的Component类型定义如下
type Component<Props extends Record<string, any>> = /* 你的Component实现 */;

type ComponentConfig<Props extends Record<string, any>> = {
  component: Component<Props>;
  props(): Props;
};

2. 自动推断类型的字典定义 #

借助辅助函数让TypeScript自动推断每个配置的Props类型，无需手动传递泛型参数：

// 辅助函数用于自动推导Props类型
function createComponentConfig<Props extends Record<string, any>>(config: ComponentConfig<Props>) {
  return config;
}

// 示例Component实现
type Component<Props extends Record<string, any>> = (props: Props) => void;
const NumberComponent: Component<{ num: number }> = (props) => console.log(props.num);

// 创建配置字典
const componentDict = {
  numberComp: createComponentConfig({
    component: NumberComponent,
    props() {
      return { num: 42 }; // 自动推断返回类型为{ num: number }
    }
  }),
  textComp: createComponentConfig({
    component: (props: { text: string }) => console.log(props.text),
    props() {
      return { text: "hello" }; // 自动推断返回类型为{ text: string }
    }
  })
};

3. 简化字典类型（可选） #

如果不需要精确的Props类型检查，也可以直接定义字典类型为所有合法ComponentConfig的集合：

type ComponentDictionary = {
  [key: string]: ComponentConfig<Record<string, any>>;
};

const componentDict: ComponentDictionary = {
  numberComp: {
    component: NumberComponent,
    props() {
      return { num: 42 };
    }
  }
};

内容的提问来源于stack exchange，提问作者Koppa Péter