首页 > 网络编程 > JavaScript > 如何在TypeScript 中实现接口的类

如何在TypeScript 中实现接口的类

福牛 3月 27, 2023 27 0

使用 implements 子句在类中实现接口，例如 class Developer implements Employee {}。 implements 子句通过定义类的所有属性和方法来检查类是否满足接口。

  1. interface Employee {
  2.      id: number;
  3.      name: string;
  4.      tasks: string[];
  5.  
  6.      doWork(): void;
  7. }
  8.  
  9. class Developer implements Employee {
  10.      constructor(
  11.      public id: number, public name: string, public tasks: string[]
  12.      ) {
  13.      this.id = id;
  14.      this.name = name;
  15.      this.tasks = tasks;
  16.      }
  17.  
  18.      doWork() {
  19.      console.log(`${this.name} writes code`);
  20.      }
  21. }
  22.  
  23. const dev = new Developer(1, ‘Tom’, [‘develop’, ‘test’, ‘ship’]);
  24.  
  25. console.log(dev.name); // ️ “Tom”

-1

我们也可以点击上面的运行示例来查看结果。

implements 子句允许我们检查一个类是否满足特定的接口。

如果类未能正确实现接口，则会发出错误。

如果我们的类不希望在初始化时将特定值作为参数，请使用类属性。

  1. interface Employee {
  2.      id: number;
  3.      name: string;
  4.      tasks: string[];
  5.  
  6.      address: {
  7.      country: string;
  8.      city: string;
  9.      };
  10.  
  11.      doWork(): void;
  12. }
  13.  
  14. class Developer implements Employee {
  15.      tasks: string[] = [‘develop’, ‘test’];
  16.  
  17.      address: { country: string; city: string } = {
  18.      country: ‘Austria’,
  19.      city: ‘Linz’,
  20.      };
  21.  
  22.      constructor(public id: number, public name: string) {
  23.      this.id = id;
  24.      this.name = name;
  25.      }
  26.  
  27.      doWork() {
  28.      console.log(`${this.name} writes code`);
  29.      }
  30. }
  31.  
  32. const dev = new Developer(1, ‘Tom’);
  33.  
  34. console.log(dev.name); // ️ “Tom”
  35.  

上面的示例直接设置类属性，并在构造函数方法中接受参数。

我们可以使用这种方法来实现多个接口。

  1. interface Employee {
  2.      id: number;
  3.      salary: number;
  4. }
  5.  
  6. interface Person {
  7.      name: string;
  8. }
  9.  
  10. class Developer implements Employee, Person {
  11.      constructor(
  12.      public id: number, public name: string, public salary: number
  13.      ) {
  14.      this.id = id;
  15.      this.name = name;
  16.      this.salary = salary;
  17.      }
  18. }
  19.  
  20. const dev = new Developer(1, ‘Tom’, 100);
  21.  
  22. console.log(dev.name); // ️ “Tom”

Developer 类实现了 Employee 和 Person 接口。

一个类可以根据需要实现尽可能多的接口。

实现接口时，我们必须确保在类上设置所有必要的属性和方法。

  1. interface Employee {
  2.      id: number;
  3.      salary: number;
  4. }
  5.  
  6. // ⛔️ Class ‘Developer’ incorrectly implements interface ‘Employee’.
  7.      // Property ‘salary’ is missing in type ‘Developer’
  8.      // but required in type ‘Employee’.ts(2420)
  9. class Developer implements Employee {
  10.      constructor(public id: number) {
  11.      this.id = id;
  12.      }
  13. }

-2

Developer 类实现了 Employee 接口，但没有定义所需的薪水属性，因此会发出错误。

我们要么必须将 salary 属性添加到 Developer 类，要么在接口中将其标记为可选。

  1. interface Employee {
  2.      id: number;
  3.      salary?: number; // ️ optional property (can be undefined)
  4. }
  5.  
  6. class Developer implements Employee {
  7.      constructor(public id: number) {
  8.      this.id = id;
  9.      }
  10. }

salary 属性被标记为可选，因此类不必定义它。

implements 子句所做的就是 – 它检查类是否满足特定接口，因此我们必须确保定义所有必需的属性和方法。

implements 子句的目的只是检查类是否可以被视为接口类型。

implements 子句不会更改类或其方法的类型。

  1. interface Employee {
  2.      multiply(a: number, b: number): number;
  3. }
  4.  
  5. class Developer implements Employee {
  6.      // ⛔️ Error: Parameter ‘a’ implicitly has an ‘any’ type.ts(7006)
  7.      multiply(a, b) {
  8.      return a * b;
  9.      }
  10. }

-3

尽管该类实现了为 multiply 函数定义类型的 Employee 接口，但该类中的 multiply 方法不会自动被类型化。

这是因为 implements 子句不会改变类的类型。

  1. interface Employee {
  2.      id: number;
  3.      name?: string; // ️ optional property
  4. }
  5.  
  6. class Developer implements Employee {
  7.      constructor(public id: number) {
  8.      this.id = id;
  9.      }
  10. }
  11.  
  12. const dev = new Developer(1);
  13.  
  14. // ⛔️ Error: Property ‘name’ does not exist on type ‘Developer’.ts(2339)
  15. console.log(dev.name);

-4

如果我们使用可选属性实现接口，则不会在类中自动创建它。

我们使用问号将 Employee 接口中的 name 属性设置为可选。

这意味着它可以是字符串或具有未定义的值。

Developer 类正确实现了 Employee 接口，因为 name 属性不是必需的，但是该属性不会自动分配给该类。

到此这篇关于TypeScript 中实现接口的类的文章就介绍到这了,更多相关TypeScript 接口的类内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

标签

相关推荐

发表评论