TypeScript中基类型参数函数与子类型参数函数为何不兼容？

先看你的代码场景：

interface SD_UI_Field {
  type: string;
  name: string;
}

interface SelectInput extends SD_UI_Field {
  type: string;
  name: string;
  items: [];
}

interface FieldResolver {
  // 泛型约束参数必须是 SD_UI_Field 的子类型
  <DataType extends SD_UI_Field>(fieldData: DataType): void;
}

// 报错：无法将类型'(fieldData: SelectInput) => void'赋值给类型'FieldResolver'
const resolver1: FieldResolver = (fieldData: SelectInput) => {};

核心原因：泛型函数的要求与类型安全冲突 #

FieldResolver定义的是一个能处理任意SD_UI_Field子类型的泛型函数——它必须接受所有符合SD_UI_Field规范的对象，包括最基础的SD_UI_Field本身，或者其他没有items属性的子类型。

但你的resolver1只能接受SelectInput类型的参数，它根本处理不了普通的SD_UI_Field对象（这类对象没有items属性）。如果TypeScript允许这种赋值，后续调用resolver1时传入一个基础SD_UI_Field，函数内部若尝试访问items就会触发运行时错误，这完全违背了TypeScript的类型安全设计。

这背后是函数参数的逆变规则：当把一个函数赋值给另一个函数类型时，源函数的参数类型必须是目标函数参数类型的超类型。简单说，能处理更宽泛类型的函数，才能赋值给要求处理更具体类型的函数位置；反过来不行。

解决方案 #

根据实际需求，有两种调整方式：

1. 让Resolver绑定特定子类型

把泛型定义在接口层面，明确该Resolver只处理某一种特定的子类型：

interface FieldResolver<DataType extends SD_UI_Field> {
  (fieldData: DataType): void;
}

// 现在可以正常赋值，因为明确了 resolver1 是处理 SelectInput 的
const resolver1: FieldResolver<SelectInput> = (fieldData: SelectInput) => {
  console.log(fieldData.items); // 安全访问
};

2. 让Resolver兼容所有子类型

如果确实需要Resolver处理任意SD_UI_Field子类型，就把参数类型设为基类型，并用类型守卫区分不同子类型：

interface FieldResolver {
  (fieldData: SD_UI_Field): void;
}

const resolver1: FieldResolver = (fieldData) => {
  // 用类型守卫判断是否为 SelectInput
  if ('items' in fieldData) {
    console.log(fieldData.items);
  }
  // 处理其他子类型的逻辑
};

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