Callback функции (функции обратного вызова) — это функции, которые передаются другим функциям в качестве аргументов. В TypeScript крайне важно правильно типизировать такие параметры, чтобы знать, какие аргументы принимает колбэк и что он возвращает. Синтаксис выглядит как стрелочная функция: (arg: number) => void.
Это позволяет вам четко описывать контракты взаимодействия между частями программы. Если вы передадите функцию с неправильным набором аргументов, тесты и компилятор сразу укажут на ошибку. В этом уроке мы разберем, как описывать сигнатуры колбэков, использовать их в синхронном и асинхронном коде, и как этот механизм обеспечивает гибкую разработку.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 9: Литеральные типы
- Модуль 10: Type Aliases
- Модуль 11: Интерфейсы
- Модуль 12: Type Guards и Narrowing
- Модуль 13: Enums
- Модуль 14: Классы
- Модуль 15: Generics — основы
- Модуль 16: Generics — ограничения
- Модуль 17: Utility Types — базовые
- Модуль 18: Utility Types — работа с Union
- Модуль 19: Utility Types — функции
- Модуль 20: Type Assertions
- Модуль 21: Keyof и Typeof операторы
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
1. Порядок выполнения
Проанализируйте TypeScript-код сверху и восстановите последовательность шагов выполнения программы, включая вызов функции высшего порядка, выполнение её логики, вызов callback-функции и получение результата. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить логику работы программы.
function multiplyByTwo(num: number): number {
return num * 2;
}
function processData(arr: number[], callback: (num: number) => number): number[] {
const result: number[] = [];
for (let i = 0; i < arr.length; i++) {
result.push(callback(arr[i]));
}
return result;
}
const input = [1, 2, 3];
const output = processData(input, multiplyByTwo);
console.log(output);2. Типизация аргумента
В объявлении функции TypeScript разметьте следующие элементы: ключевое слово 'function', имя функции, имя параметра callback, тип этого параметра (весь стрелочный тип) и тело функции. Это упражнение поможет вам лучше понимать синтаксис типизации callback-параметров в TypeScript.
{{function~|~t1}} {{processData~|~t2}}({{callback~|~t3}}: {{(value: number) => string~|~t4}}) {{{\n // ...\n}~|~t5}}3. Описание сигнатуры
В этом задании вам нужно дополнить сигнатуру callback-функции, указав правильные типы для её параметров и возвращаемого значения. Изучите, как callback используется в теле функции `processNumbers`, и определите типы на основе этого использования. Заполните пропуски так, чтобы код стал типобезопасным и компилировался без ошибок.
function processNumbers(numbers: number[], callback: (value: input1S) => input2S): void {
for (const num of numbers) {
const result = callback(num);
console.log(`Результат: ${result}`);
}
}
// Пример использования
processNumbers([1, 2, 3], (x) => x * 2);4. Результат вызова
Проанализируйте приведённый код на TypeScript, содержащий функцию process с callback-аргументом. Внимательно проследите, как вызывается callback-функция и какие преобразования происходят с числом. Определите, какое значение будет выведено в консоль после выполнения программы.
function process(num: number, callback: (n: number) => number): number {
return callback(num);
}
const double = (x: number) => x * 2;
const result = process(5, double);
console.log(result);5. Ошибка в аргументах
В этом фрагменте TypeScript-кода определена функция, принимающая колбэк. Колбэк ожидает строковый аргумент, но при вызове внутри функции ему передаётся число. Найдите строку с ошибкой и исправьте её, чтобы код соответствовал типам и вывел строку в консоль. Обратите внимание на тип параметра колбэка и передаваемый аргумент.
function process(callback: (value: string) => void) { callback(42);} process((value) => { console.log(value.toUpperCase());});6. Сборка функции с колбэком
Из предложенных строк соберите корректное определение функции на TypeScript. Функция должна называться `run`, принимать один параметр `next` типа `() => void` (функция без параметров, возвращающая `void`) и вызывать этот параметр `next` внутри своего тела. Лишние строки в решение включать не нужно.
functionrun(next: () => void){ next();} console.log("Hello"); return; let x: number = 5;7. Тип возврата колбэка
В данном фрагменте кода TypeScript объявлена переменная callback, которая является функцией без параметров, возвращающей значение. Результат вызова callback присваивается переменной result типа string. Выберите из списка правильный тип возвращаемого значения колбэка (ReturnType), чтобы код был корректен и не вызывал ошибок типизации.
const callback: () => input1S = () => "test";
const result: string = callback();