ПрограммированиеFullstack разработчик / Frontend-разработчик

Как работает типизация функции обратного вызова (callback) в TypeScript и что нужно предусмотреть при типизации параметров и возвращаемых значений колбэков?

Проходите собеседования с ИИ помощником Hintsage

Ответ

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

type Callback = (event: string, id: number) => boolean; function useCallback(cb: Callback) { // ... }
  • Все параметры и возвращаемое значение стоит явно типизировать.
  • Если функция может возвращать void (не возвращает ничего) — это должно быть указано: () => void.
  • Замыкания, this и перегрузки также требуют учёта при типизации.
  • Если функция с колбэком участвует во внешних взаимодействиях (например, React/Node.js), типы должны совпадать со сторонними декларациями.

Вопрос с подвохом

Обязательно ли указывать типы параметров и возвращаемого значения в определении callback-функции, если TypeScript может вывести их автоматически?

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

Примеры реальных ошибок из-за незнания тонкостей темы


История

В проекте использовали callback без явной типизации возвращаемого значения, и один из разработчиков начал возвращать из функции строку вместо ожидаемого булева. Это не вызвало ошибку на этапе компиляции из-за дефолтного any, но логика работы функции сломалась, вызвав баг на продакшене.


История

В большом React-проекте забыли явно типизировать параметры event-колбэков. При переходе на новую версию React типы событий изменились, и код стал компилироваться с ошибками. Пришлось срочно исправлять функцию обратного вызова на всех страницах.


История

В Node.js-приложении не был типизирован колбэк для работы с асинхронной функцией: полученное значение было ошибочно воспринято как string, хотя это был объект error. Несовпадение типов привело к невозможности корректной обработки ошибок.