TypeScript 中的 interface 与 class 的区别和联系-JavaScript中文网-JavaScript教程资源分享门户

在 TypeScript 中，interface 和 class 是两个非常重要的概念。虽然它们都可以用来定义类型，但是它们在定义类型的方式和用法上有很大的区别。本文将详细介绍 TypeScript 中 interface 和 class 的区别和联系，并给出相应的示例代码。

interface

interface 是 TypeScript 中用于定义对象类型的关键字。interface 定义的类型只包含属性和方法的声明，而没有实现。interface 常用于定义函数、对象和类的类型，它可以用来描述一个对象应该具有哪些属性以及这些属性的类型。

interface 的语法如下：

interface InterfaceName {
  property1: type1;
  property2: type2;
  method1(): returnType1;
  method2(arg1: argType1, arg2: argType2): returnType2;
}

其中，property1 和 property2 表示接口中的属性，method1 和 method2 表示接口中的方法。type1、type2、returnType1、returnType2、argType1 和 argType2 分别为属性类型和方法参数类型。

下面是一个 interface 的示例代码：

// javascriptcn.com 代码示例
interface Person {
  name: string;
  age: number;
  sayHello(): void;
}

class Student implements Person {
  name: string;
  age: number;
  grade: number;

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

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

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

在上面的代码中，我们定义了一个 Person 接口，它包含 name、age 和 sayHello 方法三个属性。然后我们定义了一个 Student 类，它实现了 Person 接口，并且添加了 grade 属性。最后我们创建了一个 student 实例，并且调用了它的 sayHello 方法。

class

class 是 TypeScript 中用于定义类的关键字。class 定义的类型不仅包含属性和方法的声明，还包含它们的实现。class 常用于封装一组相关的数据和方法，它可以用来创建对象。

class 的语法如下：

// javascriptcn.com 代码示例
class ClassName {
  property1: type1;
  property2: type2;

  constructor(arg1: argType1, arg2: argType2) {
    this.property1 = arg1;
    this.property2 = arg2;
  }

  method1(): returnType1 {
    // 方法实现
  }

  method2(arg1: argType1, arg2: argType2): returnType2 {
    // 方法实现
  }
}

其中，property1 和 property2 表示类中的属性，constructor 表示类的构造函数，method1 和 method2 表示类中的方法。argType1、argType2、returnType1 和 returnType2 分别为方法参数类型和返回值类型。

下面是一个 class 的示例代码：

// javascriptcn.com 代码示例
class Animal {
  name: string;

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  breed: string;

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

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Jack', 'Labrador');
dog.speak(); // 输出：Jack barks.

在上面的代码中，我们定义了一个 Animal 类，它包含 name 和 speak 方法两个属性。然后我们定义了一个 Dog 类，它继承了 Animal 类，并且添加了 breed 属性。最后我们创建了一个 dog 实例，并且调用了它的 speak 方法。

区别和联系

interface 和 class 在定义类型的方式和用法上有很大的区别。interface 只定义类型，不包含实现，而 class 包含类型和实现。interface 常用于定义函数、对象和类的类型，而 class 常用于封装一组相关的数据和方法。

interface 和 class 之间也有联系。interface 可以被 class 实现，这样 class 就可以拥有 interface 中定义的属性和方法。interface 也可以用来描述一个对象应该具有哪些属性以及这些属性的类型，而 class 则可以创建对象并且实现这些属性和方法。

总结

interface 和 class 是 TypeScript 中两个非常重要的概念，它们在定义类型的方式和用法上有很大的区别。interface 只定义类型，不包含实现，而 class 包含类型和实现。interface 常用于定义函数、对象和类的类型，而 class 常用于封装一组相关的数据和方法。interface 和 class 之间也有联系，interface 可以被 class 实现，这样 class 就可以拥有 interface 中定义的属性和方法。

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