Дженерик: тип как параметр

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Задача простая: вернуть первый элемент массива. Какие в нём элементы, заранее неизвестно — функция должна работать с любыми. Первое, что приходит в голову после второй главы, — поставить any и на входе, и на выходе.

ts

function firstItem(list: any[]): any {
  return list[0];
}
const who = firstItem(["Рико", "Аня"]);
console.log(who.toUpperCase());
const age = firstItem([31, 42]);
console.log(age.toUpperCase());

страница примера

Сначала предположите, что выведет код

Ни одной диагностики. Первый вызов и правда дал строку, второй — число, а у чисел нет toUpperCase: в консоли настоящий TypeError. Компилятор мог бы это поймать — он же видел, что в массиве числа, — но мы сами закрыли ему глаза.

any не описывает связь входа и выхода, а отменяет её. Для компилятора firstItem — функция, которая принимает что угодно и возвращает что угодно, и эти два «что угодно» друг с другом никак не связаны. Дальше any растекается по коду.

ts

function firstItem(list: any[]): any {
  return list[0];
}
const box = firstItem([{ title: "Задача" }]);
console.log(box.titel.length);

страница примера

Сначала предположите, что выведет код

У box тип any, а значит, у него «есть» любое свойство — в том числе titel. Опечатка спокойно доживает до выполнения и падает там: Cannot read properties of undefined.

Попытка вторая — перечислить типы объединением. Диагностика появляется, но радости от неё мало.

ts

function firstItem(list: (string | number)[]): string | number {
  return list[0];
}
const who = firstItem(["Рико", "Аня"]);
console.log(who.toUpperCase());

страница примера

Сначала предположите, что выведет код

«Свойство "toUpperCase" не существует в типе "string | number"», и ниже причина — про number. Формально компилятор прав, а по делу нет: в этот вызов мы передали массив строк и знаем это точно. Приходится сужать по typeof там, где сужать нечего. И список типов конечен: понадобился boolean — правьте сигнатуру.

Нужно сказать иначе: «на выходе тот же тип, что на входе» — не называя, какой именно.

У функции уже есть параметры — в круглых скобках, для значений. Дженерик добавляет вторые, в угловых, — для типов. T здесь не какой-то особенный тип, а имя-заполнитель: ровно как list — имя-заполнитель для массива, который придёт при вызове.

ts

function firstItem<T>(list: T[]): T {
  return list[0];
}
const who = firstItem(["Рико", "Аня"]);
console.log(who.toUpperCase());
const age = firstItem([31, 42]);
console.log(age.toUpperCase());

страница примера

Сначала предположите, что выведет код

Одна функция, два вызова, две разные проверки. В первом на место T встал string — toUpperCase разрешён. Во втором T оказался number: «Свойство "toUpperCase" не существует в типе "number"», и указана седьмая строка — место ошибки, а не функция, которая ни в чём не виновата. Дальше по традиции: диагностика выполнение не отменяет, РИКО успевает напечататься до падения.

Сравните с самым первым примером: код тот же, изменились две аннотации — any[] стал T[], any стал T. Одна буква, повторённая дважды, и есть связь «что вошло, то и вышло».

	Параметр значения	Параметр типа
Где объявлен	в круглых скобках: `function f(list)`	в угловых: `function f<T>()`
Что подставляют	значение: `f([1, 2])`	тип: `f<number>([1, 2])`
Когда подставляют	при вызове, во время работы программы	при вызове, во время проверки типов
Что остаётся в JavaScript	аргумент	ничего, угловые скобки стираются

Последняя строка таблицы — та же мысль, что и в первой главе: типы до браузера не доезжают. В готовом JavaScript от <T> не остаётся ни следа, это обычная функция с одним параметром.

Подставить тип можно и руками — теми же угловыми скобками, только уже при вызове.

ts

function firstItem<T>(list: T[]): T {
  return list[0];
}
const word = firstItem<string>(["Рико", "Аня"]);
console.log(word.toUpperCase());
const oops = firstItem<string>([31, 42]);
console.log(oops);

страница примера

Сначала предположите, что выведет код

Здесь мы объявили T строкой, а принесли числа — и компилятор сверил аргумент с обещанием: «Тип "number" не может быть назначен для типа "string"». Диагностик две, по одной на каждый элемент массива.

В живом коде угловые скобки при вызове почти не пишут: компилятор выводит T из аргументов сам. Как именно — следующая статья главы.

