TypeScript如何定义default字段类型依赖type字段值的PROP类型

实现方案 #

你之前的写法问题在于没有建立构造函数类型和它对应实例类型的映射关系，U extends T的判断逻辑不符合实际需求：typeof String是字符串构造函数的类型，和实际的字符串值类型string是两个完全不同的类型，所以无法完成预期的校验。
正确实现如下：

1. 首先定义构造函数到实例类型的映射

type ConstructorToInstance<T> = 
  T extends typeof String ? string :
  T extends typeof Number ? number :
  T extends typeof Boolean ? boolean :
  T extends typeof Array ? unknown[] :
  T extends typeof Object ? Record<string, any> :
  T extends typeof Function ? (...args: any[]) => any :
  never;

2. 定义PROP类型

type CleanPropTypes = typeof Array | typeof Object | typeof Function | typeof Boolean | typeof String | typeof Number;

type PROP<T extends CleanPropTypes = CleanPropTypes> = {
  type: T;
  default?: ConstructorToInstance<T>;
}

3. （可选）添加自动推断泛型的工厂函数
   为了避免每次使用时手动传入泛型参数，可以加一个简单的工厂函数来自动根据type字段推断类型：

function defineProp<T extends CleanPropTypes>(config: PROP<T>) {
  return config;
}

测试效果

// 校验通过
const a = defineProp({
  type: String,
  default: 'STR'
})

// 类型校验报错：不能将类型[]分配给类型string | undefined
const b = defineProp({
  type: String,
  default: []
})

// 校验通过
const c = defineProp({
  type: Array,
  default: []
})

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