Тип Function

Тренажер по TypeScript для пользователей с начальным уровнем подготовки.

Тренажер по TypeScript

Тип Function в TypeScript — это встроенный тип, который описывает любую функцию. Он полезен, когда нужно принять или сохранить функцию, но конкретная сигнатура неважна.

Синтаксис объявления:

  • let callback: Function;
  • function execute(fn: Function) { fn(); }

Важно: тип Function не проверяет аргументы и возвращаемое значение, поэтому для строгой типизации лучше использовать конкретные сигнатуры вида (a: number) => string. Однако в некоторых случаях общий тип Function упрощает код.

На этом интерактивном тренажёре ты отработаешь практическое использование типа Function — от простого объявления до передачи функций как аргументов.

Список тем

1. Объявление переменной с типом Function

id: 40657_fn_01_declare

Дополните фрагмент кода на TypeScript, объявив переменную с типом Function и присвоив ей стрелочную функцию. Заполните пропуски ключевым словом типа Function и оператором присваивания, чтобы код успешно компилировался и мог выполнить функцию, выводящую приветствие в консоль.

Заполните пропуски
let greetFunc: input1S;
greetFunc input2S () => {
  console.log("Hello, TypeScript!");
};
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Function как параметр

id: 40657_fn_02_param

В данном фрагменте кода определите типы для параметра callback и возвращаемого значения функции process. Выберите подходящие типы из выпадающего списка так, чтобы код был корректным с точки зрения TypeScript. Обратите внимание, что callback является функцией, которая вызывается без аргументов, и её тип должен соответствовать возможностям вызова и возврата значения.

Нужно правильно расставить в пропуски предложенные варианты
function process(callback: input1S): input2S {
  return callback();
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Исправь ошибку в типе

id: 40657_fn_03_error

В данном фрагменте кода TypeScript допущена одна ошибка, связанная с использованием типа для функции. Найдите строку с ошибкой и исправьте её, чтобы код стал корректным с точки зрения системы типов TypeScript. Обратите внимание на правильное написание встроенных типов.

Найдите ошибку и исправьте
let greet: Funtion = (name: string): void => {
    console.log(`Hello, ${name}!`);
};
 
greet('TypeScript');
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Собери функцию с типом Function

id: 40657_fn_04_build

Из предложенных строк соберите корректную TypeScript-программу, которая объявляет функцию, принимающую параметр типа Function, вызывает переданную функцию и возвращает её результат. Программа должна вывести результат вызова этой функции с конкретным аргументом. Одна из строк лишняя и в решение входить не должна.

Перетяните в правильном порядке строки из одного блока в другой
function callFunction(fn: Function): any {
  return fn();
}
const result = callFunction(() => "Hello, TypeScript!");
console.log(result);
const x: number = 42;
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Что выведет код?

id: 40657_fn_05_predict

Проанализируйте приведённый ниже код на TypeScript. Функция executeFunc принимает параметр типа Function и вызывает его. Внимательно изучите, какая именно функция передаётся в качестве аргумента, и определите, что будет выведено в консоль при выполнении этого кода. Выберите один правильный вариант из предложенных.

Выберите правильный вариант ответа
function executeFunc(fn: Function): void {
  fn();
}

let message: string = "Hello";
message = "Goodbye";
executeFunc(() => console.log(message));
Сообщения
Проверить
Показать подсказку

6. Типы функций и их описания

id: 40657_fn_06_compare

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

Сопоставьте строки в правой(нижней) части с соответствующими строками в левой(верхней) по порядковому номеру
Function
() => void
(x: number) => number
() => string
(a: string, b: boolean) => void
Функция с двумя параметрами (строка и булево значение), не возвращающая значения
Функция без параметров, возвращающая строку
Функция с одним числовым параметром, возвращающая число
Любая функция
Функция без параметров и возвращаемого значения
Сообщения
Проверить
Показать подсказку

7. Найди переменные с типом Function

id: 40657_fn_07_click

Перед вами фрагмент кода на TypeScript. Внимательно изучите объявления переменных. Ваша задача — отметить все переменные, тип которых явно указан как Function или является функциональным (например, стрелочная функция). Не отмечайте переменные с типами string, number, boolean или другими не функциональными типами. Всего в коде есть несколько переменных, но только некоторые из них имеют тип Function.

Кликните по всем фрагментам, которые подходят под условие задания.
// Пример кода с объявлениями переменных разных типов
let {{userName: string~|~t1}} = "Alice";
const {{userAge: number~|~t2}} = 30;
let {{isActive: boolean~|~t3}} = true;
let {{logger: Function~|~t4}} = (message: string) => console.log(message);
const {{multiplier: (x: number, y: number) => number~|~t5}} = (x, y) => x * y;
var {{dataProcessor: Function~|~t6}} = function(data: string) { return data.toUpperCase(); };
let {{counter: number~|~t7}} = 0;
const {{greet~|~t8}} = (name: string) => `Hello, ${name}`;
let {{formatDate: Function~|~t9}} = (date: Date) => date.toLocaleDateString();
var {{settings: object~|~t10}} = { theme: "dark" };
Сообщения
Проверить
Показать подсказку

8. Напиши результат вызова

id: 40657_fn_08_result

Проанализируйте приведённый фрагмент кода на TypeScript. В нём объявляется переменная с типом Function, которой присваивается функция, возвращающая результат арифметического выражения. Затем эта переменная вызывается, и результат выводится в консоль. Определите, какое число будет выведено в консоль, и введите его в поле ответа. Ответ должен быть представлен в виде одного целого числа без дополнительных символов.

Что должно получиться?
let operation: Function;
operation = () => {
    return 15 + 25;
};
let result = operation();
console.log(result);
Сообщения
Проверить
Показать подсказку

TypeScript: компиляция и запуск

id: 40657_compiler

Изучаем тип `Function` в TypeScript - обобщенный тип для представления любых функций. Посмотрите, как переменная типа `Function` может хранить разные функции, но при этом мы теряем информацию о сигнатуре. Попробуйте: присвойте переменной `genericFunc` другие функции из примера, создайте свою функцию и передайте ее, измените аргументы при вызове. Увидьте разницу между безопасным вызовом через строгую типизацию и менее безопасным через `Function`.

TS
Запустить тренажёр (TypeScript)
НайтиКурс.Ру