TypeScript 中的类与接口详解-FunTeaLearn Online Web Tutorials

TypeScript 是一种由微软开发的 JavaScript 超集，它为 JavaScript 添加了静态类型、类、接口等特性。在前端开发中，TypeScript 已经被广泛应用于大型项目中，它可以提高代码的可维护性和可读性，减少错误和调试时间。本文将详细介绍 TypeScript 中的类与接口，包括类的定义、继承、访问修饰符、静态属性和方法，以及接口的定义、可选属性、只读属性、函数类型和类类型等。

类的定义

在 TypeScript 中，类的定义使用 class 关键字，类名的首字母通常大写。类中可以定义属性和方法，属性可以有默认值，方法可以有参数和返回值类型。下面是一个简单的类的示例：

// www.javascriptcn.com code example
class Person {
  name: string;
  age: number;

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

  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

const p = new Person('Tom', 18);
p.sayHello(); // Hello, my name is Tom, I'm 18 years old.

在上面的示例中，Person 类有两个属性 name 和 age，它们分别表示人的姓名和年龄。Person 类还有一个构造函数 constructor，它接受两个参数 name 和 age，并将它们分别赋值给类的属性。Person 类还有一个方法 sayHello，它使用 console.log 打印出人的姓名和年龄。

类的继承

在 TypeScript 中，类可以使用 extends 关键字继承另一个类，从而获得父类的属性和方法。子类可以重写父类的方法，或者添加新的属性和方法。下面是一个类的继承示例：

// www.javascriptcn.com code example
class Student extends Person {
  grade: number;

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

  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old, and I'm in grade ${this.grade}.`);
  }
}

const s = new Student('Alice', 17, 11);
s.sayHello(); // Hello, my name is Alice, I'm 17 years old, and I'm in grade 11.

在上面的示例中，Student 类继承了 Person 类，并添加了一个新的属性 grade，表示学生的年级。Student 类重写了 sayHello 方法，使用 console.log 打印出学生的姓名、年龄和年级。

访问修饰符

在 TypeScript 中，可以使用访问修饰符控制类的属性和方法的访问权限。访问修饰符包括 public、private 和 protected，分别表示公有、私有和受保护的属性和方法。默认情况下，类的属性和方法都是公有的。

public：公有属性和方法可以在类的内部和外部访问。
private：私有属性和方法只能在类的内部访问，子类和实例都无法访问。
protected：受保护的属性和方法可以在类的内部和子类中访问，但是实例无法访问。

下面是一个访问修饰符的示例：

// www.javascriptcn.com code example
class Animal {
  public name: string;
  private age: number;
  protected gender: string;

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

  public sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old, and I'm a ${this.gender}.`);
  }

  private getAge() {
    return this.age;
  }

  protected getGender() {
    return this.gender;
  }
}

class Cat extends Animal {
  constructor(name: string, age: number, gender: string) {
    super(name, age, gender);
  }

