Interfaces

Інтерфейс визначає властивості й методи, які об'єкт повинен реалізувати.

main.ts

interface User {
  id: number;
  name: string;
};

// Використання інтерфейсу
let employee: User;

employee = {
  id: 1,
  name: 'Tom'
};

function getEmployeeInfo(user: User): void {
  console.log(`id: ${user.id}, name: ${user.name}`);
}

function buildUser(userId: number, userName: string): User {
  return { 
    id: userId,
    name: userName
  };
}

При визначенні інтерфейсу ми можемо встановлювати деякі властивості як необов'язкові (optional). Не обов'язкові поля позначаються знаком питання ? після назви поля.

main.ts

interface UserManager {
  id: number;
  name: string;
  age?: number;
}

let manager: UserManager;

manager = {
  id: 2,
  name: 'Tom'
};

Readonly

Також інтерфейс може містити властивості тільки для читання, значення яких не можна змінювати.

main.ts

interface Point {
  readonly x: number;
  readonly y: number;
}

let point: Point;

point = {
  x: 10,
  y: 20
};

console.log(point);
point.x = 5;
// ERROR: Cannot assign to 'x' because it is a constant or a read-only property

Визначення методів.

Крім властивостей інтерфейси можуть визначати функції.

main.ts

interface User {
  id: number;
  name: string;
  getFullName(surName: string): string;
}

let employee: User;

employee = {
  id: 1,
  name: 'Alice',
  getFullName: function (surName: string): string {
    return this.name + ' ' + surName;
  }
};

let fullName = employee.getFullName('Tompson');  // Alice Tompson

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

main.ts

interface AnimalData {
  canEat: boolean;
  name: string;
}

class Animal implements AnimalData {
  canEat: boolean;
  name: string;
  age: number;

  constructor(animalName: string, animalAge: number, canEat: boolean = true) {
    this.canEat = canEat;
    this.name = animalName;
    this.age = animalAge;
  }
}

let cat = new Animal('Tom', 23);

Class також є типом даних.

main.ts

class Bird {
  name: string;
  canFly: boolean;

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

let kiwi: Bird;

kiwi = new Bird('kiwi', false);

// або ми можемо переписати клас Bird коротше
class BirdShort {
  constructor(
    public name: string,
    public canFly: boolean
  ) { }
}

let eagle: BirdShort;

eagle = new BirdShort('eagle', true);

Tакож клас може виступати інтерфейсом для іншого класу.

main.ts

class BirdSwim implements Bird {
  constructor(
    public name: string,
    public canFly: boolean,
    public swim: boolean = true,
  ) { }
}

Інтерфейси, як і класи, можуть наслідуватися один від одного, що дозволяє створювати більш складні структури даних.

main.ts

interface Movable {
  speed: number;
}

interface Car extends Movable {
  move(): void;
}

class Car implements Car {
  constructor(public speed: number) {
  }

  move(): void {
    console.log('машина рухається зі швидкість ' + this.speed + ' км/год');
  }
}

Інтерфейси функцій.

main.ts

interface NameBuilder {
  (name: string): string;
}

let simpleBuilder: NameBuilder;

simpleBuilder = function (name: string): string {
  return 'Mr. ' + name;
}

let nameBuilder = simpleBuilder;

console.log(nameBuilder("Bob")); // Mr. Bob

Інтерфейси масивів.

main.ts

interface StringArray {
  [index: number]: string;
}

let phones: StringArray;

phones = ['iPhone 7', 'HTC 10', 'HP Elite x3'];

let myPhone: string;

myPhone = phones[0];
console.log(myPhone);