TS 入门(五)：TypeScript接口与类

前言

在前三章中，我们介绍了 TypeScript 的基础知识、函数与对象类型。在本章中，我们将探讨更高级的类型和类型操作，包括联合类型、交叉类型、字面量类型、类型断言、类型兼容性和类型守卫等内容。通过这些高级特性，你将能够编写出更加灵活和强大的代码。

• TS 入门(一)：TypeScript 简介与安装
• TS 入门(二)：Typescript类型与类型注解
• TS 入门(三)：Typescript函数与对象类型
• TS 入门(四)：TypeScript 高级类型与类型操作

回顾高级类型与类型操作

在上一章中，我们学习了以下内容：

• 联合类型和交叉类型
• 字面量类型
• 类型断言
• 类型兼容性
• 类型守卫（typeof, instanceof, 自定义类型守卫）
• 类型映射

---

正文开始 ， 如果觉得文章对您有帮助，请帮我三连+订阅，谢谢💖💖💖

---

1. 接口

a. 基本接口

接口用于定义对象的结构，包括属性和方法。

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

let user: Person = {
  name: "张三",
  age: 25,
};

b. 可选属性和只读属性

在接口中，可以将某些属性定义为可选或只读。

interface Product {
  name: string;
  price: number;
  description?: string; // 可选属性
  readonly id: number; // 只读属性
}

let product: Product = {
  name: "手机",
  price: 4999,
  id: 1,
};

// product.id = 2; // 错误，id 是只读属性

c. 函数类型接口

接口不仅可以用于对象，还可以用于函数类型。

interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc = function (source: string, subString: string): boolean {
  return source.indexOf(subString) !== -1;
};

d. 可索引类型

可索引类型用于表示对象的索引和对应的值类型。

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray = ["Hello", "World"];
let myStr: string = myArray[0]; // "Hello"

e. 接口继承

接口可以继承其他接口，从而扩展它们的属性和方法。

interface Shape {
  color: string;
}

interface Square extends Shape {
  sideLength: number;
}

let square: Square = {
  color: "蓝色",
  sideLength: 10,
};

2. 类

a. 基本类

类用于创建对象，并定义对象的属性和方法。

class Animal {
  name: string;

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

  move(distance: number = 0) {
    console.log(`${this.name} 移动了 ${distance} 米`);
  }
}

let dog = new Animal("狗");
dog.move(10); // "狗 移动了 10 米"

b. 类的成员（属性和方法）

类可以包含属性和方法，方法可以使用 this 访问类的属性。

class Person {
  name: string;
  age: number;

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

  greet() {
    console.log(`你好，我是 ${this.name}，今年 ${this.age} 岁`);
  }
}

let person = new Person("李四", 30);
person.greet(); // "你好，我是 李四，今年 30 岁"

c. 构造函数

构造函数用于创建类的实例，并初始化属性。

class Car {
  brand: string;
  model: string;

  constructor(brand: string, model: string) {
    this.brand = brand;
    this.model = model;
  }

  display() {
    console.log(`这是一辆 ${this.brand} ${this.model}`);
  }
}

let car = new Car("特斯拉", "Model S");
car.display(); // "这是一辆 特斯拉 Model S"

d. 继承和派生类

类可以继承其他类，从而扩展和重用它们的属性和方法。

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

let myDog = new Dog("旺财");
myDog.bark(); // "汪汪"
myDog.move(5); // "旺财 移动了 5 米"

e. 公有、私有和受保护的修饰符

可以使用 public、private 和 protected 修饰符来控制类成员的访问权限。

class Person {
  public name: string;
  private age: number;
  protected address: string;

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

  public getAge() {
    return this.age;
  }
}

class Employee extends Person {
  constructor(name: string, age: number, address: string) {
    super(name, age, address);
  }

  public getAddress() {
    return this.address; // 正确，protected 属性在派生类中可访问
  }
}

let emp = new Employee("李四", 30, "北京");
console.log(emp.name); // "李四"
// console.log(emp.age); // 错误，age 是私有属性
// console.log(emp.address); // 错误，address 是受保护属性

f. 静态属性和方法

静态属性和方法是属于类本身的，而不是类的实例。

class MathUtil {
  static PI = 3.14;

  static circleArea(radius: number): number {
    return this.PI * radius * radius;
  }
}

console.log(MathUtil.PI); // 3.14
console.log(MathUtil.circleArea(5)); // 78.5

g. 抽象类

抽象类是不能被实例化的类，用于定义子类必须实现的方法。

abstract class Animal {
  abstract makeSound(): void;

  move(): void {
    console.log("移动");
  }
}

class Dog extends Animal {
  makeSound() {
    console.log("汪汪");
  }
}

let dog = new Dog();
dog.makeSound(); // "汪汪"
dog.move(); // "移动"

扩展知识点：接口与类的结合使用

接口可以用来描述类的公共部分，并可以对类进行类型检查。

interface ClockInterface {
  currentTime: Date;
  setTime(d: Date): void;
}

class Clock implements ClockInterface {
  currentTime: Date;

  constructor(h: number, m: number) {
    this.currentTime = new Date();
  }

  setTime(d: Date) {
    this.currentTime = d;
  }
}

let clock = new Clock(12, 30);
clock.setTime(new Date());
console.log(clock.currentTime);

结语

通过本章的学习，你应该对 TypeScript 中的接口和类有了更深入的理解。掌握这些面向对象的特性将使你能够编写更加结构化和可维护的代码。在下一章中，我们将继续探讨 TypeScript 中的泛型编程，包括泛型函数、泛型接口、泛型类和泛型约束等内容。务必掌握好每个概念，它们将为你后续学习 TypeScript 提供坚实的基础。