Тип функции и стрелочные функции

Тип функции

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

(параметр1: тип, параметр2: тип,...параметрN: тип) => тип_результата;

В скобках идет перечисление через запятую параметров и их типов. После списка параметров через оператор => указывается тип возвращаемого функцией результата.

Например, возьмем следующую функцию:

function hello (){
    console.log("Hello TypeScript");
};

Эта функция не имеет параметров и ничего не возвращает. Если функция ничего не возвращает, то фактически тип ее возвращаемого значения - void. Таким образом, функция hello имеет тип

()=>void;

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

function hello (){
    console.log("Hello TypeScript");
};

const message: ()=>void = hello;
message();

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

Другой пример - функция, которая принимает параметры и возвращает некоторый результат:

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 sum (x: number, y: number): number {
    return x + y;
};
function multiply (a: number, b: number): number {
    return a * b;
};
 
function mathOp(x: number, y: number, op: (a: number, b: number) => number): number{
 
    return op(x, y);
}
console.log(mathOp(10, 20, sum)); // 30 
console.log(mathOp(10, 20, multiply)); // 200 

Здесь в функции mathOp() третий параметр представляет функцию, которая принимает два параметра типа number и возвращает значение типа number. Соответственно при вызове функции mathOp() мы можем передать в нее, например, определенные здесь функции sum() или multiply(), которые соответствуют типу (a: number, b: number) => number

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

type Operation = (a: number, b: number) => number;

function mathOp(x: number, y: number, op: Operation): number{
 
    return op(x, y);
}
const sum: Operation = function(x: number, y: number): number {
    return x + y;
};

console.log(mathOp(10, 20, sum)); // 30

В данном случае тип (a: number, b: number) => number проецируется на псевдоним Operation, который может использоваться для определения переменных и параметров.

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

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

const sum = (x: number, y: number) => x + y;

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

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

const sum = (x, y) => x + y;
 
const result = sum(15, 35); // 50
console.log(result);

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

const square = x => x * x;
const hello = () => "hello world"
 
console.log(square(5));	// 25
console.log(hello());	// hello world

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

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

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

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

function mathOp(x: number, y: number, operation: (a: number, b: number) => number): number{

    const 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