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

前端TypeScript学习-交叉类型与泛型

article 2024/9/27 19:16:08

交叉类型和泛型是TypeScript中的两个重要概念。

交叉类型（&）可以用来组合多个接口，形成一个新接口。它类似于接口继承（extends），但有一些区别。交叉类型不会产生类型继承层次结构，而是将多个接口类型合并成一个新类型。

泛型则是一种在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用的机制。泛型常用于函数、接口、class中。

交叉类型（Intersection Types）

示例：


type Person = {  
    name: string;  
    age: number;  
};  
  
type Employee = {  
    salary: number;  
    department: string;  
};  
  
type PersonAndEmployee = Person & Employee; // 交叉类型  
  
function printInfo(person: Person): void {  
    console.log(`Name: ${person.name}, Age: ${person.age}`);  
}  
  
function printInfo(employee: Employee): void {  
    console.log(`Salary: ${employee.salary}, Department: ${employee.department}`);  
}  
  
let pae: PersonAndEmployee = {  
    name: "John",  
    age: 30,  
    salary: 50000,  
    department: "Engineering"  
};  
  
printInfo(pae); // 输出：Salary: 50000, Department: Engineering，因为 pae 既是 Person 又是 Employee

上面示例我们定义了两个类型：Person 和 Employee。Person 类型具有 name 和 age 属性，Employee 类型具有 salary、department 和 title 属性。通过使用交叉类型，我们可以创建一个同时具有 Person 和 Employee 属性的新类型 PersonAndEmployee。然后我们定义了一个 printInfo 函数，它可以接受 Person 或 Employee 类型的参数，并打印相应的信息。最后，我们创建了一个 PersonAndEmployee 类型的变量 pae，并使用 printInfo 函数打印了它的信息。由于 pae 既是 Person 又是 Employee，因此我们可以使用任意一个 printInfo 函数来打印它的信息。

优点：

方便类型定义：通过交叉类型，可以将多个接口或类型组合成一个新类型，使得类型定义更加灵活和方便。
提高代码复用：交叉类型可以在不同的类型之间共享某些属性，从而实现代码复用。

缺点：

类型复杂：交叉类型的类型定义比较复杂，容易使代码的可读性降低。
类型限制：交叉类型会限制所组合类型的属性，如果某个属性在组合类型中没有定义，则该属性不能被赋值给组合类型的变量。

使用场景：

UI组件：可以将用户界面组件定义为交叉类型，例如一个按钮组件可以同时具有“默认按钮”和“强调按钮”的属性。
对象封装：可以将对象的属性和方法定义为交叉类型，例如一个对象可以同时具有“用户信息”和“可编辑用户信息”的属性。

泛型（Generics）

示例：


function printMessage<T>(message: T): void {  
    console.log(message);  
}  
  
printMessage("Hello"); // string 类型参数  
printMessage(123); // number 类型参数  
printMessage({ key: "value" }); // object 类型参数

上面示例我们定义了一个泛型函数 printMessage，它接受一个类型参数 T，并打印一个 T 类型的消息。在调用 printMessage 函数时，我们可以传入任意类型的参数，例如 string、number 或 object。TypeScript 会根据传递的参数类型推断出 T 的类型，并确保传递的参数类型与 T 类型匹配。这样，我们就可以使用泛型来处理不同类型的消息，而无需为每种类型编写不同的代码。