> For the complete documentation index, see [llms.txt](https://koziuk-s.gitbook.io/angular-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://koziuk-s.gitbook.io/angular-starter/base-typescript/interfaces.md).

# Interfaces

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

{% code title="main.ts" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

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

{% code title="main.ts" overflow="wrap" lineNumbers="true" %}

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

let manager: UserManager;

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

{% endcode %}

**Readonly**

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

{% code title="main.ts" overflow="wrap" lineNumbers="true" %}

```typescript
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
```

{% endcode %}

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

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

{% code title="main.ts" overflow="wrap" lineNumbers="true" %}

```typescript
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
```

{% endcode %}

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

{% code title="main.ts" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

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

{% code title="main.ts" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

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

{% code title="main.ts" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

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

{% code title="main.ts" overflow="wrap" lineNumbers="true" %}

```typescript
interface Movable {
  speed: number;
}

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

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

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

{% endcode %}

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

{% code title="main.ts" overflow="wrap" lineNumbers="true" %}

```typescript
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
```

{% endcode %}

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

{% code title="main.ts" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}