TS 交叉类型与继承：别再傻傻分不清啦！

最新推荐文章于 2025-07-22 11:00:57 发布

原创最新推荐文章于 2025-07-22 11:00:57 发布 · 823 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #typescript

你有没有被 TypeScript 中的“交叉类型”和“继承”搞得头晕目眩？看起来，它们好像在做同一件事？

在 TypeScript 中，交叉类型和继承是两种非常强大的工具，然而，很多开发者在刚接触时常常会混淆它们。两者都能让你在类型系统中“合并”多个对象或类型，但它们在实际用途和语法上却有很大的不同。

你知道什么时候该用交叉类型，什么时候又该用继承吗？来来来~看看你是否正确的理解了交叉类型与继承！

一、继承的基本概念

继承是面向对象编程（OOP）的基石之一，它让一个类可以继承另一个类的属性和方法。在 TypeScript 中，继承通过 extends 关键字实现。

比如说，我们有一个基类叫做“动物”，这个类有一些基本的属性，像“名字”和“年龄”，还有一些通用的方法，比如“吃东西”。

class Animal {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  eat() {
    console.log(`${this.name} is eating.`);
  }
}

接着，还可以有派生类，比如“猫”类和“狗”类，它们继承自“动物”类。这些派生类不仅拥有基类的属性和方法，还可以有自己独特的属性和行为。就像猫可能有“抓老鼠”的方法，狗可能有“看家”·的方法。

class Cat extends Animal {
  catchMouse() {
    console.log(`${this.name} is catching a mouse.`);
  }
}

class Dog extends Animal {
  guardHouse() {
    console.log(`${this.name} is guarding the house.`);
  }
}

在这个例子中，Cat、Dog 继承了 Animal 类，它拥有 Animal 类的属性和方法，并且还可以对方法进行覆盖。

所以我们可以知道继承的用途是：主要用于代码复用和实现多态性，允许开发者创建基于现有类的新的类。

二、交叉类型的基本概念

交叉类型是 TypeScript 中一种非常有趣的类型组合机制。通过交叉类型，你可以将多个类型合并为一个类型，所有的属性和方法都会“合体”成一个新的类型。交叉类型的语法使用 & 操作符。

比如说，我们有一个类型叫 “HasName”，它只有一个 “name” 属性，还有一个类型叫 “HasAge”，它只有一个 “age” 属性。我们可以用交叉类型把它们组合成一个新的类型 “Person”，这个 “Person” 类型就既有 “name” 属性又有 “age” 属性。

type HasName = {
  name: string;
};

type HasAge = {
  age: number;
};

type Person = HasName & HasAge;

let person: Person = {
  name: "Tom",
  age: 20
};

在这个例子中，HasName 和 HasAge 两个类型通过 & 操作符合并为 Person 类型，最终对象包含了这两个类型的所有属性。

所以我们可以知道交叉类型的主要应用场景是合并多个类型。

三、交叉类型与继承的对比

1. 语法上的区别

继承：使用 extends 关键字，通常用于类之间的关系。
交叉类型：使用 & 操作符，通常用于类型之间的组合。

2. 功能上的区别

继承：是对象之间的“父子”关系，子类继承父类的属性和方法，可以对父类的方法进行重写或扩展。
交叉类型：是类型的“合体”，多个类型合并成一个新的类型，所有属性都被并入新类型中，没有继承的语义。

3. 结构与行为

交叉类型：主要关注于结构的合并，即属性的合并。
继承：不仅关注结构，还关注行为的传递，即方法和属性的继承。

4. 灵活性与限制

交叉类型：提供了更大的灵活性，允许在不改变原有类型的基础上进行类型合并。
继承：提供了行为的封装，但可能会限制类型的灵活性，因为子类必须遵循父类的接口。

四、最佳实践

1. 什么时候使用继承？

当你需要创建一个层次结构，并且子类需要复用父类的行为时。

继承适用于面向对象设计场景，尤其是当你需要表示类之间的层次关系时。继承能够帮助你复用代码，避免重复定义相同的属性和方法，并且能够通过多态机制简化代码设计。

