跳到主要内容

TypeScript 类型兼容性

介绍​

在 TypeScript 中，类型兼容性是指一个类型是否可以赋值给另一个类型。TypeScript 的类型系统是基于结构化类型（Structural Typing）的，这意味着类型的兼容性是基于它们的结构，而不是它们的名称。这与名义类型系统（Nominal Typing）不同，后者要求类型的名称必须完全匹配。

理解类型兼容性对于编写灵活且可维护的 TypeScript 代码至关重要。本文将逐步讲解 TypeScript 中的类型兼容性，并通过实际案例展示其应用。

基本类型兼容性​

原始类型​

对于原始类型（如 number、string、boolean 等），类型兼容性非常简单：只有当两个类型相同时，它们才是兼容的。

typescript
let num: number = 42;
let str: string = "hello";

// 错误：类型 'string' 不能赋值给类型 'number'
num = str;

对象类型​

对于对象类型，TypeScript 会检查它们的属性是否兼容。具体来说，如果目标类型的所有属性都在源类型中存在，并且类型匹配，那么源类型就可以赋值给目标类型。

typescript
interface Person {
  name: string;
  age: number;
}

let person: Person = { name: "Alice", age: 30 };

// 正确：person 对象包含 name 和 age 属性
let person2: Person = person;

函数类型​

函数类型的兼容性稍微复杂一些。TypeScript 会检查函数的参数和返回值是否兼容。具体来说，如果目标函数的参数类型是源函数参数类型的超集，并且返回值类型是源函数返回值类型的子集，那么源函数就可以赋值给目标函数。

typescript
type Func = (a: number, b: number) => number;

let add: Func = (x: number, y: number) => x + y;

// 正确：add 函数的参数和返回值类型与 Func 类型兼容
let func: Func = add;

高级类型兼容性​

可选属性和多余属性​

在对象类型中，可选属性和多余属性会影响类型兼容性。如果目标类型中有可选属性，那么源类型中可以缺少这些属性。此外，源类型可以包含多余属性，只要这些属性不影响类型兼容性。

typescript
interface Person {
  name: string;
  age?: number;
}

let person: Person = { name: "Alice" };

// 正确：age 是可选属性
let person2: Person = person;

// 正确：源类型包含多余属性
let person3: Person = { name: "Bob", age: 25, gender: "male" };

联合类型​

联合类型的兼容性规则是：如果一个值可以赋值给联合类型中的任意一个类型，那么它就可以赋值给整个联合类型。

typescript
type StringOrNumber = string | number;

let value: StringOrNumber = "hello";

// 正确：字符串可以赋值给 StringOrNumber 类型
value = 42;

// 正确：数字也可以赋值给 StringOrNumber 类型

交叉类型​

交叉类型的兼容性规则是：如果一个值可以赋值给交叉类型中的所有类型，那么它就可以赋值给整个交叉类型。

typescript
interface A {
  a: number;
}

interface B {
  b: string;
}

type C = A & B;

let obj: C = { a: 1, b: "hello" };

// 正确：obj 包含 A 和 B 的所有属性

实际案例​

函数参数兼容性​

在实际开发中，函数参数的类型兼容性非常重要。例如，当你传递一个回调函数时，TypeScript 会检查回调函数的参数类型是否与目标函数兼容。

typescript
function process(callback: (value: number) => void) {
  callback(42);
}

// 正确：回调函数的参数类型与目标函数兼容
process((x: number) => console.log(x));

// 错误：回调函数的参数类型与目标函数不兼容
process((x: string) => console.log(x));

对象属性兼容性​

在处理对象时，类型兼容性可以帮助你确保对象的属性符合预期。

typescript
interface User {
  id: number;
  name: string;
}

function printUser(user: User) {
  console.log(`User: ${user.name}, ID: ${user.id}`);
}

let user = { id: 1, name: "Alice", age: 30 };

// 正确：user 对象包含 User 接口的所有属性
printUser(user);

总结​

TypeScript 的类型兼容性是基于结构化类型的，这意味着类型的兼容性取决于它们的结构而不是名称。理解类型兼容性可以帮助你编写更灵活且可维护的代码。本文介绍了基本类型、对象类型、函数类型以及高级类型（如联合类型和交叉类型）的兼容性规则，并通过实际案例展示了这些规则的应用。

附加资源​

练习​

  1. 编写一个函数 processUser，它接受一个 User 类型的参数，并打印用户的 name 和 id。尝试传递一个包含多余属性的对象，看看会发生什么。
  2. 创建一个联合类型 StringOrNumber，并编写一个函数 printValue，它接受 StringOrNumber 类型的参数，并打印该值。尝试传递一个字符串和一个数字，看看会发生什么。

通过练习，你将更好地理解 TypeScript 中的类型兼容性。