怎么在TypeScript中實(shí)現(xiàn)接口的類

這篇文章主要介紹“怎么在TypeScript中實(shí)現(xiàn)接口的類”，在日常操作中，相信很多人在怎么在TypeScript中實(shí)現(xiàn)接口的類問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么在TypeScript中實(shí)現(xiàn)接口的類”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

使用 implements 子句在類中實(shí)現(xiàn)接口，例如 class Developer implements Employee {}。 implements 子句通過(guò)定義類的所有屬性和方法來(lái)檢查類是否滿足接口。

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"

我們也可以點(diǎn)擊上面的運(yùn)行示例來(lái)查看結(jié)果。

implements 子句允許我們檢查一個(gè)類是否滿足特定的接口。

如果類未能正確實(shí)現(xiàn)接口，則會(huì)發(fā)出錯(cuò)誤。

如果我們的類不希望在初始化時(shí)將特定值作為參數(shù)，請(qǐng)使用類屬性。

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"

上面的示例直接設(shè)置類屬性，并在構(gòu)造函數(shù)方法中接受參數(shù)。

我們可以使用這種方法來(lái)實(shí)現(xiàn)多個(gè)接口。

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 類實(shí)現(xiàn)了 Employee 和 Person 接口。

一個(gè)類可以根據(jù)需要實(shí)現(xiàn)盡可能多的接口。

實(shí)現(xiàn)接口時(shí)，我們必須確保在類上設(shè)置所有必要的屬性和方法。

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 類實(shí)現(xiàn)了 Employee 接口，但沒(méi)有定義所需的薪水屬性，因此會(huì)發(fā)出錯(cuò)誤。

我們要么必須將 salary 屬性添加到 Developer 類，要么在接口中將其標(biāo)記為可選。

interface Employee {
  id: number;
  salary?: number; // ????? optional property (can be undefined)
}

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

salary 屬性被標(biāo)記為可選，因此類不必定義它。

implements 子句所做的就是 - 它檢查類是否滿足特定接口，因此我們必須確保定義所有必需的屬性和方法。

implements 子句的目的只是檢查類是否可以被視為接口類型。

implements 子句不會(huì)更改類或其方法的類型。

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;
  }
}

盡管該類實(shí)現(xiàn)了為 multiply 函數(shù)定義類型的 Employee 接口，但該類中的 multiply 方法不會(huì)自動(dòng)被類型化。

這是因?yàn)?implements 子句不會(huì)改變類的類型。

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);

如果我們使用可選屬性實(shí)現(xiàn)接口，則不會(huì)在類中自動(dòng)創(chuàng)建它。

我們使用問(wèn)號(hào)將 Employee 接口中的 name 屬性設(shè)置為可選。

這意味著它可以是字符串或具有未定義的值。

Developer 類正確實(shí)現(xiàn)了 Employee 接口，因?yàn)?name 屬性不是必需的，但是該屬性不會(huì)自動(dòng)分配給該類。

到此，關(guān)于“怎么在TypeScript中實(shí)現(xiàn)接口的類”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！