TypeScript 中的类和接口详解-JavaScript中文网-JavaScript教程资源分享门户

TypeScript 是一种静态类型的 JavaScript 超集，它可以在编写 JavaScript 代码的同时提供类型检查和更好的代码组织结构。在 TypeScript 中，类和接口是两个非常重要的概念，因为它们可以帮助我们编写更健壮且易于维护的程序。本文将深入介绍 TypeScript 中的类和接口，以及它们的应用。

类

在 TypeScript 中，类是一种面向对象的编程结构，它可以包含属性、方法和构造函数。 TypeScript 中的类有以下特点：

可以继承其他类。
可以实现接口。
可以使用 public、private、protected 等关键字来限制属性和方法的访问权限。

类的声明

在 TypeScript 中，通过 class 关键字来声明一个类，如下：

class Car {
  engine: string;

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

  start() {
    console.log('Car engine started: ' + this.engine);
  }

  stop() {
    console.log('Car engine stopped: ' + this.engine);
  }
}

上述代码定义了一个 Car 类，它有一个 engine 属性和 start()、stop() 两个方法。其中 constructor 是构造函数，用于初始化类的对象。在构造函数中，我们把传入的 engine 字符串赋值给 this.engine 属性。

接下来我们来创建一个 Car 对象并调用它的方法：

const car = new Car('V8'); // 创建一个新的 Car 对象
car.start(); // 输出: "Car engine started: V8"
car.stop(); // 输出: "Car engine stopped: V8"

类的继承

在 TypeScript 中，类可以通过继承其他类来扩展它们的功能，如：

class Truck extends Car {
  constructor(engine: string, private loadCapacity: number) {
    super(engine); // 调用父类的构造函数
  }

  getLoadCapacity() {
    console.log('Truck load capacity: ' + this.loadCapacity);
  }
}

上述代码表示 Truck 类继承了 Car 类，并在自己的构造函数中增加了一个名为 loadCapacity 的私有属性。由于 Truck 类继承了 Car 类，所以它拥有 start() 和 stop() 两个方法，并且可以通过 super 关键字来调用父类的构造函数。

现在我们可以创建一个 Truck 对象并调用它的方法：

const truck = new Truck('V12', 3000);
truck.start(); // 输出: "Car engine started: V12"
truck.stop(); // 输出: "Car engine stopped: V12"
truck.getLoadCapacity(); // 输出: "Truck load capacity: 3000"

类的访问修饰符

在 TypeScript 中，类可以使用访问修饰符来限制属性和方法的访问权限。访问修饰符可以有三种类型：

public 表示公有，即所有地方都可以访问，默认为 public。
private 表示私有，只有类内部可以访问。
protected 表示受保护，只有类以及其继承类可以访问。

例如，我们可以把 Car 类中的 engine 属性改为私有属性：

class Car {
  private engine: string;

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

  // ...
}

这时，在类的外部就无法访问 engine 属性了：

const car = new Car('V8');
console.log(car.engine); // 报错: "Property 'engine' is private and only accessible within class 'Car'."

类的静态属性和方法

在 TypeScript 中，类还可以定义静态属性和方法。静态属性和方法不属于类的对象，而是属于类本身。通过 static 关键字来声明静态属性和方法，如下：

class Car {
  static count: number = 0;

  constructor(private engine: string) {
    Car.count++; // 每次创建新对象时增加 count 值
  }

  static getCount() {
    console.log('Car count:', Car.count);
  }
}

上述代码定义了一个静态属性 count 和一个静态方法 getCount()。在每次创建 Car 对象时，count 值都会增加。我们可以通过 Car.getCount() 方法来获取当前 Car 类的对象数：

const car1 = new Car('V8');
const car2 = new Car('V12');
Car.getCount(); // 输出: "Car count: 2"

接口

在 TypeScript 中，接口是一种用于描述某种结构的语法规范。接口可以定义属性、方法、函数等，并指定它们的类型和参数。在 TypeScript 中，接口可以作为类型来使用，它们可以用于变量、函数和类中。

接口的声明

在 TypeScript 中，通过 interface 关键字来声明一个接口，如下：

interface Person {
  name: string;
  age: number;
  sayHi(): void;
}

上述代码定义了一个 Person 接口，它包含了 name、age 和 sayHi() 三个成员。其中 sayHi() 是一个方法，它没有返回值。

接口的使用

