JS Tower
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); // 5

Callback функции

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

Проверь себя

  1. Как сделать параметр опциональным?
  2. Как типизировать callback?
  3. Что такое перегрузка функций?