在 TypeScript 中实现接口的类

作者

在 TypeScript 中实现接口的类

Class implementing Interfaces in TypeScript

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

索引.ts
interface Employee {
  id: number;
  name: string;
  tasks: string[];

  doWork(): void;
}

class Developer implements Employee {
  constructor(
    public id: number, public name: string, public tasks: string[]
   ) {
    this.id = id;
    this.name = name;
    this.tasks = tasks;
  }

  doWork() {
    console.log(`${this.name} writes code`);
  }
}

const dev = new Developer(1, 'Tom', ['develop', 'test', 'ship']);

console.log(dev.name); // 👉️ "Tom"

implements子句允许我们

检查类是否满足特定
接口。

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

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

索引.ts
interface Employee {
  id: number;
  name: string;
  tasks: string[];

  address: {
    country: string;
    city: string;
  };

  doWork(): void;
}

class Developer implements Employee {
  tasks: string[] = ['develop', 'test'];

  address: { country: string; city: string } = {
    country: 'Austria',
    city: 'Linz',
  };

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

  doWork() {
    console.log(`${this.name} writes code`);
  }
}

const dev = new Developer(1, 'Tom');

console.log(dev.name); // 👉️ "Tom"

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

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

索引.ts
interface Employee {
  id: number;
  salary: number;
}

interface Person {
  name: string;
}

class Developer implements Employee, Person {
  constructor(
    public id: number, public name: string, public salary: number
  ) {
    this.id = id;
    this.name = name;
    this.salary = salary;
  }
}

const dev = new Developer(1, 'Tom', 100);

console.log(dev.name); // 👉️ "Tom"

该类Developer实现Employee和Person接口。

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

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

索引.ts
interface Employee {
  id: number;
  salary: number;
}

// ⛔️ Class 'Developer' incorrectly implements interface 'Employee'.
  // Property 'salary' is missing in type 'Developer'
  // but required in type 'Employee'.ts(2420)
class Developer implements Employee {
  constructor(public id: number) {
    this.id = id;
  }
}

该类Developer实现Employee接口，但未定义必需的salary属性，因此会发出错误。

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

索引.ts
interface Employee {
  id: number;
  salary?: number; // 👈️ optional property (can be undefined)
}

class Developer implements Employee {
  constructor(public id: number) {
    this.id = id;
  }
}

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

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

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

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

索引.ts
interface Employee {
  multiply(a: number, b: number): number;
}

class Developer implements Employee {
  // ⛔️ Error: Parameter 'a' implicitly has an 'any' type.ts(7006)
  multiply(a, b) {
    return a * b;
  }
}

即使类实现了为函数Employee定义类型的接口，类中的方法也不会自动进行类型化。multiplymultiply

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

索引.ts
interface Employee {
  id: number;
  name?: string; // 👈️ optional property
}

class Developer implements Employee {
  constructor(public id: number) {
    this.id = id;
  }
}

const dev = new Developer(1);

// ⛔️ Error: Property 'name' does not exist on type 'Developer'.ts(2339)
console.log(dev.name);

如果您实现一个带有
可选属性的接口，它不会在类中自动创建。


我们在界面中使用问号将name属性设置为可选。Employee

这意味着它可以是一个string或具有一个值undefined。

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

–

发表评论