Function types

Like JavaScript, functions in TypeScript can be named or anonymous. This allows you to choose the most convenient approach for developing your application, whether it is building a list of functions in the API, or nesting one function within another. ...

Function type

Each function has a type, just like regular variables. A function type actually represents a combination of parameter types and return types. For example, take the following function:

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

It is of type (x: number, y: number) => number;, that is, it takes two number parameters and returns a value of type number. Parameter names in a function type do not have to match the names of a specific function. The return type is preceded by an equal sign with an arrow.

And just like defining variables of a specific type, you can define variables that have a function type:

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

That is, the variable op represents any function that takes two numbers and returns a number. For example:

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

Here, at the beginning, the variable op points to the functionsum.And accordingly, calling op (2, 4) will actually represent a call to sum (2, 4). And then op points to a function subtract.

Callback functions

A function type can be used like a variable type, but it can also be used to define the type of a parameter of another function:

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

Here, in the mathOp function, the third parameter is just a function that takes two parameters of type number and returns a number. In fact, this way we can pass callback functions, for example, when generating events when another function is triggered in response to some action.

Arrow functions

You can use arrow functions or arrow functions' to define functions in TypeScript. Arrow functions represent expressions like (parameters) => function body.` For example:

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

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

The parameter type can be omitted:

محرر مباشر

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
}

النتيجة

If the arrow function requires no parameters, empty parentheses are used. If only one parameter is passed, then the parentheses can be omitted:

محرر مباشر

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)
}

النتيجة

If the function body represents multiple expressions, rather than just one expression, as in the example above, then you can again enclose all expressions in curly braces:

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

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

Arrow functions can be passed to a function instead of a parameter, which is a function:

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

Functional types

Add types for functions add and myAdd:

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

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

As you can see, we added types not only to the parameters passed to the function, but also to the value returned by the function.

Now let's describe the full type of this function:

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

A functional type has two parts: the argument types and the return type. The return type is determined after =>. If the function does not return any value, it must be specified void.