Ласкаво просимо до епічної подорожі освоєння TypeScript! Незалежно від того, чи ви початківець, який лише занурюється в мову, чи досвідчений розробник, що прагне підняти свої навички на новий рівень, цей блог допоможе вам загострити ваші навички TypeScript, розбиваючи складні типи, як босів у відеоіграх. Надихнувшись чудовою доповіддю Дарії Каравей на JSConf 2024 у Будапешті, ми передаємо вам її найкращі ідеї та приклади, щоб підняти ваш TypeScript-геймінг. Готові? Поїхали! ✨
Рівень 1: Об'єднання та умовні типи
Наш перший бос знайомить нас з Union Types (Типи об'єднання) та Generics (Універсальні типи). Це основні концепції, які роблять TypeScript таким потужним.
Типи об'єднання (Union Types)
Типи об'єднання дозволяють вказати, що значення може бути одним з кількох типів:
type UnionType = null | undefined | false | 0 | "";
Це означає, що значення може бути null, undefined, false, 0 або порожнім рядком — все це вважається хибним значенням у JavaScript.
Універсальні типи (Generics)
Універсальні типи дозволяють визначити тип як заповнювач, який ви можете використовувати пізніше:
type GenericType = T | Array;
Наприклад:
type StringOrStringArray = GenericType;
// Це еквівалентно: string | string[]
Умовні типи (Conditional Types)
Умовні типи працюють як оператор if для типів:
type IsTruthy = T extends null | undefined | false | 0 | "" ? false : true;
Ось як це працює на практиці:
type NotTruthy = IsTruthy; // false
type PassesTruthy = IsTruthy; // true
Це дозволяє створювати типи, які оцінюють, чи є значення істинним чи ні.
Рівень 2: Утилітні типи та оператор keyof
Бос другого рівня знайомить нас з утилітними типами, такими як Omit, та оператором keyof. Давайте розберемо це крок за кроком.
Оператор keyof
Оператор keyof витягує всі ключі з типу як об'єднання рядкових літералів:
type ExampleObjectType = {
a: string;
b: number;
c: string[];
};
type Keys = keyof ExampleObjectType; // "a" | "b" | "c"
Утиліта Exclude
Exclude видаляє певні елементи з об'єднання:
type ExcludeKey = "b";
type KeysToInclude = Exclude<"a" | "b" | "c", ExcludeKey>;
// "a" | "c"
Утиліта Pick
Pick створює новий тип, що містить лише вказані ключі:
type PickedObject = Pick;
// {
// a: string;
// c: string[];
// }
Комбінування: Omit
Omit видаляє певні ключі з типу, поєднуючи Pick і Exclude:
type Omit = Pick>;
type ObjectWithoutB = Omit;
// {
// a: string;
// c: string[];
// }
Поєднуючи Pick і Exclude, ви можете створювати чисті та багаторазові утилітні типи для будь-якого сценарію.
Висновки
Ми піднялися на рівень, освоївши основи Типів об'єднання (Union Types), Універсальних типів (Generics) і Умовних типів (Conditional Types), і перемогли боса другого рівня, освоївши оператор keyof та утилітні типи, такі як Omit. З цими інструментами ви зможете писати більш елегантний, структурований і потужний код на TypeScript.
TypeScript — це як відеогра: кожна нова функція, яку ви вивчаєте, відкриває більше можливостей та універсальності. Продовжуйте практикувати, експериментуйте з цими прикладами, і скоро ви станете героєм вашої подорожі TypeScript.
Щасливого кодування! 🎮
Перекладено з: Level Up Your TypeScript Skills 🎮