TypeScript 类型兼容性

TypeScript 的类型系统是它的核心特性之一，而类型兼容性则是理解 TypeScript 类型系统的关键。类型兼容性决定了在 TypeScript 中，哪些类型可以赋值给其他类型，哪些类型可以相互替换。本文将详细介绍 TypeScript 类型兼容性的概念，并通过代码示例和实际案例帮助你更好地理解。

什么是类型兼容性？

在 TypeScript 中，类型兼容性是指一个类型的值是否可以赋值给另一个类型的变量。TypeScript 的类型兼容性规则是基于结构子类型（Structural Typing）的，这意味着 TypeScript 不会强制要求两个类型在名义上完全一致，而是检查它们的结构是否兼容。

备注

结构子类型：TypeScript 的类型系统是基于结构子类型的，这意味着只要两个类型的结构相同或兼容，它们就可以相互赋值，而不需要显式地声明继承关系。

基本类型兼容性

让我们从最基本的类型兼容性开始。在 TypeScript 中，基本类型（如 number、string、boolean 等）的兼容性规则非常简单：只有当两个类型完全相同时，它们才是兼容的。

typescript

let num: number = 42;
let str: string = "Hello";

// 以下代码会报错，因为 number 和 string 类型不兼容
// num = str; // Error: Type 'string' is not assignable to type 'number'.

对象类型兼容性

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

typescript

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

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

// 以下代码是合法的，因为 person 对象包含了 Person 接口所需的所有属性
let anotherPerson: Person = person;

函数类型兼容性

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

typescript

let greet: (name: string) => void = function(name: string) {
  console.log(`Hello, ${name}!`);
};

// 以下代码是合法的，因为目标函数的参数类型和返回值类型与源函数兼容
let anotherGreet: (name: string, age?: number) => void = greet;

类类型兼容性

类类型的兼容性与对象类型类似，TypeScript 会检查类的实例是否包含目标类型所需的所有属性和方法。

typescript

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

let animal: Animal = new Dog("Buddy");

// 以下代码是合法的，因为 Dog 类继承了 Animal 类，并且包含了 Animal 类的所有属性和方法
let anotherAnimal: Animal = animal;

实际案例

案例 1：对象类型兼容性

假设我们有一个函数 printPerson，它接受一个 Person 类型的参数并打印其信息。我们可以传递一个包含更多属性的对象给这个函数，只要它包含了 Person 接口所需的所有属性。

typescript

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

function printPerson(person: Person) {
  console.log(`Name: ${person.name}, Age: ${person.age}`);
}

let alice = { name: "Alice", age: 30, gender: "female" };

// 以下代码是合法的，因为 alice 对象包含了 Person 接口所需的所有属性
printPerson(alice);

案例 2：函数类型兼容性

假设我们有一个函数 mapNumbers，它接受一个回调函数并将一个数字数组映射为另一个数字数组。我们可以传递一个参数更少的回调函数给 mapNumbers，只要它的返回值类型与目标函数兼容。

typescript

function mapNumbers(numbers: number[], callback: (num: number) => number): number[] {
  return numbers.map(callback);
}

let double = (num: number) => num * 2;

// 以下代码是合法的，因为 double 函数的参数类型和返回值类型与目标函数兼容
let doubledNumbers = mapNumbers([1, 2, 3], double);
console.log(doubledNumbers); // 输出: [2, 4, 6]

总结

TypeScript 的类型兼容性是基于结构子类型的，这意味着只要两个类型的结构相同或兼容，它们就可以相互赋值。我们通过基本类型、对象类型、函数类型和类类型的兼容性规则，逐步讲解了 TypeScript 类型兼容性的核心概念。通过实际案例，我们展示了类型兼容性在真实场景中的应用。

附加资源与练习

• 练习 1：尝试定义一个接口 Car，包含 make 和 model 属性，然后创建一个包含更多属性的对象并赋值给 Car 类型的变量。
• 练习 2：定义一个函数 filterStrings，它接受一个字符串数组和一个回调函数，并返回过滤后的字符串数组。尝试传递一个参数更少的回调函数给 filterStrings。

通过不断练习和探索，你将更加熟练地掌握 TypeScript 的类型兼容性规则，并能够在实际项目中灵活运用。