在 TypeScript 中，接口可以作为类型来使用。我们可以用接口来定义变量、函数和类中的属性和方法时的类型。例如，我们可以定义一个 printPerson() 函数，它接受一个 Person 类型的参数：

function printPerson(person: Person) {
  console.log('Name:', person.name);
  console.log('Age:', person.age);
  person.sayHi();
}

现在，我们可以创建一个 Person 对象并把它传递给 printPerson() 函数：

const person: Person = {
  name: 'Alice',
  age: 20,
  sayHi() {
    console.log('Hi, ' + this.name);
  }
};

printPerson(person);

输出结果为：

Name: Alice
Age: 20
Hi, Alice

接口的可选属性

在 TypeScript 中，接口的属性可以是可选的。如果一个属性为可选属性，那么在使用它时可以省略它。定义可选属性使用 ? 来表示。例如，我们可以给 Person 接口添加一个可选的 address 属性：

interface Person {
  name: string;
  age: number;
  address?: string; // 可选属性
  sayHi(): void;
}

现在，address 属性是可选的，我们可以在创建 Person 对象时选择性地指定它或者不指定：

const person1: Person = {
  name: 'Bob',
  age: 30,
  sayHi() {}
};

const person2: Person = {
  name: 'Carol',
  age: 25,
  address: 'New York',
  sayHi() {}
};

接口的 Readonly 属性

在 TypeScript 中，接口的成员可以标记为 readonly，表示这个属性只读，不能被重新赋值。

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

上述代码中，我们定义了一个 Person 接口，其中的 id 属性被标记为只读。这意味着，一旦 id 被赋值，就不能被改变了。例如，我们可以这样定义一个 Person 对象:

const person: Person = {
  id: 1001,
  name: 'Alice',
  age: 20
};

一旦这个对象被定义，它的 id 属性就不能被改变了：

person.id = 1002; // 报错: "Cannot assign to 'id' because it is a read-only property."

接口的函数类型

在 TypeScript 中，接口可以定义函数类型。函数类型描述了一个函数的输入和输出，它是一个具有特定参数和返回类型的函数签名。例如，我们可以定义一个接口 SearchFunc，它描述了一个具有一定输入和输出的函数：

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

接口中的函数类型可以用于定义变量、参数、返回值类型，例如:

const search: SearchFunc = function(source, subString) {
  return source.search(subString) !== -1;
};

现在，我们可以调用 search 函数，并传递给它两个参数 source 和 subString：

console.log(search('hello world', 'world')); // 输出: true

接口的可索引类型

在 TypeScript 中，接口还可以定义可索引类型。可索引类型描述了一个对象的索引的类型和值的类型。可索引类型有两种索引签名：字符串索引和数字索引。

字符串索引

字符串索引类型允许我们用字符串来索引对象。在一个字符串索引签名中，可以使用任意数量的字符串索引，同时每个索引都对应着一个返回值类型。

例如，我们可以定义一个字符串索引类型 StringArray，它描述了一个数组类型的对象，它的每个元素都是字符串：

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

上述代码表示 StringArray 类型的对象允许使用数字来索引它的元素，每个元素都是字符串类型。例如，我们可以这样定义一个 StringArray 对象：

const words: StringArray = ['hello', 'world'];
console.log(words[0]); // 输出: "hello"
console.log(words[1]); // 输出: "world"

数字索引

数字索引类型允许我们用数字来索引对象。在一个数字索引签名中，可以使用任意数量的数字索引，同时每个索引都对应着一个返回值类型。

例如，我们可以定义一个数字索引类型 NumberDict，它描述了一个键值对类型的对象，它的键是字符串类型，值是数字类型：

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

上述代码表示 NumberDict 类型的对象允许使用字符串来索引它的值，每个值都是数字类型。例如，我们可以这样定义一个 NumberDict 对象：

const dict: NumberDict = { 'one': 1, 'two': 2, 'three': 3 };
console.log(dict['one']); // 输出: 1
console.log(dict['two']); // 输出: 2

总结

本文介绍了 TypeScript 中的类和接口，涵盖了声明、继承、访问修饰符、静态属性和方法、可选属性、只读属性、函数类型、可索引类型等多个方面。类和接口是 TypeScript 中非常重要的语言特性，它们可以帮助我们编写更具有结构性和可维护性的程序。通过学习和使用类和接口，我们可以更好地掌握 TypeScript 的编程思想和技巧，从而更好地开发高质量的前端应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a51bf0add4f0e0ffd8adb6

TypeScript 中的类和接口详解

类