TGViewer
Вёрстка сайтов | HTML, CSS, JS Вёрстка сайтов | HTML, CSS, JS @free_html_lessons · 4.5K subscribers
Post #2769 564
Что такое type и зачем он нужен

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

Начнём с самого базового примера:

name: string
isAdmin: boolean
}


Теперь этот тип можно использовать в любом месте кода:
```const user: User = {
name: 'Tigran',
isAdmin: false
}

По сути, type работает похоже на interface, когда речь идёт об объектах.
Но у type есть возможности, которых нет у interface.
1. Можно создавать объединения типов (union types)

type Status = 'loading' | 'success' | 'error'

Теперь переменная может принимать только одно из этих значений:

let status: Status

status = 'loading' // OK
status = 'done' // Ошибка

Это очень удобно для состояний, ролей, типов уведомлений и других фиксированных значений.
2. Можно объединять типы

type User = {
name: string
}

type Admin = {
permissions: string[]
}

type AdminUser = User & Admin

Здесь используется оператор & — он объединяет типы.

const admin: AdminUser = {
name: 'Tigran',
permissions: ['read', 'write']
}

3. Можно описывать примитивные типы

type ID = string | number

Теперь ID может быть строкой или числом:

let userId: ID

userId = 123
userId = 'abc-123'

4. Можно описывать функции

type Calculate = (a: number, b: number) => number

И использовать:

const sum: Calculate = (a, b) => {
return a + b
}

Когда использовать type:
• когда нужны union или intersection типы
• когда нужно дать имя примитивному типу
• когда описываешь сложные типы данных
• когда работаешь с утилитами типов (Partial, Pick, Omit и т.д.)

Важно понимать:
как и interface, type существует только во время разработки.
В итоговый JavaScript он не попадает.

Частый вопрос:
в чём разница между type и interface?

Коротко:
• interface лучше подходит для описания объектов и их расширения
• type более гибкий и подходит для сложных типов

На практике в большинстве проектов используют оба.

Для закрепления:
попробуй описать тип Theme, который может принимать только значения 'light' или 'dark'.

#ts
  • 👍 4
  • ❤ 2
  • 👏 1
More from @free_html_lessons
  1. Sep 29, 2026Задача: Быстрая пятёрка Брайан, Миа, Хан, Жизель и Доминик участвуют в уличной гонке. Прав…
  2. Sep 28, 2026Post #3065
  3. Sep 28, 2026Применение редких html атрибутов на практике. 1 часть Читать 👨‍💻 #полезнаястатья
  4. Sep 27, 2026Подборка лучших постов за прошлую неделю Лучшие статьи @free_html_lessons: 1. Функции в Ty…
  5. Sep 26, 2026Задача: Шифр подстановки Современные методы шифрования надёжно защищают наши коммуникации…
  6. Sep 25, 2026Макет для тренировки (rectop) Перейти к макету 🧑‍💻 #макет@free_html_lessons
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 →