Типы функций

Как и в JavaScript, функции в TypeScript могут быть как именованные, так и анонимные. Это позволяет вам выбрать наиболее удобный подход для разработки вашего приложения, будь то выстраивание списка в функций в API, либо вкладывая одну функцию в другую.

Тип функции

Каждая функция имеет тип, как и обычные переменные. Тип функции фактически представляет комбинацию типов параметров и типа возвращаемого значения. Например, возьмем следующую функцию:

let sum = (x: number, y: number): number => x + y

Она имеет тип (x:number, y:number) => number, то есть принимает два параметра number и возвращает значение типа number. Названия параметров в типе функции необязательно должны соответствовать названиям конкретной функции. А перед типом возвращаемого значения ставится знак равно со стрелкой.

И подобно тому, как определяются переменные определенного типа, можно определять переменные, которые имеют тип функции:

let op: (x: number, y: number) => number

То есть переменная op представляет любую функцию, которая принимает два числа и которая возвращает число.

Пример

let sum = (x: number, y: number): number => x + y

let subtract = (a: number, b: number): number => a - b

let op: (x: number, y: number) => number

op = sum
console.log(op(2, 4)) // Работает как сложение = 6

op = subtract
console.log(op(6, 4)) // Сейчас как вычитание = 2

Здесь вначале переменная op указывает на функцию sum. И соответственно вызов op(2, 4) фактически будет представлять вызов sum(2, 4). А затем op указывает на функцию subtract.

Функции обратного вызова

Тип функции можно использовать как тип переменной, но он также может применяться для определения типа параметра другой функции:

Пример

let mathOp = (x: number, y: number, operation: (a: number, b: number) => number): number => {
  let result = operation(x, y)
  return result
}

let operationFunc: (x: number, y: number) => number

operationFunc = (a: number, b: number): number => a + b

console.log(mathOp(10, 20, operationFunc)) // Сложение = 30

operationFunc = (a: number, b: number): number => a * b

console.log(mathOp(10, 20, operationFunc)) // Умножение = 200

Здесь в функции mathOp третий парметр как раз представляет функцию, которая принимает два параметра типа number и возвращает число. Фактически тем самым мы можем передавать функции обратного вызова, например, при генерации событий, когда в ответ на некоторое действие срабатывает другая функция.