Тип функции: параметры, возврат, алиас для колбэка

Типы параметров компилятор придумать не может: угадывать, что вы собирались передать, неоткуда. Их пишете вы. А вот тип возврата он выведет сам, прочитав тело.

function area(width: number, height: number) {
  return width * height;
}
console.log(area(3, 4));

Ни одной диагностики, и наведение на area покажет (width: number, height: number) => number: тип результата вывелся из умножения. Раз выводится — значит, писать его необязательно. Но иногда стоит.

Явная аннотация возврата проверяет не тех, кто функцию вызывает, а само тело. Обещание записано в сигнатуре, и нарушить его молча уже нельзя.

function formatPrice(value: number): string {
  return Math.round(value * 100) / 100;
}
console.log(formatPrice(19.994));

«Тип "number" не может быть назначен для типа "string"» — и указана строка с return. Теперь уберём аннотацию и посмотрим, куда переедет та же ошибка.

function makeLabel(count: number) {
  return count;
}
const label: string = makeLabel(3);
console.log(label.toUpperCase());

Диагностика та же самая, но приехала она на четвёртую строку — туда, где результат используют, а не туда, где его сочинили. В большом проекте это будет другой файл и другой автор. А дальше начинается второе действие: предупреждение никого не остановило, код выполнился, и label оказался числом 3. У чисел нет toUpperCase — в консоли настоящий TypeError.

Внутри модуля тип возврата обычно не пишут — вывод справляется. Пишут там, где сигнатура является обещанием для других: экспорт, публичный метод, чужой колбэк.

У числа тип number, у массива чисел — number[]. У функции тип записывается почти так же, как сама стрелочная функция: скобки с параметрами, стрелка, результат. Разница одна — справа от стрелки стоит не тело, а тип.

let operation: (a: number, b: number) => number;

operation = (a, b) => a + b;
console.log(operation(2, 3));

operation = (a, b) => a + " и " + b;

Первое, что стоит заметить: у a и b нет аннотаций, а знакомой по второй главе TS7006 нет. Когда компилятор заранее знает, какого типа должна быть функция, он раздаёт типы её параметрам сам — это называется контекстной типизацией. Дописывать (a: number, b: number) не нужно: это было бы дублированием того, что уже сказано слева.

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

Второе, что удивляет: имена параметров внутри типа ни к чему не обязывают. Они стоят там для чтения, как подпись на схеме, — сверяются только позиции и типы.

type Distance = (from: number, to: number) => number;

const walk: Distance = (to, from) => to - from;
console.log(walk(10, 3));

Ни звука. Distance говорит «два числа на входе, число на выходе», а как реализация назовёт свои параметры — её личное дело. Результат 7, а не −7: первый аргумент попал в первый параметр, что бы ни было написано в типе. Имя в типе — это комментарий, и проверять его нечем.

let toLength: (text: string): number;
toLength = (text) => text.length;
console.log(toLength("рико"));

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

type Formatter = (value: number) => string;

function printAll(values: number[], format: Formatter): void {
  for (const value of values) console.log(format(value));
}

printAll([1000, 2500], (value) => value.toFixed(2) + " руб.");

Formatter — обычное имя для типа, никакой особой конструкции для колбэков в языке нет. Колбэк написан прямо в аргументе, поэтому value снова получил тип по контексту: компилятор посмотрел, чего ждёт printAll, и раздал типы.

А теперь вынесем колбэк в переменную — так делают, когда его хочется переиспользовать или просто назвать.

type Formatter = (value: number) => string;

function printAll(values: number[], format: Formatter): void {
  for (const value of values) console.log(format(value));
}

const short = (value) => "≈" + Math.round(value);
printAll([1.4, 2.6], short);

