Frontend | Вопросы собесов on Telegram: “🤔 Чем тип отличается от интерфейса? 🚩Типы (Typ…”

🤔 Чем тип отличается от интерфейса?

🚩Типы (Type)

Типы в TypeScript используются для создания алиасов для различных типов данных. Они могут описывать примитивные типы, объединения, пересечения, массивы, объекты и функции. Типы предоставляют гибкость в описании более сложных структур данных.

type User = {
  name: string;
  age: number;
};

Типы могут комбинировать другие типы с использованием объединений (|) и пересечений (&):

type ID = string | number;

type Employee = {
  id: ID;
  department: string;
};

type Manager = User & Employee & {
  employees: User[];
};

🚩Интерфейсы (Interface)

Интерфейсы используются для описания структуры объектов. Они позволяют определять обязательные и необязательные свойства, а также методы объектов. Интерфейсы поддерживают наследование и могут быть расширены.

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

interface Employee extends User {
  department: string;
}

Интерфейсы могут расширять другие интерфейсы:

interface Manager extends Employee {
  employees: User[];
}

🚩Ключевые различия

🟠Расширение (extends) и пересечение (&)
Интерфейсы могут расширять другие интерфейсы с помощью ключевого слова extends. Типы могут использовать пересечения (&) для комбинирования других типов.
🟠Объединения (Union types)
Типы могут определять объединения (например, string | number), что позволяет описывать переменные, которые могут быть одного из нескольких типов. Интерфейсы не поддерживают объединения.
🟠Декларативное объединение
Интерфейсы могут быть объединены (merged) TypeScript'ом, если они объявлены несколько раз с одинаковым именем. Типы не поддерживают объединение, и объявление одного и того же типа несколько раз приведет к ошибке.
🟠Примитивы и другие типы
Типы могут представлять примитивные типы (например, string, number), а также сложные типы и функции. Интерфейсы могут описывать только структуры объектов.

🚩Примеры

Тип с объединением

type ID = string | number;

const userId: ID = 123;
const userName: ID = "abc";

Объединение интерфейсов

interface User {
  name: string;
}

interface User {
  age: number;
}

const user: User = {
  name: "John",
  age: 30
};

Расширение интерфейсов

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

interface Employee extends User {
  department: string;
}

const employee: Employee = {
  name: "Alice",
  age: 25,
  department: "HR"
};

Тип с пересечением

type User = {
  name: string;
  age: number;
};

type Employee = User & {
  department: string;
};

const employee: Employee = {
  name: "Bob",
  age: 35,
  department: "IT"
};

Ставь 👍 и забирай 📚 Базу знаний