TypeScript中如何让类参数基于动态数组键值实现类型推断？

要让defaultValue自动推断为传入options中value的联合类型并支持补全，你可以通过泛型来实现，具体修改如下：

简化版实现 #

直接将类定义为泛型类，让TypeScript自动从传入的options中推断出value的具体类型：

class SelectConfig<V extends string> {
  options: { value: V }[];
  defaultValue: V;

  constructor(args: { options: { value: V }[], defaultValue: V }) {
    Object.assign(this, args);
  }
}

实例化效果 #

当你创建实例时，TypeScript会自动识别options里的value值，将defaultValue的类型约束为这些值的联合类型，同时提供自动补全：

const select = new SelectConfig({
  options: [{ value: 'Hello' }, { value: 'World' }],
  defaultValue: "Hello" // 编辑器会提示可选值："Hello" | "World"，输入其他值会报错
});

保留接口的实现 #

如果需要保留原有的接口结构，可以把接口也改为泛型：

interface Option<V extends string> {
  value: V;
}

interface SelectArgs<V extends string> {
  options: Option<V>[];
  defaultValue: V;
}

class SelectConfig<V extends string> {
  options: Option<V>[];
  defaultValue: V;

  constructor(args: SelectArgs<V>) {
    Object.assign(this, args);
  }
}

原理说明 #

泛型参数V会在实例化时自动推断为options数组中所有value值的联合类型（比如上面例子中的'Hello' | 'World'），这样defaultValue的类型就被严格限定为这些值中的一个，既实现了类型安全，又获得了自动补全的能力。

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