当前位置：首页 > news >正文

TypeScript的类型兼容是什么？

news 2025/10/1 11:00:06

TypeScript 的类型兼容性就像一个 “形状检查器”，它关心的是一个值的 “形状”（有哪些属性和方法），而不是它具体是哪个 “品牌”（由哪个类或接口声明）。

核心原则：结构化类型系统 (Structural Typing)

TypeScript 采用的是结构化类型系统（也叫 “duck typing”，鸭子类型：“如果它走路像鸭子，叫起来像鸭子，那它就是鸭子”）。
这与一些其他语言（如 Java、C#）的名义类型系统（Nominal Typing）形成对比。

名义类型系统： 两个类型必须有相同的名称或明确的继承关系才被认为是兼容的。

// Java (名义类型)
class Dog { public void bark() {} }
class Cat { public void bark() {} } // 即使方法一样Dog d = new Cat(); // 编译错误！因为 Dog 和 Cat 是不同的“名义”类型

结构化类型系统： 两个类型只要结构上满足要求（一个类型的所有成员都能在另一个类型中找到对应且兼容的成员），它们就是兼容的。

// TypeScript (结构化类型)
class Dog { bark() {} }
class Cat { bark() {} } // 结构上与 Dog 兼容let myDog: Dog;
myDog = new Cat(); // ✅ 编译通过！因为 Cat 有 bark 方法，满足 Dog 的结构要求

1. 基本规则：子类型可以赋值给父类型

在 TypeScript 中，如果类型 B 可以赋值给类型 A，我们就说 B 是 A 的子类型 (Subtype)。
判断子类型的基本规则是：B 必须拥有 A 的所有成员，并且类型要兼容。
示例：接口兼容性

interface Point2D {x: number;y: number;
}interface Point3D {x: number;y: number;z: number;
}let p2d: Point2D = { x: 1, y: 2 };
let p3d: Point3D = { x: 1, y: 2, z: 3 };// Point3D 拥有 Point2D 的所有成员 (x, y)，所以它是 Point2D 的子类型
p2d = p3d; // ✅ 编译通过// Point2D 缺少 Point3D 的成员 z，所以它不是 Point3D 的子类型
p3d = p2d; // ❌ 编译错误: Property 'z' is missing in type 'Point2D' but required in type 'Point3D'.

结论：成员多的类型可以赋值给成员少的类型。

2. 函数兼容性

函数兼容性是类型兼容中最复杂也最重要的部分。判断一个函数 B 是否能赋值给函数 A，主要看三个方面：
a. 参数数量
目标函数 (A) 的参数数量必须小于或等于源函数 (B) 的参数数量。
简单说：你可以 “多给” 参数，但不能 “少要” 参数。

let handler = (a: number) => { console.log(a); };// 参数数量相同，兼容
let handler2 = (a: number, b: string) => { console.log(a, b); };
handler = handler2; // ❌ 编译错误! handler 需要1个参数，但 handler2 需要2个。调用 handler(1) 时会出错。// 反过来
let handler3 = (a: number) => { console.log(a); };
handler2 = handler3; // ✅ 编译通过。调用 handler2(1, "hello") 时，多余的 "hello" 会被忽略，这是安全的。

b. 参数类型
源函数 (B) 的每个参数类型必须能赋值给目标函数 (A) 的对应参数类型。
这与对象兼容性规则一致。

interface Event { type: string }
interface MouseEvent extends Event { x: number; y: number }let onEvent = (e: Event) => { console.log(e.type); };
let onMouseEvent = (e: MouseEvent) => { console.log(e.type, e.x, e.y); };// onMouseEvent 的参数 e 是 MouseEvent 类型，它是 Event 的子类型
// 所以 onMouseEvent 可以赋值给 onEvent
onEvent = onMouseEvent; // ✅ 编译通过。当 onEvent 被调用时，传入的是 Event，而 onMouseEvent 能处理更具体的 MouseEvent，所以处理 Event 也没问题。// 反过来不行
onMouseEvent = onEvent; // ❌ 编译错误! onEvent 的参数 e 是 Event 类型，它可能没有 x, y 属性。

c. 返回值类型
目标函数 (A) 的返回值类型必须能赋值给源函数 (B) 的返回值类型。
这与对象兼容性规则相反。

let createPoint2D = (): Point2D => { return { x: 0, y: 0 }; };
let createPoint3D = (): Point3D => { return { x: 0, y: 0, z: 0 }; };// createPoint3D 的返回值是 Point3D，它是 Point2D 的子类型
// 所以 createPoint3D 可以赋值给 createPoint2D
let factory: () => Point2D;
factory = createPoint3D; // ✅ 编译通过。调用 factory() 期望得到 Point2D，而 createPoint3D 返回了包含更多信息的 Point3D，这是安全的。// 反过来不行
let factory2: () => Point3D;
factory2 = createPoint2D; // ❌ 编译错误! createPoint2D 返回的 Point2D 缺少 z 属性。

3. 特殊情况：函数参数双向协变 (Bivariance)

这是一个 TypeScript 为了兼容性而做的 “非严格” 设计，也是一个常见的坑。
默认情况下，TypeScript 的函数参数是双向协变的。这意味着，不仅子类型可以赋值给父类型，父类型也可以赋值给子类型。

interface Animal { name: string; }
interface Dog extends Animal { breed: string; }
interface Cat extends Animal { purr: boolean; }let checkDog = (dog: Dog) => { console.log(dog.breed); };
let checkAnimal = (animal: Animal) => { console.log(animal.name); };// 子类型赋值给父类型 (正常)
let func1: (a: Animal) => void = checkDog; // ❌ 这在严格模式下会报错！// 父类型赋值给子类型 (双向协变的体现)
let func2: (d: Dog) => void = checkAnimal; // ✅ 编译通过

为什么 func1 有问题？func1 的类型是 (a: Animal) => void，这意味着你可以调用 func1(new Cat())。但 func1 实际上是 checkDog，它会尝试访问 cat.breed，这会导致运行时错误。
如何避免？在 tsconfig.json 中开启 strictFunctionTypes: true，这会使函数参数变为逆变 (Contravariant)，从而禁止 func1 这种不安全的赋值。

{"compilerOptions": {"strictFunctionTypes": true}
}

4. 泛型兼容性

泛型的兼容性比较特殊，因为它取决于泛型类型是否被使用。
a. 泛型类型未被使用
如果泛型参数在类型定义中没有被使用，那么它会被当作 any 来处理，因此是兼容的。

interface Empty<T> {}let x: Empty<number>;
let y: Empty<string>;x = y; // ✅ 编译通过，因为 T 没有被使用

b. 泛型类型被使用
如果泛型参数被使用了，那么两个泛型类型只有在它们的类型参数都兼容时才是兼容的。

interface NotEmpty<T> {value: T;
}let x: NotEmpty<number> = { value: 123 };
let y: NotEmpty<string> = { value: "hello" };x = y; // ❌ 编译错误! number 和 string 不兼容