TypeScript类型兼容性漫谈

2024-01-05 13:08:41

TypeScript 中的类型兼容性：理解子类型和兼容类型

在 TypeScript 中，类型兼容性是一个关键概念，因为它允许我们在代码中分配和使用不同类型的值。它基于子类型的原则，即一个子类型的变量可以分配给父类型的变量。例如，一个数字类型的变量可以分配给一个任意类型的变量，因为数字是任意类型的子类型。

类型兼容性的类型

TypeScript 中有五种主要的类型兼容性类型：

结构类型兼容性

当两个结构类型具有相同的属性名称，并且每个属性的类型也兼容时，它们就是兼容的。这类似于面向对象编程中的类继承。

示例：

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

interface Employee extends Person {
  salary: number;
}

const person: Person = { name: "John", age: 30 };
const employee: Employee = { name: "Jane", age: 32, salary: 50000 };

// 兼容，因为 Employee 扩展了 Person
employee = person;

函数类型兼容性

当两个函数类型的参数类型兼容，并且返回类型也兼容时，它们就是兼容的。

示例：

function add(a: number, b: number): number {
  return a + b;
}

function sum(a: number, b: number, c: number): number {
  return a + b + c;
}

// 兼容，因为参数类型和返回类型都兼容
add = sum;

联合类型兼容性

当两个联合类型的所有成员类型都兼容时，它们就是兼容的。

示例：

type Person = string | number;
type Employee = string | number | boolean;

// 兼容，因为 Person 和 Employee 中的所有类型都兼容
const person: Person = "John";
const employee: Employee = true;

交叉类型兼容性

当两个交叉类型的每个成员类型都兼容时，它们就是兼容的。

示例：

type Person = {
  name: string;
  age: number;
};

type Employee = Person & {
  salary: number;
};

type Manager = Employee & {
  team: string[];
};

// 兼容，因为每个成员类型都兼容
const person: Person = { name: "John", age: 30 };
const employee: Employee = { name: "Jane", age: 32, salary: 50000 };
const manager: Manager = { name: "Bob", age: 40, salary: 75000, team: ["Alice", "Bob", "Carol"] };

类型别名兼容性

当两个类型别名指向兼容的类型时，它们就是兼容的。

示例：

type Person = string | number;
type Employee = Person;

// 兼容，因为 Employee 别名指向 Person 类型
const person: Person = "John";
const employee: Employee = true;