Введение в Generics

Тренажер по TypeScript для пользователей с начальным уровнем подготовки.

Тренажер по TypeScript

Обобщения, или Generics, — это мощный инструмент в TypeScript, позволяющий создавать компоненты, работающие с различными типами данных, сохраняя при этом строгую типизацию. Вместо использования any, который отключает проверку типов, мы используем переменную типа (обычно обозначается как T).

Дженерики позволяют функции, классу или интерфейсу «захватывать» тип, переданный пользователем, и использовать его в дальнейшем. Это ключевой элемент для создания переиспользуемого кода и библиотек. На этом уроке вы узнаете, как объявлять обобщенные функции и как TypeScript автоматически выводит типы аргументов.

Список тем

1. Идентификация Generic типа

id: 40710_ts_generics_intro_01

В представленной функции-дженерике TypeScript выделите следующие элементы: объявление параметра типа (в угловых скобках), использование этого параметра типа в аннотациях аргументов и возвращаемого значения. Доступные типы для разметки: 'Объявление параметра типа' и 'Использование параметра типа'. Это задание поможет закрепить понимание синтаксиса объявления и использования generic-параметров.

Кликните по каждому выделенному фрагменту и выберите для него подходящий тип из списка под текстом.
function {{identity~|~t1}}<{{T~|~t2}}>({{value~|~t3}}: {{T~|~t4}}): {{T~|~t5}} {
  return {{value~|~t6}};
}
Использование параметра типа
Объявление параметра типа
Идентификатор (имя)
Сообщения
Проверить
Показать подсказку

2. Объявление Generic функции

id: 40710_ts_generics_intro_02

В этом задании вам предстоит объявить generic-функцию. В коде функции `identity` пропущены угловые скобки с параметром типа и тип аргумента. Заполните пропуски, чтобы функция стала обобщенной и могла работать с любым типом данных. Используйте параметр типа `T`.

Заполните пропуски
// Объявите generic функцию с параметром типа T
function identity input1S (arg: input2S): input2S {
    return arg;
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Generic vs Any

id: 40710_ts_generics_intro_04

Перед вами список функций, написанных на TypeScript. Разнесите их по двум категориям: 'Использует Generics (безопасно)' и 'Использует any (небезопасно)'. Обратите внимание на объявление типов в параметрах и возвращаемом значении. Каждая функция должна оказаться в одной из двух категорий.

Перетяните элементы в соответствующие блоки
Использует Generics (безопасно)
Использует any (небезопасно)
function identity<T>(arg: T): T { return arg; }
function getFirstElement(arr: any[]): any { return arr[0]; }
function mergeObjects<T, U>(obj1: T, obj2: U): T & U { return { ...obj1, ...obj2 }; }
function logValue(value: any): void { console.log(value); }
function toArray<T>(...args: T[]): T[] { return args; }
function parseData(data: any): any { return JSON.parse(data); }
Сообщения
Проверить
Показать подсказку

4. Несоответствие типов

id: 40710_ts_generics_intro_05

В этом фрагменте кода TypeScript используется generic-функция, но при её вызове допущена ошибка: тип, указанный в угловых скобках, не соответствует типу передаваемого аргумента. Найдите строку с ошибкой и исправьте её, чтобы код стал корректным. Обратите внимание, что исправление должно быть выполнено только в одной строке — либо измените тип в угловых скобках, либо измените передаваемый аргумент.

Найдите ошибку и исправьте
function identity<T>(value: T): T {
    return value;
}
 
let result = identity<string>(42);
console.log(result);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Создание функции swap

id: 40710_ts_generics_intro_06

Из предложенных строк соберите корректную TypeScript-функцию `swap`, которая меняет местами два значения произвольного типа `T`. Функция должна использовать дженерики, принимать два параметра типа `T` и возвращать кортеж (массив) из двух элементов типа `T` в обратном порядке. Игнорируйте лишние строки, которые не соответствуют этой задаче или нарушают синтаксис.

Перетяните в правильном порядке строки из одного блока в другой
function swap<T>(a: T, b: T): [T, T] {
    return [b, a];
}
function swap(a: any, b: any): any {
    return [a, b];
    let temp = a;
    a = b;
    b = temp;
console.log(swap(1, 2));
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

TypeScript: компиляция и запуск

id: 40710_compiler

Добро пожаловать в мир обобщений (Generics)! В этом примере вы увидите, как одна функция может гибко работать с любыми типами данных, не теряя при этом подсказок и проверок компилятора. Попробуйте изменить передаваемые значения или вовсе уберите явное указание типа в угловых скобках — TypeScript умеет выводить их автоматически! Экспериментируйте: добавьте свои типы или создайте новую функцию, которая принимает два разных generic-параметра, чтобы почувствовать всю мощь этого инструмента.

TS
Запустить тренажёр (TypeScript)
НайтиКурс.Ру