TypeScript Vocabulary: 30 Terms Every TypeScript Developer Needs (англійською)

TypeScript став типовим вибором для серйозних проектів JavaScript — але його термінологія може здатися вам приголомшливою, коли ви навчаєтеся на роботі. Зрозуміти точне значення таких слів, як * розрізнений союз *, * відображений тип *, або * типове звужування * робить перегляд коду набагато менш заляканим і парне програмування набагато продуктивнішим. Цей посібник містить 30 основних термінів TypeScript з визначеннями простою англійською мовою і реалістичними прикладами для розробників.

---

Основні типи декларацій

тип проти інтерфейсу

Type alias (заявлений з type ) називає будь-який вираз типу TypeScript — примітиви, об’єднання, перетинки, кортежі і об’єкти. ** інтерфейс ** оголошує форму об’ єкта і підтримує об’ єднання оголошень.

Чи варто мені використовувати type або interface тут?» “Використовуйте interface, коли ви описуєте форму об’єкта, який інший код може розширити. Використовуйте псевдонім type для об’єднань, перетинів або будь-чого, що не є чисто об’єктом»

Практичною правилом, яким слідує більшість команд, є: interface для публічних API поверхней; використовуйте type для всього іншого.

Тип союзу

Union type говорить, що значення може бути одним з декількох типів, відокремлених |.

Поле id є об’єднанням string | number — воно приймає обидва

Тип перетину

Тип перетину поєднує декілька типів в один, використовуючи &. Результуючий тип має задовольняти * всім * комбінованим формам.

«Ми створили перетин типу AdminUser & AuditLog, тому об’єкт має як поля користувача, так і поля аудиту»

Generics

** Загальне** надає вам змогу писати компоненти, які можна використовувати знову і знову, які працюють з різними типами без втрати інформації про тип. Ви декларуєте параметр type (зазвичай T ), який діє як замінник.

Функція fetchData<T> є загальною — передайте форму відповіді як T і ви отримаєте повне автозавершення на результаті

---

Введіть значення для Звужування і Охорони

Введіть Звужування

** Сужування типу ** — це процес, за допомогою якого TypeScript перетворює широкий тип на більш специфічний тип у умовному блоку. TypeScript розуміє typeof, instanceof, in, і перевірки рівності.

Після перевірки if (typeof value === 'string'), TypeScript сужає value з string | number до string — так що метод string стає доступним

Тип охорони

Type guard є функцією, тип повернення якої є type predicate ( value is SomeType ). Виклик цього параметра у умовному блоку сужає тип для TypeScript.

«Ми написали isApiError(e): e is ApiError guard, щоб блок catch знав точну форму помилки»

Дискримінація

Дискримінований союз є союзом типів, які всі мають спільну літеральну властивість (дискримінант). TypeScript використовує цю властивість для суження до правильного варіанту в switch.

«Кожна дія в нашому магазині Redux має літеральне type — це дискримінант. Перемикання на action.type дає повне звужування для кожного випадку»

Тип твердження

Type assertion ( value as SomeType ) вказує компілятору розглядати значення як певний тип без перевірки під час виконання. Це ваша гарантія, а не відливка — це може бути неправильно.

«Ми використовували as HTMLInputElement, щоб сказати TypeScript, що елемент безумовно має властивість value. Але будьте обережні — якщо ви помиляєтеся, ви отримуєте помилку виконання.»

---

Розширені типові конструкції

Відображений тип

** Відображений тип ** створює новий тип за допомогою ітерації над ключами існуючого типу і перетворення кожної властивості. Синтаксис { [K in keyof T]: ... } є шаблоном підпису.

«Ми побудували Nullable<T> відображений тип, який робить кожну властивість T[K] | null — одне визначення, працює для будь-якого типу об’єкта»

Тип умови

Умовно-типовий використовує синтаксис T extends U ? X : Y — якщо T можна приписати до U, то тип розв’язується до X; інакше до Y. Вони корисні для визначення типів у загальних інструментах.