  public sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm a ${this.getGender()} cat.`);
  }
}

const animal = new Animal('Tom', 3, 'male');
animal.sayHello(); // Hello, my name is Tom, I'm 3 years old, and I'm a male.
console.log(animal.name); // Tom
console.log(animal.age); // Error: Property 'age' is private and only accessible within class 'Animal'.
console.log(animal.gender); // Error: Property 'gender' is protected and only accessible within class 'Animal'.

const cat = new Cat('Kitty', 1, 'female');
cat.sayHello(); // Hello, my name is Kitty, I'm a female cat.
console.log(cat.name); // Kitty
console.log(cat.age); // Error: Property 'age' is private and only accessible within class 'Animal'.
console.log(cat.gender); // Error: Property 'gender' is protected and only accessible within class 'Animal'.

在上面的示例中，Animal 类定义了三个属性 name、age 和 gender，分别表示动物的名称、年龄和性别。Animal 类有一个公有方法 sayHello，使用 console.log 打印出动物的名称、年龄和性别。Animal 类还有一个私有方法 getAge，它返回动物的年龄。Animal 类还有一个受保护方法 getGender，它返回动物的性别。

Cat 类继承了 Animal 类，并重写了 sayHello 方法。Cat 类使用 console.log 打印出猫的名称和性别，使用 getGender 方法获取受保护的属性 gender。在实例化 Animal 和 Cat 类的时候，可以分别访问公有属性和方法，但是无法访问私有和受保护的属性和方法。

静态属性和方法

在 TypeScript 中，可以使用 static 关键字定义静态属性和方法。静态属性和方法不需要实例化类就可以访问，可以通过类名直接访问。下面是一个静态属性和方法的示例：

// www.javascriptcn.com code example
class MathUtils {
  static PI: number = 3.141592653589793;

  static add(a: number, b: number) {
    return a + b;
  }

  static sub(a: number, b: number) {
    return a - b;
  }
}

console.log(MathUtils.PI); // 3.141592653589793
console.log(MathUtils.add(1, 2)); // 3
console.log(MathUtils.sub(3, 4)); // -1

在上面的示例中，MathUtils 类定义了一个静态属性 PI 和两个静态方法 add 和 sub。静态属性和方法可以通过类名直接访问，不需要实例化类。在使用静态属性和方法的时候，可以省略 new 关键字。

接口的定义

在 TypeScript 中，接口用来描述对象的形状，它可以定义对象的属性、方法和索引类型。接口可以用来限制函数的参数和返回值类型，也可以用来限制类的实例属性和方法。下面是一个接口的示例：

// www.javascriptcn.com code example
interface Person {
  name: string;
  age: number;
  sayHello(): void;
}

const p: Person = {
  name: 'Tom',
  age: 18,
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
};

p.sayHello(); // Hello, my name is Tom, I'm 18 years old.

在上面的示例中，Person 接口定义了三个属性 name、age 和 sayHello，分别表示人的姓名、年龄和打招呼的方法。Person 接口限制了对象的形状，它可以用来限制函数的参数和返回值类型，也可以用来限制类的实例属性和方法。在实例化对象的时候，需要满足接口的要求。

可选属性和只读属性

在 TypeScript 中，可以使用 ? 修饰符定义可选属性，表示这个属性可以不存在。还可以使用 readonly 关键字定义只读属性，表示这个属性只能在初始化的时候赋值，之后不能修改。下面是一个可选属性和只读属性的示例：

// www.javascriptcn.com code example
interface Animal {
  name: string;
  age: number;
  gender?: string;
  readonly type: string;
}

const animal: Animal = {
  name: 'Tom',
  age: 3,
  type: 'cat'
};

console.log(animal.name); // Tom
console.log(animal.age); // 3
console.log(animal.gender); // undefined
console.log(animal.type); // cat

animal.name = 'Kitty';
animal.age = 1;
animal.gender = 'female';
animal.type = 'dog'; // Error: Cannot assign to 'type' because it is a read-only property.

在上面的示例中，Animal 接口定义了四个属性 name、age、gender 和 type，分别表示动物的名称、年龄、性别和类型。gender 属性使用 ? 修饰符定义为可选属性，表示这个属性可以不存在。type 属性使用 readonly 关键字定义为只读属性，表示这个属性只能在初始化的时候赋值，之后不能修改。在实例化 Animal 对象的时候，可以省略可选属性，但是不能修改只读属性。

函数类型和类类型

在 TypeScript 中，可以使用接口描述函数的类型和类的类型。函数类型的接口定义了函数的参数和返回值类型，类类型的接口定义了类的构造函数和实例方法。下面是一个函数类型和类类型的示例：

// www.javascriptcn.com code example
interface AddFunc {
  (a: number, b: number): number;
}

const add: AddFunc = (a, b) => a + b;

console.log(add(1, 2)); // 3

interface Animal {
  name: string;
  age: number;
  sayHello(): void;
}

interface AnimalConstructor {
  new(name: string, age: number): Animal;
}

class Cat implements Animal {
  name: string;
  age: number;

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

  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm a cat.`);
  }
}

const AnimalClass: AnimalConstructor = Cat;
const animal: Animal = new AnimalClass('Kitty', 1);
animal.sayHello(); // Hello, my name is Kitty, I'm a cat.

在上面的示例中，AddFunc 接口定义了一个函数类型，它接受两个参数 a 和 b，返回一个数字。add 函数满足 AddFunc 接口的要求，可以使用 add 函数进行加法运算。

Animal 接口定义了一个类的类型，它有三个属性 name、age 和 sayHello，分别表示动物的名称、年龄和打招呼的方法。AnimalConstructor 接口定义了一个类的构造函数类型，它接受两个参数 name 和 age，返回一个 Animal 类型的对象。Cat 类实现了 Animal 接口，它有两个属性 name 和 age，和一个实例方法 sayHello。在实例化 AnimalClass 对象的时候，使用 Cat 类作为参数，返回一个 Animal 类型的对象。在实例化 animal 对象的时候，使用 AnimalClass 类作为构造函数，返回一个 Cat 类型的对象，然后可以调用 sayHello 方法。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67da2659a941bf71341e1a99

TypeScript 中的类与接口详解