Skip to main content

Типы функций

Как и в 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)

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

Live Editor
Result
Loading...

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

Live Editor
Result
Loading...

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

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.

Вопросы:

  1. Функции в TypeScript могут быть:
  • именованные и анонимные
  • архивные и распакованные
  • под Windows и MaC OS
  • типичные и не типичные
  1. Функция имеет тип как:
  • тип возвращаемого значения
  • целое число
  • только строка
  • возвращаемое значение
  1. Функции можно передавать в функцию вместо параметра:
  • Можно
  • Нельзя
  • Только в модуле
  • Только в Mac OS

Question

Для того чтобы понять насколько вы усвоили этот урок пройдите тест в мобильном приложении в нашей школы по этой теме.

Sumerian school

Ссылки:

  1. Статья "Тип функции и стрелочные функции", metanit.com
  2. Статья "Функции в языке TypeScript", medium.com
  3. Статья "Типы функций", typescript-lang.ru

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Dmitriy K.

📖

Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨

Become a Patron!