Стрелочные функции (Arrow Functions) — это лаконичный способ записи функций, ставший стандартом в современной разработке. В TypeScript их типизация имеет свои особенности. Вы можете типизировать аргументы и возвращаемое значение прямо в сигнатуре: (a: number): string => ....
Кроме того, часто удобно создавать отдельный тип для функции, чтобы использовать его повторно. Это делается через Type Alias: type MathFunc = (x: number, y: number) => number. Такой подход делает код чище и читаемее, особенно при передаче функций в качестве колбэков.
В этом уроке мы попрактикуемся в написании типизированных стрелочных функций. Задачи охватывают как инлайн-типизацию, так и создание отдельных сигнатур типов. Вы научитесь правильно расставлять скобки и типы возвращаемых значений.
- Модуль 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. Обратите внимание на места пропусков: в одном нужно указать тип возвращаемого значения, в другом — символ стрелки. Учтите, что функция принимает два числа и возвращает их сумму, поэтому тип возвращаемого значения должен соответствовать операции сложения. Заполните пропуски так, чтобы код был синтаксически корректным и компилировался без ошибок.
const add = (a: number, b: number) input2S input1S {
return a + b;
};2. Сборка стрелочной функции
Из предложенных строк соберите корректную стрелочную функцию на TypeScript, которая принимает два числа и возвращает их произведение. Функция должна быть типизирована: параметры и возвращаемое значение имеют тип number. Лишние строки в решение включать не нужно. Убедитесь, что функция объявлена как константа и имеет явное указание типа возвращаемого значения.
const multiply =(x: number, y: number): number =>{ return x * y;}const multiply = (x, y) => x * y;const multiply: number = (x: number, y: number) => { return x * y; };return x * y;console.log('Hello');3. Типизация аргументов
В этом задании вам нужно дополнить код стрелочной функции умножения, выбрав правильные типы для аргументов и возвращаемого значения из предложенного списка. Обратите внимание, что операция умножения в TypeScript определена только для числовых операндов, и результат также должен быть числом. Задание поможет закрепить навыки явной типизации параметров и возвращаемого значения стрелочных функций.
const multiply = (a: input1S, b: input2S): input3S => a * b;4. Скобки параметров
В этом фрагменте кода TypeScript допущена синтаксическая ошибка в объявлении стрелочной функции. При указании типа параметра в стрелочной функции необходимо заключать параметр в круглые скобки. Исправьте ошибку, чтобы код стал рабочим и корректно типизированным.
const greet = name: string => `Hello, ${name}`;console.log(greet('Alice'));5. Структура типа функции
Разметьте структуру типа функции в TypeScript. Укажите для каждого выделенного фрагмента, является ли он списком аргументов (включая скобки и типы параметров), стрелкой, разделяющей параметры и возвращаемое значение, или типом возврата функции. Это упражнение поможет закрепить понимание синтаксиса типизации стрелочных функций.
6. Выполнение колбэка
Проанализируйте TypeScript-код сверху и восстановите последовательность логических шагов выполнения программы. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как программа объявляет стрелочную функцию, передаёт её в другую функцию, вызывает внутри и возвращает результат.
// Объявление стрелочной функции
const square = (x: number): number => x * x;
// Функция, принимающая колбэк
function applyOperation(value: number, operation: (num: number) => number): number {
return operation(value);
}
// Входные данные
const inputValue = 4;
const result = applyOperation(inputValue, square);
console.log(result);7. Короткая запись возврата
В данном задании представлен фрагмент кода на TypeScript, использующий стрелочные функции с неявным возвратом (без фигурных скобок). Проанализируйте код и определите, какое значение будет выведено в консоль. Введите это значение в поле ответа в виде одного числа.
const add = (a: number, b: number) => a + b;
const subtract = (a: number, b: number) => a - b;
const result = add(10, subtract(8, 5));
console.log(result);