JavaScript & TypeScriptМодуль 7: Основы TypeScript
Функции
Типизация функций в TypeScript
Цель урока
В этом уроке ты научишься:
- Типизировать параметры и возвращаемое значение
- Использовать опциональные параметры
- Создавать типы функций
Базовая типизация
function add(a: number, b: number): number {
return a + b;
}
// Стрелочная функция
const multiply = (a: number, b: number): number => {
return a * b;
};
// Краткая форма
const divide = (a: number, b: number): number => a / b;Вывод типа возврата
// TypeScript сам определит тип возврата
function add(a: number, b: number) {
return a + b; // тип: number
}
// Но лучше указывать явно
function add(a: number, b: number): number {
return a + b;
}Опциональные параметры
function greet(name: string, greeting?: string): string {
return (greeting || "Привет") + ", " + name + "!";
}
greet("Иван"); // "Привет, Иван!"
greet("Иван", "Здравствуй"); // "Здравствуй, Иван!"Параметры по умолчанию
function greet(name: string, greeting: string = "Привет"): string {
return greeting + ", " + name + "!";
}
greet("Иван"); // "Привет, Иван!"
greet("Иван", "Здравствуй"); // "Здравствуй, Иван!"Rest параметры
function sum(...numbers: number[]): number {
return numbers.reduce((acc, n) => acc + n, 0);
}
sum(1, 2, 3); // 6
sum(1, 2, 3, 4, 5); // 15Тип функции
// Тип функции
type MathOperation = (a: number, b: number) => number;
const add: MathOperation = (a, b) => a + b;
const subtract: MathOperation = (a, b) => a - b;
// Как параметр
function calculate(a: number, b: number, operation: MathOperation): number {
return operation(a, b);
}
calculate(10, 5, add); // 15
calculate(10, 5, subtract); // 5Callback функции
function fetchData(callback: (data: string) => void): void {
setTimeout(() => {
callback("Данные загружены");
}, 1000);
}
fetchData((data) => {
console.log(data);
});Перегрузка функций
// Сигнатуры
function format(value: string): string;
function format(value: number): string;
function format(value: Date): string;
// Реализация
function format(value: string | number | Date): string {
if (typeof value === "string") {
return value.toUpperCase();
}
if (typeof value === "number") {
return value.toFixed(2);
}
return value.toISOString();
}
format("hello"); // "HELLO"
format(3.14159); // "3.14"
format(new Date()); // ISO строкаGeneric функции
function identity<T>(value: T): T {
return value;
}
let num = identity<number>(42); // тип: number
let str = identity<string>("hi"); // тип: string
let auto = identity(true); // тип: boolean (вывод)Практика
Задание 1: Базовая функция
Задача: Создай типизированную функцию.
Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
25
Задание 2: Тип функции
Задача: Создай тип для callback.
Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
Результат: 10
Задание 3: Rest параметры
Задача: Создай функцию с rest параметрами.
Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
9
Проверь себя
- Как сделать параметр опциональным?
- Как типизировать callback?
- Что такое перегрузка функций?