Toni_Dev 
20.05.2024 
0 
190 После того как мы углубились в базовые типы данных, переменные и интерфейсы в TypeScript, настало время рассмотреть еще один важный аспект этого языка программирования — функции. Функции играют ключевую роль в организации кода, обеспечивая его модульность, повторное использование и читаемость. TypeScript предоставляет разнообразные возможности для работы с функциями, включая строгую типизацию параметров и возвращаемых значений, поддержку необязательных и параметров по умолчанию, а также возможность определения типов функций и использования функций высшего порядка.
В этой статье мы рассмотрим основные аспекты функций в TypeScript, начиная с их определения и заканчивая более продвинутыми темами, такими как контекст выполнения функций и функции высшего порядка. Мы также рассмотрим реальные примеры использования каждого концепта, чтобы лучше понять их применение на практике. Давайте начнем с обсуждения основ синтаксиса функций в TypeScript.
Объявление функции в TypeScript
В TypeScript, как и в JavaScript, функции являются важной частью. Они помогают нам организовывать код и делают его более читабельным и удобным для поддержки. Функция в TypeScript может быть объявлена несколькими способами: через ключевое слово function, как анонимная функция, или как стрелочная функция.
Самый простой способ объявить функцию — использовать ключевое слово function. Вот базовый пример функции, которая добавляет элемент в список покупок:
function addItem(item: string, list: string[]): string[] {
list.push(item);
return list;
}
let shoppingList: string[] = [];
shoppingList = addItem('Apples', shoppingList);
console.log(shoppingList); // ['Apples']Здесь мы объявили функцию addItem, которая принимает два параметра: item (строка) и list (массив строк). Функция добавляет item в list и возвращает обновленный список.
Анонимные функции и функции-выражения
TypeScript также поддерживает анонимные функции (функции без имени) и функции-выражения. Это удобно, когда нам нужна функция для одноразового использования или когда мы хотим присвоить функцию переменной. Вот пример:
let addItem = function(item: string, list: string[]): string[] {
list.push(item);
return list;
};
let shoppingList: string[] = [];
shoppingList = addItem('Bananas', shoppingList);
console.log(shoppingList); // ['Bananas']Стрелочные функции
Стрелочные функции — это более современный и лаконичный способ объявления функций. Они особенно полезны в качестве колбэков или методов, и часто делают код более читабельным:
let addItem = (item: string, list: string[]): string[] => {
list.push(item);
return list;
};
let shoppingList: string[] = [];
shoppingList = addItem('Oranges', shoppingList);
console.log(shoppingList); // ['Oranges']Параметры функции в TypeScript
Теперь давайте углубимся в более сложные аспекты, такие как параметры по умолчанию, опциональные параметры и перегрузка функций. Эти возможности позволяют писать более гибкий и универсальный код.
Параметры по умолчанию
В TypeScript мы можем задавать значения по умолчанию для параметров функций. Это полезно, когда мы хотим, чтобы функция имела некоторые стандартные значения, если при вызове эти параметры не указаны. Вот пример:
function addItem(item: string, list: string[] = []): string[] {
list.push(item);
return list;
}
// Если не передать второй параметр, будет использоваться пустой массив по умолчанию.
let shoppingList = addItem('Milk');
console.log(shoppingList); // ['Milk']В этом примере, если list не передан в функцию, используется пустой массив по умолчанию.
Опциональные параметры
Иногда не все параметры функции должны быть обязательными. В TypeScript мы можем делать параметры опциональными, добавляя знак вопроса ? после имени параметра. Опциональные параметры должны идти после обязательных:
function addItem(item: string, list?: string[]): string[] {
if (!list) {
list = [];
}
list.push(item);
return list;
}
let shoppingList = addItem('Bread');
console.log(shoppingList); // ['Bread']В этом примере list является опциональным параметром. Если он не передан, функция создает новый пустой массив.
Перегрузка функций
Перегрузка функций позволяет объявлять несколько сигнатур для одной и той же функции, что делает её более универсальной. Давайте рассмотрим пример, где функция может принимать разные наборы параметров:
function addItem(item: string, list: string[]): string[];
function addItem(item: string, count: number, list: string[]): string[];
function addItem(item: string, param2: any, list?: string[]): string[] {
if (typeof param2 === 'number') {
for (let i = 0; i < param2; i++) {
list!.push(item);
}
return list!;
} else {
param2.push(item);
return param2;
}
}
let shoppingList: string[] = [];
shoppingList = addItem('Eggs', shoppingList);
console.log(shoppingList); // ['Eggs']
shoppingList = addItem('Banana', 3, shoppingList);
console.log(shoppingList); // ['Eggs', 'Banana', 'Banana', 'Banana']В этом примере функция addItem перегружена так, что она может принимать либо элемент и массив, либо элемент, количество и массив. В зависимости от типа второго параметра, функция ведет себя по-разному.
Замыкания в TypeScript
Замыкание – это функция, которая «замыкает» (запоминает) контекст, в котором была создана, даже после того, как этот контекст исчез. Это позволяет функции иметь доступ к переменным из внешнего контекста даже после завершения выполнения внешней функции.
Рассмотрим пример функции для создания списка покупок, где мы используем замыкание:
function createShoppingList() {
let list: string[] = [];
return {
addItem(item: string) {
list.push(item);
console.log(`${item} added to the shopping list.`);
},
getList() {
return list;
}
};
}
let myList = createShoppingList();
myList.addItem('Cheese');
myList.addItem('Tomatoes');
console.log(myList.getList()); // ['Cheese', 'Tomatoes']В этом примере функция createShoppingList возвращает объект с двумя методами: addItem и getList. Эти методы имеют доступ к переменной list благодаря замыканию, даже после завершения выполнения createShoppingList.
Функции высшего порядка
Функции высшего порядка – это функции, которые принимают другие функции в качестве аргументов или возвращают функции в качестве результатов. Они являются мощным инструментом для создания абстракций и повторно используемого кода.
Рассмотрим пример, где мы создаем функцию высшего порядка для фильтрации списка покупок:
type FilterFunction = (item: string) => boolean;
function filterList(list: string[], filter: FilterFunction): string[] {
return list.filter(filter);
}
let shoppingList: string[] = ['Milk', 'Bread', 'Butter', 'Cheese', 'Tomatoes'];
// Фильтр для поиска продуктов, содержащих букву 'e'
let filteredList = filterList(shoppingList, (item) => item.includes('e'));
console.log(filteredList); // ['Cheese', 'Tomatoes']Здесь функция filterList принимает массив строк и функцию-фильтр в качестве аргументов. Она возвращает новый массив, содержащий только те элементы, которые соответствуют условию фильтра.
Контексты вызова функций
В JavaScript и TypeScript контекст вызова функции определяется значением this. Важно понимать, как this работает, особенно при работе с методами объектов и в сложных структурах.
Рассмотрим пример:
let shoppingList = {
items: ['Apples', 'Bananas', 'Oranges'],
printItems() {
this.items.forEach(function (item) {
console.log(item);
});
}
};
shoppingList.printItems(); // 'Apples', 'Bananas', 'Oranges'В этом примере метод printItems использует this для доступа к массиву items. Внутри функции обратного вызова forEach, this по умолчанию не будет ссылаться на объект shoppingList. Мы можем исправить это, используя стрелочную функцию, которая не имеет собственного значения this, а использует значение this из внешней функции:
let shoppingList = {
items: ['Apples', 'Bananas', 'Oranges'],
printItems() {
this.items.forEach((item) => {
console.log(item);
});
}
};
shoppingList.printItems(); // 'Apples', 'Bananas', 'Oranges'Использование стрелочной функции гарантирует, что this внутри функции обратного вызова forEach будет ссылаться на объект shoppingList.
