TypeScript中如何引用派生类型并实现属性类型匹配校验？

现有接口A定义如下：

interface A {
  boolProp: boolean,
  stringProp: string,
  numberProp: number,
  // 其他属性/方法...
}

需求是定义接口B，要求prop为A的属性名，default的类型必须与prop指定的A属性类型严格匹配，不匹配时TypeScript能抛出错误。比如下面的代码中，default赋值true与prop指定的stringProp（string类型）不匹配，需要触发TS错误：

const b: B = {
  prop: 'stringProp',
  default: true, // 期望此处触发TS错误：boolean无法赋值给string
};

解决方案 #

使用泛型接口绑定prop和default的类型关联，具体实现如下：

interface A {
  boolProp: boolean,
  stringProp: string,
  numberProp: number,
  // 其他属性/方法...
}

// 泛型接口B，泛型K约束为A的属性名
interface B<K extends keyof A = keyof A> {
  prop: K;
  default: A[K];
  // 其他属性/方法...
}

验证示例 #

• 正确赋值（无TS错误）：

// 匹配boolProp的boolean类型
const b1: B<'boolProp'> = {
  prop: 'boolProp',
  default: false
};

// 匹配stringProp的string类型
const b2: B<'stringProp'> = {
  prop: 'stringProp',
  default: 'hello'
};

• 错误赋值（触发TS报错）：

// 错误：boolean类型无法赋值给string类型
const b3: B<'stringProp'> = {
  prop: 'stringProp',
  default: true
};

进阶优化：自动推导泛型参数 #

如果不想显式指定泛型参数，可通过泛型函数让TypeScript自动推导类型：

function createB<K extends keyof A>(config: { prop: K; default: A[K] }): B<K> {
  return config as B<K>;
}

// 自动推导类型，错误赋值直接触发报错
const b4 = createB({
  prop: 'numberProp',
  default: '123' // 错误：string无法赋值给number
});

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