4.1 Типы параметров функции
В TypeScript можно явно указывать типы для параметров и возвращаемых значений в функциях. Это позволяет улучшить надежность и предсказуемость кода, а также сделать его более понятным и легким для сопровождения.
Объявление типов для параметров функции
В TypeScript вы можете явно указывать типы для параметров функции. Это позволяет компилятору проверять, что функции вызываются с правильными типами аргументов.
Синтаксис
Для указания типа параметра добавьте двоеточие ":" после имени параметра, за которым следует тип.
Пример:
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('Alice'); // Корректный вызов
greet(42); // Ошибка компиляции: Argument of type 'number' is not assignable to parameter of type 'string'.
function greet(name: string): void {
console.log(`Hello, ${name}!`);
}
greet('Alice'); // Корректный вызов
greet(42); // Ошибка компиляции: Argument of type 'number' is not assignable to parameter of type 'string'.
В этом примере параметр name функции greet имеет тип string. Попытка передать аргумент другого типа (например, число) приведет к ошибке компиляции.
Типизация нескольких параметров
Функции могут иметь несколько параметров, каждый из которых может иметь свой тип.
Пример:
function add(a, b) {
return a + b;
}
console.log(add(5, 10)); // Вывод: 15
console.log(add(5, '10')); // Ошибка компиляции: Argument of type 'string' is not assignable to parameter of type 'number'.
function add(a: number, b: number): number {
return a + b;
}
console.log(add(5, 10)); // Вывод: 15
console.log(add(5, '10')); // Ошибка компиляции: Argument of type 'string' is not assignable to parameter of type 'number'.
В этом примере функция add принимает два параметра a и b типа number и возвращает значение типа number.
В TypeScript вы также можете явно указывать тип возвращаемого значения функции. Это помогает компилятору проверять, что функция возвращает значение правильного типа.
Синтаксис
Для указания типа возвращаемого значения добавьте двоеточие ":" после списка параметров функции, за которым следует тип возвращаемого значения.
Пример:
"use strict";
function multiply(a, b) {
return a * b;
}
let result = multiply(3, 4); // Корректный вызов
console.log(result); // Вывод: 12
function multiply(a: number, b: number): number {
return a * b;
}
let result: number = multiply(3, 4); // Корректный вызов
console.log(result); // Вывод: 12
В этом примере функция multiply возвращает значение типа number. Если функция не возвращает значение, вы можете использовать тип void.
Пример функции, не возвращающей значение:
"use strict";
function logMessage(message) {
console.log(message);
}
logMessage('This is a log message.');
function logMessage(message: string): void {
console.log(message);
}
logMessage('This is a log message.');
4.2 Функциональные типы
TypeScript позволяет определять типы для функций, что особенно полезно при использовании функций в качестве аргументов или возвращаемых значений других функций.
Объявление функциональных типов
Вы можете объявить функциональный тип, указав типы параметров и возвращаемого значения функции.
Пример:
"use strict";
let add = (a, b) => a + b;
let subtract = (a, b) => a - b;
console.log(add(10, 5)); // Вывод: 15
console.log(subtract(10, 5)); // Вывод: 5
type Operation = (a: number, b: number) => number;
let add: Operation = (a, b) => a + b;
let subtract: Operation = (a, b) => a - b;
console.log(add(10, 5)); // Вывод: 15
console.log(subtract(10, 5)); // Вывод: 5
В этом примере мы объявляем тип Operation, который описывает функции, принимающие два параметра типа number и возвращающие значение типа number. Затем мы создаем две функции add и subtract, которые соответствуют этому типу.
Типизация функций в объектах
Функции могут быть свойствами объектов, и TypeScript позволяет типизировать такие функции.
Пример:
"use strict";
let calculator = {
add(a, b) {
return a + b;
},
subtract(a, b) {
return a - b;
}
};
console.log(calculator.add(20, 10)); // Вывод: 30
console.log(calculator.subtract(20, 10)); // Вывод: 10
interface Calculator {
add(a: number, b: number): number;
subtract(a: number, b: number): number;
}
let calculator: Calculator = {
add(a, b) {
return a + b;
},
subtract(a, b) {
return a - b;
}
};
console.log(calculator.add(20, 10)); // Вывод: 30
console.log(calculator.subtract(20, 10)); // Вывод: 10
В этом примере интерфейс Calculator описывает объект, содержащий две функции: add и subtract. Объект calculator реализует этот интерфейс.
4.3 Продвинутая типизация параметров
Функции с параметрами по умолчанию
TypeScript поддерживает параметры функций со значениями по умолчанию. Значение по умолчанию задается через знак "=".
Пример:
"use strict";
function greet(name, greeting = 'Hello') {
console.log(`${greeting}, ${name}!`);
}
greet('Alice'); // Вывод: Hello, Alice!
greet('Bob', 'Hi'); // Вывод: Hi, Bob!
function greet(name: string, greeting: string = 'Hello'): void {
console.log(`${greeting}, ${name}!`);
}
greet('Alice'); // Вывод: Hello, Alice!
greet('Bob', 'Hi'); // Вывод: Hi, Bob!
В этом примере параметр greeting имеет значение по умолчанию 'Hello'. Если значение для этого параметра не указано при вызове функции, используется значение по умолчанию.
Функции с остаточными параметрами
Остаточные параметры позволяют функции принимать неопределенное количество аргументов. Остаточные параметры обозначаются через троеточие "..." перед именем параметра.
Пример:
"use strict";
function sum(...numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3)); // Вывод: 6
console.log(sum(1, 2, 3, 4, 5)); // Вывод: 15
function sum(...numbers: number[]): number {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3)); // Вывод: 6
console.log(sum(1, 2, 3, 4, 5)); // Вывод: 15
В этом примере функция sum принимает любое количество аргументов типа number и возвращает их сумму.
Перегрузка функций
TypeScript поддерживает перегрузку функций, что позволяет объявлять несколько сигнатур для одной функции. Это полезно, когда функция может принимать разные типы или количество аргументов.
Пример:
"use strict";
function format(value) {
if (typeof value === 'number') {
return value.toFixed(2);
}
else {
return value.toUpperCase();
}
}
console.log(format(123.456)); // Вывод: 123.46
console.log(format('hello')); // Вывод: HELLO
function format(value: string): string;
function format(value: number): string;
function format(value: string | number): string {
if (typeof value === 'number') {
return value.toFixed(2);
} else {
return value.toUpperCase();
}
}
console.log(format(123.456)); // Вывод: 123.46
console.log(format('hello')); // Вывод: HELLO
В этом примере функция format имеет две сигнатуры: одна для аргумента типа string, другая для аргумента типа number. Реализация функции обрабатывает оба типа аргументов.
4.4 Примеры
Теперь рассмотрим примеры использования функций в реальных проектах.
Пример функции для обработки данных:
"use strict";
function processData(data) {
return data.map(d => `ID: ${d.id}, Value: ${d.value}`);
}
let data = [
{ id: 1, value: 'First' },
{ id: 2, value: 'Second' }
];
let result = processData(data);
console.log(result); // Вывод: ["ID: 1, Value: First", "ID: 2, Value: Second"]
interface Data {
id: number;
value: string;
}
function processData(data: Data[]): string[] {
return data.map(d => `ID: ${d.id}, Value: ${d.value}`);
}
let data: Data[] = [
{ id: 1, value: 'First' },
{ id: 2, value: 'Second' }
];
let result: string[] = processData(data);
console.log(result); // Вывод: ["ID: 1, Value: First", "ID: 2, Value: Second"]
В этом примере функция processData принимает массив объектов типа Data и возвращает массив строк.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