Типы, объекты и функции

Как описывать ожидаемые значения, выводить типы и проверять варианты.

Тип отвечает на вопрос «какие значения здесь допустимы?». В TypeScript string означает строку, number – число, boolean – true или false. Это имена типов, а не значения: строки в коде по-прежнему пишут в кавычках, например "Анна".

TypeScript часто сам определяет тип по первому значению. Это называется выводом типа:

main.ts

let userName = "Анна"; // TypeScript понимает: string.
let score = 0; // TypeScript понимает: number.
 
score = 10;
score = "десять"; // Ошибка: переменная уже имеет тип number.

Тип можно указать явно, когда так яснее:

main.ts

function calculateArea(width: number, height: number): number {
  return width * height;
}

После двоеточия у параметра написан его тип, а после скобок – тип результата. Часто TypeScript может вывести тип результата сам, но явная запись полезна на важных границах программы.

Сначала прочитайте функцию как обычный JavaScript: она получает ширину и высоту, умножает их и возвращает площадь. Затем прочитайте подписи типов: оба входа должны быть числами, результат тоже число. При вызове calculateArea("10", 5) редактор предупредит о строке еще до запуска.

Описываем объект

main.ts

type Product = {
  name: string;
  price: number;
  inStock: boolean;
};
 
const notebook: Product = {
  name: "Блокнот",
  price: 250,
  inStock: true,
};

Product задаёт форму объекта: какие свойства нужны и какие значения в них допустимы. Если пропустить price или записать туда строку, редактор покажет ошибку.

type Product – имя для описания данных, а не команда создания товара. Для каждого нового товара создают отдельный объект; одно описание Product можно использовать многократно. Массив товаров записывают как Product[]:

main.ts

const products: Product[] = [
  notebook,
  { name: "Ручка", price: 80, inStock: false },
];

Если свойство действительно может отсутствовать, добавьте ? после его имени. Без вопросительного знака отсутствие поля – ошибка:

main.ts

type ProductCard = {
  name: string;
  description?: string;
};

Добавьте функцию после объявления ProductCard из предыдущего примера. Перед использованием необязательного description нужно учесть его отсутствие:

main.ts

function describeCard(card: ProductCard): string {
  return card.description ?? "Без описания";
}

Оператор ?? берет значение справа, только если слева null или undefined. В этом примере необязательное свойство description может оказаться undefined; пустая строка при этом останется пустой строкой.

Когда допустимы разные варианты

Иногда значение действительно бывает одного из нескольких типов. Для этого записывают объединение типов через |:

main.ts

function formatCode(code: string | number): string {
  if (typeof code === "number") {
    return `Код ${code.toFixed(0)}`;
  }
 
  return code.toUpperCase();
}

Внутри if TypeScript понял, что code – число, поэтому разрешил toFixed. После проверки остаётся строковый вариант. Такое уточнение типа по проверке значения называется сужением типа.

Не ставьте any, чтобы просто убрать красное подчёркивание: с any TypeScript перестаёт проверять операции с этим значением. Тип unknown тоже означает «пока неизвестно», но заставляет сначала проверить значение:

main.ts

function formatInput(value: unknown): string {
  if (typeof value === "string") {
    return value.trim();
  }
 
  return "Ожидали текст";
}

Без проверки typeof вызвать value.trim() нельзя: у числа или объекта такого метода может не быть. Проверку реальных данных формы через Zod разберем в Next-03.

Справочник с упражнениями: основы типов и сужение типов.