TypeScript Class，爽到爆！轻松玩转泛型实践，你也可以！

2023-05-11 07:48:26

TypeScript Class：解锁 JavaScript 的无限可能

TypeScript Class 是 JavaScript 发展历程中的一座里程碑，为其带来了前所未有的清晰度、类型安全性和灵活性。让我们深入探索 Class 的强大功能，了解它们如何让你的代码更上一层楼。

泛型：代码的万能钥匙

想象一下一个能适应任何类型数据的万能工具。这就是 TypeScript 泛型！泛型允许你编写可重用的代码，无论数据类型如何，它都能无缝运行。想象一下，你编写了一个排序函数，而不管数组中元素的数据类型如何，它都可以完美地工作。

function sort<T>(arr: T[]): T[] {
  // 排序算法
  return arr;
}

实例属性：赋予对象生命力

Class 实例属性就像对象的生命线，存储着对象独有的数据和状态。通过实例属性，你可以为每个对象创建定制化的属性，使它们具有丰富而多样的行为。

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

实例方法：让对象动起来

Class 实例方法是赋予对象行为和功能的引擎。通过实例方法，你可以操作对象的状态、属性和其他信息，让对象像活生生的一样。

class Animal {
  name: string;

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

  speak() {
    console.log(`My name is ${this.name}!`);
  }
}

静态属性：共享的秘密

静态属性就像 Class 的共享宝库，存储着与 Class 本身相关的信息，而不是它的实例。这些属性对于维护 Class 范围内的全局信息非常有用。

class MyClass {
  static version: string = "1.0.0";

  static getVersion() {
    console.log(`Current version: ${this.version}`);
  }
}

静态方法：共享的行为

静态方法与静态属性类似，但它们允许 Class 定义共享行为。无论有多少对象实例，静态方法始终与 Class 本身相关，提供了一致且可重复使用的功能。

class MyClass {
  static createInstance(name: string) {
    return new MyClass(name);
  }
}

访问控制：守卫你的代码堡垒

访问控制就像代码世界的堡垒，保护着 Class 的内部机制免受未经授权的访问。通过访问控制，你可以限制对特定属性和方法的访问，确保代码的安全性和保密性。

class MyClass {
  private name: string;

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

  public getName() {
    return this.name;
  }
}

继承：站在巨人的肩膀上

想象一下，你可以利用现有代码的力量，而无需从头开始。这就是继承的威力！继承允许你创建新的 Class，同时继承父 Class 的所有属性和方法，让你能够轻松扩展和重用代码。

class Animal {
  name: string;

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

class Dog extends Animal {
  breed: string;

  constructor(name: string, breed: string) {
    super(name); // 调用父类构造函数
    this.breed = breed;
  }
}

多态：代码的多样性

多态就像变形金刚一样，允许对象以不同的形式出现。通过多态，你可以创建具有相同接口但不同实现的 Class，让你的代码更加灵活和强大。

interface Shape {
  area(): number;
}

class Rectangle implements Shape {
  width: number;
  height: number;

  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }

  area(): number {
    return this.width * this.height;
  }
}

class Circle implements Shape {
  radius: number;

  constructor(radius: number) {
    this.radius = radius;
  }

  area(): number {
    return Math.PI * this.radius ** 2;
  }
}