TGViewer
Frontend Interview - собеседования по Javascript / Html / Css Frontend Interview - собеседования по Javascript / Html / Css @frontendinterview · 10.4K subscribers
Post #4664 1.6K
​Чем тип отличается от интерфейса?

Типы в TypeScript используются для создания алиасов для различных типов данных. Они могут описывать примитивные типы, объединения, пересечения, массивы, объекты и функции. Типы предоставляют гибкость в описании более сложных структур данных.
type User = {
name: string;
age: number;
};


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

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

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



Интерфейсы используются для описания структуры объектов. Они позволяют определять обязательные и необязательные свойства, а также методы объектов. Интерфейсы поддерживают наследование и могут быть расширены.
interface User {
name: string;
age: number;
}

interface Employee extends User {
department: string;
}


Интерфейсы могут расширять другие интерфейсы:
interface Manager extends Employee {
employees: User[];
}


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


Интерфейсы могут расширять другие интерфейсы с помощью ключевого слова extends. Типы могут использовать пересечения (&) для комбинирования других типов.

Типы могут определять объединения (например, 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"
};


👉 @frontendInterview
  • 👍 5
  • 🤔 5
  • ❤ 1
More from @frontendinterview
  1. Oct 14, 2026✨ Скроллбар, который следит за прокруткой без JavaScript Свой скроллбар обычно рисуют так:…
  2. Oct 14, 2026Атмосфера HolyJS: ради чего стоит приехать на площадку 23–24 октября в Санкт Петербурге и…
  3. Oct 12, 2026✨ CSS может заметить, что элементы вот-вот столкнутся Сбоку от секции с карточками висит д…
  4. Oct 9, 20265 офферов получили наши ребята на прошлой неделе Оффер на 4,2k долларов Оффер на 5k евро О…
  5. Oct 9, 2026🧮 Поле ввода, в которое можно вписать формулу Часто число для формы сначала надо посчитат…
  6. Oct 7, 2026🎨 Текст, который сам подбирает цвет под фон Если фон карточки задаётся фирменным цветом и…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →