Интерфейсы в TypeScript могут описывать не только форму объектов, но и сигнатуры функций. Это мощный инструмент для создания контрактов в коде, особенно при работе с колбэками или сложными API.
Синтаксис интерфейса для функции выглядит как определение функции без тела: в скобках указываются параметры и их типы, а после двоеточия — возвращаемый тип. Например: (source: string, subString: string): boolean;. Используя такие интерфейсы, вы гарантируете, что любая функция, реализующая этот интерфейс, будет строго соответствовать заданной структуре аргументов и возвращаемого значения. В этом уроке мы попрактикуемся в создании и использовании функциональных интерфейсов.
- Модуль 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. Укажите для каждого выделенного фрагмента, является ли он ключевым словом, именем интерфейса, списком параметров или типом возвращаемого значения. Это поможет закрепить понимание структуры сигнатуры функции в интерфейсах.
{{interface~|~t1}} {{Add~|~t2}} {
{{(x: number, y: number)~|~t3}}: {{number~|~t4}};
}2. Определение интерфейса
В этом задании вам нужно определить интерфейс для функции поиска элемента в массиве. Функция принимает два параметра: массив чисел и число для поиска, а возвращает булево значение, указывающее, найдено ли число в массиве. Заполните пропуски в коде, указав правильные типы для параметров и возвращаемого значения. Обратите внимание, что тип массива чисел можно записать двумя способами: number[] или Array
interface SearchFunc {
(source: input1S, searchValue: input2S): input3S;
}3. Сопоставление интерфейсов
В левой колонке перечислены названия интерфейсов TypeScript, предназначенных для описания функций. В правой колонке приведены сигнатуры функций. Сопоставьте каждый интерфейс с соответствующей сигнатурой. Обратите внимание, что в правой колонке нет лишних вариантов, но порядок сигнатур перемешан.
(event: Event) => void(value: T) => boolean(message: string) => void(input: T) => U(a: T, b: T) => number4. Сборка реализации
Из предложенных строк соберите корректный TypeScript-код, который объявляет интерфейс для функции, принимающей два числа и возвращающей число, затем объявляет переменную этого типа и присваивает ей стрелочную функцию, складывающую числа. В решении должна быть только одна реализация функции, лишние строки не включайте. Код должен быть рабочим и компилироваться.
interface MathOperation { (a: number, b: number): number;}let add: MathOperation;add = (x: number, y: number): number => { return x + y;};let multiply: MathOperation;multiply = (x: number, y: number): number => { return x * y;};let subtract: (a: number, b: number) => string;5. Несоответствие типов
В этом фрагменте TypeScript-кода допущена ошибка: функция, назначенная переменной с типом интерфейса, возвращает значение не того типа, которое ожидается. Исправьте строку с реализацией функции, чтобы она соответствовала контракту интерфейса и код мог корректно выполниться.
interface MathOperation { (x: number, y: number): number;} let add: MathOperation = function(x: number, y: number): string { return (x + y).toString();}; console.log(add(5, 3));6. Типизация колбэка
В этом задании вам нужно правильно типизировать параметр функции, который является колбэком. В коде ниже функция processUserInput принимает колбэк, который должен обрабатывать число (id пользователя) и возвращать строку (имя пользователя). Используя выпадающие списки, выберите подходящий интерфейс для колбэка и типы его параметра и возвращаемого значения, чтобы код работал корректно.
interface input1S {
(id: input2S): input3S;
}
function processUserInput(callback: input1S) {
const userId = 42;
const userName = callback(userId);
console.log(`User name is: ${userName}`);
}7. Результат вызова
В данном задании представлен интерфейс для математической операции и его реализация в виде функции умножения. Проанализируйте код и определите, какое значение будет выведено в консоль после вызова функции с указанными аргументами. Введите только одно число в поле ответа.
interface Operation {
(a: number, b: number): number;
}
const multiply: Operation = (a, b) => a * b;
console.log(multiply(7, 6));