«Вбудований NonNullable<T> є умовним типом — він вилучає null і undefined з T.»

Шаблон літературного типу

** шаблон літерального типу ** створює літеральні типи рядків за допомогою синтаксису шаблону prefix_ ${T} . За допомогою цього пункту ви можете описати шаблони, такі як назви подій або назви властивостей CSS на рівні типів.

«Ми використовували шаблон літералу типу on${Capitalize<EventName>} для автоматичного отримання назв обробників з назв подій.»

Об’ єднання декларацій

** Об’ єднання декларацій ** означає, що TypeScript об’ єднує декілька декларацій interface з однією назвою в одну. Ось як бібліотеки дозволяють вам * збільшувати * їхні типи.

«Ми злилися в інтерфейс Express Request, щоб додати нашу властивість user — це злиття декларацій»

Модуль збільшення

** Розширення модуля ** — це спосіб розширення типів з зовнішнього модуля без зміни його коду. Ви знову відкриваєте модуль за допомогою declare module 'module-name' і додаєте його до типів.

«Щоб додати наші нетипові поля до express-session, ми використовували модульне розширення, тому TypeScript знає про req.session.userId»

---

Типи утиліт

TypeScript містить бібліотеку утилитарних типів — загальних помічників для звичайних перетворень типів.

Partial

Partial<T> робить кожну властивість T необмеженою. Корисно для оновлення вантажів.

«Кінечна точка PATCH приймає Partial<User> — вам потрібно тільки відправити поля, які ви змінюєте»

Required

Required<T> робить кожну властивість T обов’язковою, вилучаючи додаткові модифікатори.

Pick

Pick<T, K> створює тип, що містить тільки вказані ключі K з T.

«Ми Pick -ed тільки id і name з повного User типу для спадного списку.»

Omit

Omit<T, K> створює тип зі всіма ключами T за винятком тих, що в K.

«CreateUserDTO є Omit<User, 'id' | 'createdAt'> — ми знищуємо поля, створені сервером»

Record

Record<K, V> побудовує тип з ключами K і значеннями V. Загальне для словників і карт пошуку.

«Record<string, number> є чистим способом введення карти результатів.»

Readonly

Readonly<T> робить всі властивості T доступними тільки для читання — TypeScript буде відображати помилку, якщо ви спробуєте їх перепризначити.

Витягнути і виключити

Extract<T, U> зберігає тільки члени об’єднання T, які можна приписати до U. Exclude<T, U> видаляє їх.

Ми використовували Exclude<Status, 'deleted'>, щоб отримати об’єднання всіх станів, крім 'deleted' — корисно для публічного API

---

Строго режим і налаштування

Суворий режим

Увімкнення "strict": true в tsconfig.json вмикає групу суворіших перевірок: strictNullChecks, noImplicitAny, strictFunctionTypes, та інші. Більшість команд вмикають його з самого початку.

«Ми ввімкнулися в строгий режим і мусили виправити близько 200 неявних any помилок — варто цього для довгострокової безпеки»

strictNullChecks

При ввімкненому strictNullChecks, null і undefined не можуть бути присвоєні іншим типам, якщо вони не були явно оголошені. Це запобігає цілому класу помилок під час виконання.

«До того, як strictNullChecks був включений, user.name міг безшумно бути undefined під час виконання. Тепер TypeScript змушує нас справлятися з цим»

noImplicitAny

З noImplicitAny, TypeScript помиляє, якщо не може вивести тип і в іншому випадку повернеться до any. Це змушує явні анотації на параметрах і змінних.

---

Фрази Common TypeScript

Phrase	Meaning
”This widens to any”	TypeScript loses type information here
”We need to narrow this”	Add a type guard or conditional to refine the type
”The types don’t align”	Two types are incompatible — assignability fails
”Let’s make this generic”	Replace a hard-coded type with a type parameter
”That’s an unsafe assertion”	as SomeType bypasses the compiler — risky
”The utility type handles this”	Use Partial, Pick, etc. rather than rewriting manually
”It’s structural, not nominal”	TypeScript checks shape, not class identity