Як клас реалізує інтерфейс?

TypeScriptJunior~2 хв читання

1. Як клас реалізує інтерфейс

Коли клас реалізує інтерфейс, він зобов'язується реалізувати всі властивості й методи, описані в цьому інтерфейсі. Для цього використовується ключове слово implements.

Приклад 1: проста реалізація інтерфейсу

javascript

interface IUser {
  name: string;
  age: number;
  greet(): void;
}

class User implements IUser {
  name: string;
  age: number;

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

  greet(): void {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const user = new User("Tim", 25);
user.greet(); // Hello, my name is Tim

Тут:

Інтерфейс IUser визначає контракт (що клас повинен мати name, age, greet()).
Клас User реалізує цей контракт за допомогою implements IUser.

Якщо клас пропустить хоч одну властивість або метод - буде помилка:

javascript

class BadUser implements IUser {
  name: string = "Alex";
  // Помилка: Property 'age' is missing in type 'BadUser'
}

2. Що робить ключове слово `implements`

Ключове слово implements:

змушує TypeScript перевірити відповідність структури класу інтерфейсу;
не впливає на runtime - лише на перевірку типів;
гарантує, що клас реалізує всі обов'язкові поля і методи інтерфейсу.

Важливо: TypeScript використовує структурну типізацію - тобто неважливо, як називається інтерфейс, головне, щоб форма збігалася.

Приклад 2: структурна перевірка

javascript

interface Logger {
  log(msg: string): void;
}

class ConsoleLogger implements Logger {
  log(msg: string) {
    console.log(msg);
  }
}

// Навіть якщо інтерфейс не пов'язаний явно:
const customLogger: Logger = new ConsoleLogger(); // Ок, структура збігається

3. Чи можна реалізувати кілька інтерфейсів?

Так! Клас може реалізовувати кілька інтерфейсів одночасно, вказавши їх через кому:

javascript

interface Printable {
  print(): void;
}

interface Serializable {
  serialize(): string;
}

class Document implements Printable, Serializable {
  print() {
    console.log("Printing document...");
  }

  serialize() {
    return JSON.stringify({ content: "..." });
  }
}

TypeScript перевірить, що Document реалізує всі методи обох інтерфейсів.

4. Інтерфейси можуть розширювати одне одного

Іноді зручно створювати інтерфейси, які успадковують одне одного:

javascript

interface Person {
  name: string;
}

interface Employee extends Person {
  position: string;
}

class Developer implements Employee {
  name: string;
  position: string;

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

Клас Developer реалізує Employee, а значить автоматично повинен містити все, що є і в Person, і в Employee.

5. Поєднання з абстрактними класами

Можна використовувати інтерфейси разом з абстрактними класами - інтерфейс задає форму, абстрактний клас - базову реалізацію:

javascript

interface Movable {
  move(distance: number): void;
}

abstract class Vehicle implements Movable {
  abstract move(distance: number): void;

  start() {
    console.log("Engine started");
  }
}

class Car extends Vehicle {
  move(distance: number): void {
    console.log(`Driving ${distance} km`);
  }
}

6. Інтерфейси і модифікатори доступу

Інтерфейси описують лише публічний інтерфейс класу. Вони не можуть вимагати private або protected членів:

javascript

interface IUser {
  name: string;
  getName(): string;
}

class User implements IUser {
  constructor(public name: string) {}
  getName() {
    return this.name;
  }

  private secret() {} // допустимо, але не частина інтерфейсу
}

Усе, що описано в інтерфейсі, стає частиною публічного API класу.

7. Інтерфейс для статичних членів класу

Інтерфейси не можуть напряму описувати статичні поля і методи. Але це можна зробити опосередковано, через тип конструктора:

javascript

interface IUserConstructor {
  new (name: string): IUserInstance;
}

interface IUserInstance {
  name: string;
  greet(): void;
}

function createUser(Ctor: IUserConstructor) {
  return new Ctor("Tim");
}

class User implements IUserInstance {
  constructor(public name: string) {}
  greet() {
    console.log(`Hi, ${this.name}`);
  }
}

createUser(User); // OK

Підсумок

Питання	Відповідь
Як клас реалізує інтерфейс?	Через ключове слово `implements`
Що робить `implements`?	Перевіряє, що клас відповідає структурі інтерфейсу
Чи можна реалізувати кілька інтерфейсів?	Так, через кому
Чи можна реалізувати не всі методи?	Ні, компілятор видасть помилку
Чи працює в runtime?	Ні, це лише перевірка типів
Чи можна комбінувати з наслідуванням (`extends`)?	Так - `class A extends B implements C, D`

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.