Як оголосити generic-тип через type?

TypeScriptJunior~1 хв читання

У TypeScript можна оголошувати generic-типи не лише у функціях і класах, а й через ключове слово type. Це особливо корисно для універсальних структур, утилітних типів і обгорток над іншими типами.

Базовий синтаксис

javascript

type TypeName<T> = ...;

T - параметр типу (generic).
Усередині визначення ти можеш використовувати T як звичайний тип.

Приклад 1: обгортка над типом

javascript

type Box<T> = {
  value: T;
};

const stringBox: Box<string> = { value: "Hello" };
const numberBox: Box<number> = { value: 42 };

Box<T> - це узагальнений тип, який можна використовувати з будь-яким типом даних.

Приклад 2: масив визначеного типу

javascript

type ArrayOf<T> = T[];

const strings: ArrayOf<string> = ["a", "b"];
const numbers: ArrayOf<number> = [1, 2, 3];

Тут ArrayOf<T> еквівалентний T[], але його можна розширити за потреби (наприклад, додати метадані).

Приклад 3: умовний тип усередині generic

javascript

type Nullable<T> = T | null | undefined;

const name: Nullable<string> = null;
const age: Nullable<number> = 30;

Часто використовується для опису необов'язкових або nullable-полів.

Приклад 4: тип з обмеженням (`extends`)

javascript

type HasId<T extends { id: string }> = T & { createdAt: Date };

const user: HasId<{ id: string; name: string }> = {
  id: "u1",
  name: "Tim",
  createdAt: new Date(),
};

T extends { id: string } - constraint (обмеження): лише типи, у яких є id.

Приклад 5: декілька generic-параметрів

javascript

type Pair<T, U> = [T, U];

const p1: Pair<string, number> = ["age", 25];
const p2: Pair<boolean, string> = [true, "done"];

Приклад 6: залежність між параметрами

javascript

type PropertyType<T, K extends keyof T> = T[K];

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

type UserId = PropertyType<User, "id">;   // number
type UserName = PropertyType<User, "name">; // string

Приклад 7: generic utility-type

javascript

type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

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

type OptionalName = WithOptional<User, "name">;
// { id: number; age: number; name?: string }

Приклад 8: значення за умовчанням для generic

javascript

type Response<T = string> = {
  data: T;
  success: boolean;
};

const r1: Response = { data: "ok", success: true };     // T = string
const r2: Response<number> = { data: 200, success: true }; // T = number

Підсумок

Можливість	Приклад
Один параметр	`type Box<T> = { value: T }`
Декілька параметрів	`type Pair<T, U> = [T, U]`
Обмеження типу	`type HasId<T extends { id: string }>`
Залежні параметри	`type Prop<T, K extends keyof T> = T[K]`
Значення за умовчанням	`type Response<T = string>`
Умовний generic	`type Nullable = T

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.