number[] из второй главы — сокращённая запись. Полная выглядит так, что теперь её понятно читать.

ts

const scores: Array<number> = [10, 20];
const byName: Map<string, number> = new Map();
byName.set("Рико", 10);
byName.set("Аня", "много");
console.log(scores.length, byName.size);

страница примера

Сначала предположите, что выведет код

Array<number> и number[] — один и тот же тип, две записи. У Map параметров типа два, Map<K, V> — ключ и значение; мы подставили string и number, и четвёртая строка попалась: «Аргумент типа "string" нельзя назначить параметру типа "number"». Никакой отдельной поддержки Map внутри компилятора нет — работает тот самый механизм, который мы только что написали руками.

Промисы из части I — тоже дженерик: Promise<T>, где T — тип того, чем промис разрешится.

ts

async function loadLogin(): Promise<string> {
  return "rico";
}
async function main() {
  const login = await loadLogin();
  console.log(login.toUpperCase());
  const wrong: Promise<number> = loadLogin();
  console.log(wrong);
}
main();

страница примера

Сначала предположите, что выведет код

await снимает обёртку и отдаёт string — поэтому toUpperCase на месте. А седьмая строка показывает, что параметр типа участвует в сравнении наравне со всем прочим: «Тип "Promise<string>" не может быть назначен для типа "Promise<number>"», и вложенной причиной — про string и number.

Почти всё, что хранит чужие значения: Set<T>, Map<K, V>, WeakMap<K, V>, Promise<T>, Array<T> и его неизменяемая версия ReadonlyArray<T>. Знакомый по главе про индексные сигнатуры Record<K, V> — оттуда же.

ts

const tags: Set<string> = new Set(["ts", "js"]);
const counts: Record<string, number> = { ts: 1 };
console.log(tags.has("ts"), counts.ts);
tags.add(42);

страница примера

Сначала предположите, что выведет код

«Аргумент типа "number" нельзя назначить параметру типа "string"»: Set запомнил, что в нём строки, и стережёт это на каждом add.

«Вернуть то же самое» — частный случай. Параметр типа можно поставить в любое место сигнатуры, и связь опишется любая.

ts

function repeat<T>(value: T, times: number): T[] {
  const out: T[] = [];
  for (let i = 0; i < times; i++) out.push(value);
  return out;
}
const flags = repeat(true, 3);
console.log(flags);
const words = repeat("ок", 2);
console.log(words.join(" "));
console.log(flags[0].toUpperCase());

страница примера

Сначала предположите, что выведет код

Вход — одно значение типа T, выход — массив T[]. У repeat(true, 3) результат boolean[], у repeat("ок", 2) — string[], и join у него есть. А последняя строка ловится: toUpperCase у boolean нет. Обратите внимание, что times остался обычным number — не всё в сигнатуре обязано быть параметром типа.

Параметров типа тоже может быть несколько — перечисляются через запятую, как обычные.

ts

function pair<A, B>(first: A, second: B): [A, B] {
  return [first, second];
}
const row = pair("Рико", 31);
console.log(row[0].toUpperCase(), row[1].toFixed(1));
console.log(row[1].toUpperCase());

страница примера

Сначала предположите, что выведет код

A схватил string, B — number, а результат описан кортежем [A, B] — тем самым кортежем из второй главы, где важен порядок. Поэтому у row[0] есть toUpperCase, у row[1] — toFixed, и перепутать их компилятор не даст.

Имена A и B выбраны для читаемости: две буквы подряд лучше видно, чем T и U. Компилятору всё равно, как их зовут.

Параметр типа не ограничен примитивами: T — это любой тип, включая тот, который вы описали сами.

ts

type User = { login: string; age: number };

function firstItem<T>(list: T[]): T {
  return list[0];
}
const admin = firstItem<User>([{ login: "rico", age: 31 }]);
console.log(admin.login.toUpperCase());
console.log(admin.email);

страница примера

Сначала предположите, что выведет код

Последняя строка — «Свойство "email" не существует в типе "User"». T стал User целиком, со всеми полями и со всей строгостью, которая к User прилагается.

Соблазн читать T как «вежливый any» велик. Проверим его на функции, которая просто выкрикивает переданное.

ts

function shout<T>(value: T): T {
  console.log(value.toUpperCase());
  return value;
}
shout("Рико");

страница примера

