TypeScript Основні дженерики (універсали)
Дженерики (універсали) дозволяють створювати 'змінні типу', які можна використовувати для створення класів, функцій і псевдонімів типів, яким не потрібно явно визначати типи, які вони використовують.
Універсальні коди спрощують написання багаторазового коду.
Функції
Універсальні засоби з функціями допомагають створювати більш узагальнені методи, які точніше представляють типи, що використовуються та повертаються.
Приклад
function createPair<S, T>(v1: S, v2: T): [S, T] {
return [v1, v2];
}
console.log(createPair<string, number>('hello', 42)); // ['hello', 42]
Спробуйте самі »
TypeScript також може визначити тип загального параметра з параметрів функції.
Класи
Дженеріки можна використовувати для створення узагальнених класів, наприклад JS Карти.
Приклад
class NamedValue<T> {
private _value: T | undefined;
constructor(private name: string) {}
public setValue(value: T) {
this._value = value;
}
public getValue(): T | undefined {
return this._value;
}
public toString(): string {
return `${this.name}: ${this._value}`;
}
}
let value = new NamedValue<number>('myNumber');
value.setValue(10);
console.log(value.toString()); // myNumber: 10
Спробуйте самі »
TypeScript також може визначити тип загального параметра, якщо він використовується в параметрі конструктора.
Введіть псевдоніми
Узагальнення в псевдонімах типів дозволяють створювати типи, які можна використовувати повторно.
Приклад
type Wrapped<T> = { value: T };
const wrappedValue: Wrapped<number> = { value: 10 };
Це також працює з інтерфейсами з таким синтаксисом: interface Wrapped<T> {
Значення за замовчуванням
Дженерикам можна призначити значення за замовчуванням, які застосовуються, якщо інше значення не вказано чи виведено.
Приклад
class NamedValue<T = string> {
private _value: T | undefined;
constructor(private name: string) {}
public setValue(value: T) {
this._value = value;
}
public getValue(): T | undefined {
return this._value;
}
public toString(): string {
return `${this.name}: ${this._value}`;
}
}
let value = new NamedValue('myNumber');
value.setValue('myValue');
console.log(value.toString()); // myNumber: myValue
Розширення
До дженериків можна додати обмеження, щоб обмежити те, що дозволено. Обмеження дають змогу покладатися на більш конкретний тип при використанні загального типу.
Приклад
function createLoggedPair<S extends string | number, T extends string | number>(v1: S, v2: T): [S, T] {
console.log(`creating pair: v1='${v1}', v2='${v2}'`);
return [v1, v2];
}
Це можна поєднати зі значенням за замовчуванням.
TypeScript Вправи
Що таке дженерики простою мовою?
Уявіть дженерики як універсальні контейнери, які можна використовувати для зберігання даних будь-якого типу.
Наприклад, уявіть, що у вас є коробка для зберігання яблук. Ця коробка може містити лише яблука. А що, якщо вам потрібна коробка, яка може містити не лише яблука, а й інші фрукти, наприклад банани чи апельсини? Ось тут і з’являються дженерики.
Дженерики в TypeScript дозволяють створювати типи, які можуть працювати з даними будь-якого типу.
Наприклад, ви можете створити функцію, яка може сортувати будь-який масив, незалежно від того, чи містить він числа, рядки чи інші типи даних.
Ось приклад дженерика:
function sort<T>(array: T[]): T[] {
// ... код сортування ...
return array;
}
У цьому прикладі sort - це дженерична функція, яка приймає масив array будь-якого типу T і повертає відсортований масив того ж типу.
Ось ще кілька прикладів дженериків:
Array<T>- тип, який представляє масив даних типу T.Map<K, V>- тип, який представляє словник, де ключі мають тип K, а значення - тип V.Promise<T>- тип, який представляє обіцянку, яка буде вирішена значенням типу T.
Висновок
Дженерики роблять код TypeScript більш гнучким і багаторазовим. Завдяки дженерикам вам не потрібно писати окремий код для роботи з різними типами даних.
Якщо ви тільки починаєте вивчати TypeScript, не хвилюйтесь, якщо дженерики здаються вам складними. З часом і практикою ви краще зрозумієте, як вони працюють, і зможете використовувати їх у своєму коді.
Докладніше із дженериками ви можете ознайомитись на офіційному сайті TypeScript за посиланням: https://www.typescriptlang.org/docs/handbook/2/generics.html