«Параметр "value" неявно имеет тип "any"» — и указана строка с short, а не строка с вызовом. Переменная объявлена сама по себе, взять тип параметра неоткуда: контекст появится позже, при передаче, а типизируется функция в момент объявления. Обратите внимание, на самой передаче диагностики нет — (value: any) => string подходит куда угодно, за то any и не любят.

Лечится это не аннотацией параметра, а аннотацией переменной.

type Formatter = (value: number) => string;

function printAll(values: number[], format: Formatter): void {
  for (const value of values) console.log(format(value));
}

const short: Formatter = (value) => "≈" + Math.round(value);
printAll([1.4, 2.6], short);

Это и есть главный приём статьи: тип колбэка называют один раз, а дальше на имя ссылаются — и в сигнатуре функции, и на переменной. Ни одного any и ни одного повторённого : number.

Колбэк, который ничего не возвращает, описывают как «… => void». У void в этой позиции есть отдельная особенность — ей посвящена третья статья главы.

Проверка совместимости функций несимметрична, и с непривычки правило кажется вывернутым: функция с меньшим числом параметров подходит туда, где объявлено больше. Наоборот — не подходит.

type Listener = (index: number, total: number) => string;

const brief: Listener = (index) => "элемент " + index;
console.log(brief(1, 10));

const verbose: Listener = (index: number, total: number, extra: number) => "" + extra;
console.log(verbose(1, 10));

Правило становится очевидным, если встать на место вызывающего кода. Он даст ровно два аргумента: brief лишний просто не возьмёт — это безопасно, а verbose попросит третий, и взять его негде. Диагностика говорит именно это: «Целевая подпись предоставляет слишком мало аргументов. Ожидал 3 или больше, но получил 2». Ниже, в выводе, видно и последствие — undefined.

На этом правиле держится половина повседневного кода. map зовёт колбэк с тремя аргументами — значением, индексом и всем массивом, — а берём мы обычно один.

console.log([10, 20, 30].map((n) => n * 2));
console.log([10, 20, 30].map((n, i) => n + i));

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

const raw = ["10", "10", "10"];
console.log(raw.map(parseInt));
console.log(raw.map((value) => parseInt(value)));

Первая строка вывода — [10, NaN, 2]. У parseInt два параметра: строка и система счисления. Два меньше трёх, форма сошлась, компилятор доволен — а map тем временем подставляет индекс вторым аргументом, и он оказывается основанием: parseInt("10", 1) даёт NaN, parseInt("10", 2) — двойку. Проверка следит за формой, а не за замыслом; вторая строка с явным колбэком берёт ровно то, что нужно.

Компилятор сверяет формы, а не намерения. Типы снимают целый класс ошибок, но не заменяют чтение документации к чужой функции.

Фабрики функций из главы про замыкания в типах выглядят непривычно ровно один раз. Справа от стрелки может стоять что угодно — в том числе ещё одна стрелка.

type Multiplier = (k: number) => (x: number) => number;

const multiplier: Multiplier = (k) => (x) => x * k;

const double = multiplier(2);
console.log(double(5), multiplier(3)(5));

Читается такой тип слева направо: принимает k, отдаёт функцию, которая принимает x и отдаёт число. Скобки вокруг второй стрелки не нужны — всё, что справа, целиком считается типом результата. Внутренняя функция замкнула k, как и в части I; типы к этому механизму ничего не добавили, кроме проверки.

Одного взгляда на Multiplier хватает, чтобы понять, что multiplier(2) — это ещё не число, а функция, и её нужно вызвать второй раз. Ради такой читаемости стрелочные типы и выносят в псевдонимы.

const plain: (name: string) => string = (name) => "Привет, " + name;
plain.language = "ru";
console.log(plain("Рико"));

interface Greeter {
  (name: string): string; // сигнатура вызова: вот так объект можно позвать
  language: string; // а вот такое поле у него есть
}

const greet: Greeter = Object.assign((name: string) => "Привет, " + name, {
  language: "ru",
});

console.log(greet("Рико"));
console.log(greet.language);