Сначала предположите, что выведет код

TS2339, «Свойство "toUpperCase" не существует в типе "T"» — тот же код, что и на опечатке в имени поля, только в типе теперь стоит буква. И это при том, что вызвали мы shout со строкой и РИКО в консоли напечаталось. Тело функции проверяется один раз, до всех вызовов, и обязано быть верным для любой подстановки. Раз T может оказаться числом, toUpperCase под запретом.

Вот здесь и проходит граница между any и T. any разрешает внутри всё и не обещает наружу ничего. T наоборот: внутри почти ничего нельзя, зато наружу дано твёрдое обещание. Сказать компилятору «T — не совсем что угодно, а хотя бы что-то со строчными методами» можно, для этого есть слово extends, и ему отведена третья статья главы.

Из того же правила следует второе ограничение: значение типа T нельзя сочинить — его можно только получить снаружи.

ts

function firstOr<T>(list: T[]): T {
  if (list.length > 0) return list[0];
  return 0;
}
const empty = firstOr<string>([]);
console.log(empty.toUpperCase());

страница примера

Сначала предположите, что выведет код

Диагностика с вложенной причиной, читается как разбор из первой главы: «Тип "number" не может быть назначен для типа "T"», а ниже почему — «Возможно создание экземпляра "T" с произвольным типом, который может быть не связан с "number"». По-человечески: вы обещали вернуть тот тип, который выберет вызывающий, а вернули ноль. Пятая и шестая строки это и доказывают: T выбрали string, из функции пришёл 0, и toUpperCase падает уже при выполнении.

Наконец, T — обычное имя, и живёт оно только внутри своей функции.

ts

function identity<T>(value: T): T {
  return value;
}
console.log(identity("Рико"));

let saved: T;

страница примера

Сначала предположите, что выведет код

«Не удается найти имя "T"»: снаружи параметра типа не существует — ровно как не существует снаружи имени параметра функции. Буква T ничем не выделена, её просто принято брать первой.

Имя	Откуда	Где встречается
`T`	Type	единственный параметр типа
`U`, `V`	следующие буквы алфавита	второй и третий параметры
`K`, `V`	Key, Value	пары ключ-значение, как в `Map<K, V>`
`E`	Element	элемент коллекции
`Item`, `Value`	обычное слово	когда буква перестаёт читаться

Однобуквенные имена — традиция, а не правило. Когда параметров типа три и они разной природы, слово читается лучше буквы.

any в сигнатуре не описывает связь входа и выхода, а отменяет её вместе со всеми проверками.
Дженерик — это параметр типа: имя в угловых скобках, на место которого при вызове встаёт настоящий тип.
Одна буква T, повторённая в параметре и в возврате, и есть обещание «что вошло, то и вышло».
Параметров типа бывает несколько, и стоять они могут где угодно в сигнатуре: T на входе, T[] или [A, B] на выходе.
Array<T>, Map<K, V>, Promise<T> — тот же механизм: дженериками вы пользовались задолго до этой статьи.
Внутри функции про T не известно почти ничего: тело проверяется один раз и обязано подойти любой будущей подстановке.

1/4Функция объявлена как function firstItem(list: any[]): any, а в коде написано firstItem([31, 42]).toUpperCase(). Что скажет компилятор?

2/4Есть function pair<A, B>(first: A, second: B): [A, B] и вызов pair("Рико", 31). Какой тип у второго элемента результата?

3/4Внутри function shout<T>(value: T) написали value.toUpperCase(), а вызвали shout("Рико"). Что будет?

4/4Чем Array<number> отличается от number[]?

Уберите any

Функция возвращает последний элемент массива, и обе аннотации у неё any. Из-за этого ошибка в седьмой строке видна только в браузере. Перепишите сигнатуру на параметр типа так, чтобы компилятор поймал её до запуска — тело менять не нужно.

ts

function lastItem(list: any[]): any {
  return list[list.length - 1];
}
const word = lastItem(["раз", "два"]);
console.log(word.toUpperCase()); // ДВА
const count = lastItem([1, 2, 3]);
console.log(count.toUpperCase()); // сейчас падает при выполнении

страница примера

Сначала предположите, что выведет код

Объявляем параметр типа T в угловых скобках и ставим его на оба места, где стоял any: массив на входе — T[], результат — T.

tsxлистинг · не запускается

