TypeScript 中 interface 和 class 的区别及使用技巧详解-JavaScript中文网-JavaScript教程资源分享门户

在 TypeScript 中，interface 和 class 都是非常常用的概念，它们分别代表了类型和对象的定义。但是在使用过程中，很多人不清楚它们之间的区别和使用技巧。本文将详细介绍 TypeScript 中 interface 和 class 的区别和使用技巧，帮助读者更好地理解和使用它们。

interface

在 TypeScript 中，interface 用来描述一个对象的结构，它只是一个类型声明，不会生成真正的 JavaScript 代码。interface 可以用来定义对象的属性、方法、函数等。

定义 interface

interface 的定义格式如下：

interface InterfaceName {
  property1: type1;
  property2?: type2;
  method1(): void;
  method2?(arg1: type1, arg2: type2): type3;
}

其中，property1 和 property2 是对象的属性，method1 和 method2 是对象的方法。其中，? 表示该属性或方法是可选的。

使用 interface

使用 interface 的时候，需要定义一个对象，该对象必须包含 interface 中定义的所有属性和方法。例如：

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

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

person.sayHello(); // 输出：Hello, my name is Tom and I'm 18 years old.

在上面的例子中，我们定义了一个 Person 接口，包含了 name、age 和 sayHello 三个属性。然后我们定义了一个 person 对象，该对象包含了这三个属性，并且实现了 sayHello 方法。最后我们调用了 person 对象的 sayHello 方法，输出了一段字符串。

接口继承

在 TypeScript 中，interface 支持继承，可以通过 extends 关键字来实现。例如：

interface Animal {
  eat(): void;
}

interface Dog extends Animal {
  bark(): void;
}

class Labrador implements Dog {
  eat() {
    console.log('I am eating.');
  }

  bark() {
    console.log('I am barking.');
  }
}

const dog: Dog = new Labrador();
dog.eat(); // 输出：I am eating.
dog.bark(); // 输出：I am barking.

在上面的例子中，我们定义了一个 Animal 接口，包含了一个 eat 方法。然后我们定义了一个 Dog 接口，继承了 Animal 接口，并且增加了一个 bark 方法。最后我们定义了一个 Labrador 类，实现了 Dog 接口，并且实现了 eat 和 bark 方法。最后我们定义了一个 dog 对象，类型为 Dog，赋值为 Labrador 类的实例。我们调用了 dog 对象的 eat 和 bark 方法，分别输出了一段字符串。

class

在 TypeScript 中，class 用来定义一个对象，它是一种模板，用来创建具有相同属性和方法的对象。class 会生成真正的 JavaScript 代码，它可以通过 new 关键字来创建对象。

定义 class

class 的定义格式如下：

class ClassName {
  constructor(arg1: type1, arg2: type2) {
    // constructor code
  }

  property1: type1;
  property2: type2;
  method1(): void {
    // method1 code
  }
  method2(arg1: type1, arg2: type2): type3 {
    // method2 code
  }
}

其中，constructor 是构造函数，用来初始化对象的属性；property1 和 property2 是对象的属性；method1 和 method2 是对象的方法。

使用 class

使用 class 的时候，需要通过 new 关键字来创建一个对象。例如：

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

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

const person = new Person('Tom', 18);
person.sayHello(); // 输出：Hello, my name is Tom and I'm 18 years old.

在上面的例子中，我们定义了一个 Person 类，包含了 name、age 和 sayHello 三个属性。然后我们通过 new 关键字创建了一个 person 对象，该对象包含了这三个属性，并且实现了 sayHello 方法。最后我们调用了 person 对象的 sayHello 方法，输出了一段字符串。

类继承

在 TypeScript 中，class 支持继承，可以通过 extends 关键字来实现。例如：

class Animal {
  eat() {
    console.log('I am eating.');
  }
}

class Dog extends Animal {
  bark() {
    console.log('I am barking.');
  }
}

class Labrador extends Dog {
  run() {
    console.log('I am running.');
  }
}

const dog = new Labrador();
dog.eat(); // 输出：I am eating.
dog.bark(); // 输出：I am barking.
dog.run(); // 输出：I am running.

在上面的例子中，我们定义了一个 Animal 类，实现了 eat 方法。然后我们定义了一个 Dog 类，继承了 Animal 类，并且增加了一个 bark 方法。最后我们定义了一个 Labrador 类，继承了 Dog 类，并且增加了一个 run 方法。最后我们定义了一个 dog 对象，赋值为 Labrador 类的实例。我们调用了 dog 对象的 eat、bark 和 run 方法，分别输出了一段字符串。

interface 和 class 的区别

interface 和 class 都可以用来定义对象的属性和方法，但是它们之间也有很大的区别。

interface 的特点

interface 只是一个类型声明，不会生成真正的 JavaScript 代码。
interface 可以用来描述一个对象的结构，包括属性、方法、函数等。
interface 支持继承。

class 的特点

class 是一个模板，用来创建具有相同属性和方法的对象。
class 会生成真正的 JavaScript 代码。
class 支持继承。

总结

interface 和 class 都是 TypeScript 中非常常用的概念，它们分别代表了类型和对象的定义。在使用过程中，我们需要根据实际情况选择合适的方式来定义和创建对象。interface 可以用来描述一个对象的结构，而 class 可以用来创建具有相同属性和方法的对象。在使用过程中，我们需要根据实际情况选择合适的方式来定义和创建对象，以便更好地实现我们的业务逻辑。

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