Типы функций

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

Тип функции

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

function sum(x: number, y: number): number {
  return x + y
}

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

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

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

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

function sum(x: number, y: number): number {
  return x + y
}
function subtract(a: number, b: number): number {
  return 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.

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

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

function 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 = function (a: number, b: number): number {
  return a + b
}
console.log(mathOp(10, 20, operationFunc)) // Сложение = 30

operationFunc = function (a: number, b: number): number {
  return a * b
}
console.log(mathOp(10, 20, operationFunc)) // Умножение = 200

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

Стрелочные функции

Для определения функций в TypeScript можно использовать стрелочные функции или arrow functions. Стрелочные функции представляют выражения типа (параметры) => тело функции. Например:

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

let result = sum(15, 35) // 50
console.log(result)

Тип параметров можно опускать:

实时编辑器

function learnJavaScript() {
  let sum = (x, y) => x + y

  let result = sum(15, 35) // 50
  return result
}

function learnJavaScript() {
  let sum = (x, y) => x + y

  let result = sum(15, 35) // 50
  return result
}

结果

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

实时编辑器

function learnJavaScript() {
  let square = x => x * x
  let hello = () => 'Hello world'

  return hello() + ' ' + square(7)
}

function learnJavaScript() {
  let square = x => x * x
  let hello = () => 'Hello world'

  return hello() + ' ' + square(7)
}

结果

Если тело функции представляет множество выражений, а не просто одно выражение, как в примере выше, тогда можно опять же заключить все выражения в фигурные скобки:

let sum = (x: number, y: number) => {
  x *= 2
  return x + y
}

let result = sum(15, 35) // 65
console.log(result)

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

function mathOp(x: number, y: number, operation: (a: number, b: number) => number): number {
  let result = operation(x, y)
  return result
}
console.log(mathOp(10, 20, (x, y) => x + y)) // 30
console.log(mathOp(10, 20, (x, y) => x * y)) // 200

Функциональные типы

Добавим типы для функций add и myAdd:

function add(x: number, y: number): number {
  return x + y
}

let myAdd = function (x: number, y: number): number {
  return x + y
}

Как видно, мы добавили типы не только к параметрам, передаваемым в функцию, но и на возвращаемое функцией значение.

Теперь опишем полный тип этой функции:

let myAdd: (baseValue: number, increment: number) => number = function (x: number, y: number): number {
  return x + y
}

Функциональный тип состоит из двух частей: типов аргументов и типом возвращаемого значения. Тип возвращаемого значения определяется после =>. В том случае, если функция не возвращает никакого значения, должно быть указано void.