function lastItem<T>(list: T[]): T {
  return list[list.length - 1];
}
const word = lastItem(["раз", "два"]);
console.log(word.toUpperCase()); // ДВА
const count = lastItem([1, 2, 3]);
console.log(count.toUpperCase()); // «Свойство "toUpperCase" не существует в типе "number"»

function lastItem<T>(list: T[]): T {
  return list[list.length - 1];
}
const word = lastItem(["раз", "два"]);
console.log(word.toUpperCase()); // ДВА
const count = lastItem([1, 2, 3]);
console.log(count.toUpperCase()); // «Свойство "toUpperCase" не существует в типе "number"»

Первый вызов работает как раньше — T стал string. Во втором T — это number, и седьмая строка теперь подсвечена в редакторе, а не падает у пользователя.

Пара наоборот

swap меняет местами элементы пары. С any компилятор согласен на любую глупость: в четвёртой строке пришли строка и число, а после перестановки к числу применяют toUpperCase — и никакой диагностики. Опишите функцию двумя параметрами типа так, чтобы результат был кортежем в обратном порядке.

ts

function swap(pair: [any, any]): [any, any] {
  return [pair[1], pair[0]];
}
const swapped = swap(["Рико", 31]);
console.log(swapped[0].toUpperCase()); // TypeError при выполнении

страница примера

Сначала предположите, что выведет код

Два параметра типа, A и B, и кортеж на выходе с переставленными местами: [B, A].

jsлистинг · не запускается

function swap<A, B>(pair: [A, B]): [B, A] {
  return [pair[1], pair[0]];
}
const swapped = swap(["Рико", 31]);
console.log(swapped[0].toFixed(0), swapped[1].toUpperCase()); // 31 РИКО

function swap<A, B>(pair: [A, B]): [B, A] {
  return [pair[1], pair[0]];
}
const swapped = swap(["Рико", 31]);
console.log(swapped[0].toFixed(0), swapped[1].toUpperCase()); // 31 РИКО

Теперь swapped[0] — число, а swapped[1] — строка, и swapped[0].toUpperCase() перестаёт компилироваться. Тип возврата пришлось написать руками: сам факт перестановки внутри тела — не то, о чём компилятор догадается.

Значение по умолчанию

Функция должна вернуть первый элемент, а для пустого массива — что-нибудь запасное. Компилятор возражает на третью строку. Прочитайте диагностику вместе с вложенной причиной, объясните её себе и почините функцию, не выбрасывая T.

ts

function firstOr<T>(list: T[]): T {
  if (list.length > 0) return list[0];
  return 0;
}
console.log(firstOr(["а", "б"])); // а
console.log(firstOr<string>([])); // обещали строку, а придёт 0

страница примера

Сначала предположите, что выведет код

Причина в диагностике сказана прямо: «Возможно создание экземпляра "T" с произвольным типом, который может быть не связан с "number"». Вызывающий выбирает T сам, и ноль подойдёт только если он выбрал числа. Сочинить значение типа T внутри функции невозможно — его нужно получить снаружи, вторым параметром.

tsxлистинг · не запускается

function firstOr<T>(list: T[], fallback: T): T {
  return list.length > 0 ? list[0] : fallback;
}
console.log(firstOr(["а", "б"], "пусто")); // а
console.log(firstOr<string>([], "пусто")); // пусто
console.log(firstOr([1, 2], 0).toFixed(1)); // 1.0

function firstOr<T>(list: T[], fallback: T): T {
  return list.length > 0 ? list[0] : fallback;
}
console.log(firstOr(["а", "б"], "пусто")); // а
console.log(firstOr<string>([], "пусто")); // пусто
console.log(firstOr([1, 2], 0).toFixed(1)); // 1.0

Одна буква T теперь связывает три места: элементы массива, запасное значение и результат. Передать строку с запасным нулём компилятор не даст.

Дженерик: тип как параметр

Видеоразбор темы за 5–7 минут

any разрывает связьКомпилятор молчит, а код падает

Параметр типаУгловые скобки объявляют имя для типа

Вы уже пользовались дженерикамиArray, Map и Promise устроены точно так же

Связь бывает не только «тот же тип»T на входе, T[] или кортеж на выходе

Что известно про T внутриПочти ничего — и это не недосмотр

Итогошпаргалка по теме

Проверьте себявопросы по теме

Задачизадачи с решениями

Уберите any

Пара наоборот

Значение по умолчанию