假设我们在做一个用户注册表单。我们可以用继承的方式来构建基础验证类和具体表单验证类。比如有一个基础的 “Validator” 类，它有一些通用的验证方法，然后 “UsernameValidator” 类和 “PasswordValidator” 类继承自它，分别处理用户名和密码的特定验证规则。

class Validator {
  validateLength(input: string): boolean {
    return input.length > 0;
  }
}

class UsernameValidator extends Validator {
  validateUsernameFormat(username: string): boolean {
    // 这里可以添加用户名格式验证逻辑，例如检查是否只包含字母数字字符
    const usernameRegex = /^[a-zA-Z0-9]+$/;
    return usernameRegex.test(username);
  }
}

class PasswordValidator extends Validator {
  validatePasswordStrength(password: string): boolean {
    // 这里可以添加密码强度验证逻辑，比如检查是否包含数字、字母和特殊字符
    const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^\w\d\s:])([^\s]){8,}$/;
    return passwordRegex.test(password);
  }
}

2. 什么时候使用交叉类型

当你需要合并多个不相关的类型，且不关心它们之间的层次结构时。

交叉类型更适合用于将多个类型合并成一个新的类型，这通常发生在函数、数据结构、或者组合不同功能的场景中。它不涉及继承的“层次关系”，而是将多个类型合并成一个更复杂的类型。

同样的假设我们在做一个用户注册表单。我们可以定义不同的验证规则类型，然后交叉组合成一个最终的表单验证类型。

type UsernameRule = {
  validateUsernameFormat: (username: string) => boolean;
};

type PasswordRule = {
  validatePasswordStrength: (password: string) => boolean;
};

type FormValidation = UsernameRule & PasswordRule;

let formValidation: FormValidation = {
  validateUsernameFormat: (username) => {
    // 具体验证逻辑，如上述用户名格式验证
    const usernameRegex = /^[a-zA-Z0-9]+$/;
    return usernameRegex.test(username);
  },
  validatePasswordStrength: (password) => {
    // 具体验证逻辑，如上述密码强度验证
    const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^\w\d\s:])([^\s]){8,}$/;
    return passwordRegex.test(password);
  }
};

3. 结合使用

在某些情况下，你可以结合使用交叉类型和继承，以获得更大的灵活性和代码复用。

同样是上面的案例，我们可以创建一个 “FullFormValidator” 类，它继承自 “Validator” 类，同时使用交叉类型来组合额外的验证规则。

class FullFormValidator extends Validator {
  constructor() {
    super();
  }

  // 使用交叉类型组合的验证规则
  validationRules: FormValidation = {
    validateUsernameFormat: (username) => {
      const usernameRegex = /^[a-zA-Z0-9]+$/;
      return usernameRegex.test(username);
    },
    validatePasswordStrength: (password) => {
      const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^\w\d\s:])([^\s]){8,}$/;
      return passwordRegex.test(password);
    }
  }

  // 验证整个表单的方法，调用了继承的通用验证和交叉类型组合的特定验证
  validateForm(username: string, password: string): boolean {
    if (!this.validateLength(username) ||!this.validateLength(password)) {
      return false;
    }
    if (!this.validationRules.validateUsernameFormat(username)) {
      return false;
    }
    if (!this.validationRules.validatePasswordStrength(password)) {
      return false;
    }
    return true;
  }
}

这个案例可能有点绕，不过别担心。只要你把它搞清楚了，你就可以正确地理解和有效地使用它们了。

五、常见的坑

1. 继承中的“类型丢失”问题

当你继承一个类并试图覆盖其方法时，如果没有正确使用 super 关键字，可能会导致父类的属性或方法丢失。

示例：

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

class Dog extends Animal {
  breed: string;

  constructor(name: string, breed: string) {
    // 错误：没有调用 super()
    this.name = name; 
    this.breed = breed;
  }
}

此时，name 属性没有被正确初始化，会导致报错。

2. 交叉类型中的“属性冲突”问题

当交叉类型的两个类型有相同的属性时，可能会导致冲突，特别是属性的类型不匹配时。