TS types: как работать с типами в TypeScript

Короткий ответ: ts types — это все способы описать данные в TypeScript. Типы помогают сказать: здесь строка, здесь число, здесь массив пользователей, здесь функция, а здесь значение может быть только "loading" или "success". TypeScript проверяет эти правила во время разработки и не меняет JavaScript-логику в браузере

Простые типы:

const name: string = "Dinar";
const age: number = 30;
const isActive: boolean = true;

Но в реальном коде чаще важны не отдельные переменные, а форма объектов, массивов и функций

Содержание

Массивы
Объекты
Optional поля
Union-типы
type и interface
Функции
any, unknown и почему не стоит спешить
Практическое правило
Частые ошибки
Самопроверка
Что почитать дальше по TypeScript

Массивы

const ids: number[] = [1, 2, 3];
const names: string[] = ["Anna", "Dinar"];

Можно записать через generic:

const ids: Array<number> = [1, 2, 3];

Оба варианта рабочие. В обычном коде number[] читается короче

Объекты

type User = {
  id: number;
  email: string;
  isAdmin: boolean;
};

const user: User = {
  id: 1,
  email: "dinar@example.com",
  isAdmin: false,
};

Если забыть email, TypeScript покажет ошибку. Если поставить id: "1" строкой, тоже покажет ошибку

Optional поля

type Article = {
  id: number;
  title: string;
  description?: string;
};

description?: string означает: поля может не быть. При чтении нужно учитывать undefined:

if (article.description) {
  console.log(article.description.toUpperCase());
}

Union-типы

Union описывает несколько допустимых вариантов:

type Status = "idle" | "loading" | "success" | "error";

let status: Status = "idle";
status = "success";

Такой тип полезен для статусов, ролей, режимов интерфейса и ограниченных наборов значений

type и interface

type:

type Product = {
  id: number;
  title: string;
};

interface:

interface Product {
  id: number;
  title: string;
}

Для формы объекта оба варианта подходят. type удобен для union и комбинирования, interface часто используют для публичных объектных контрактов и props

Функции

function sum(a: number, b: number): number {
  return a + b;
}

Тип функции можно вынести:

type Formatter = (value: number) => string;

const formatPrice: Formatter = (value) => `${value} руб.`;

Это полезно, когда функция передается аргументом или хранится в объекте

any, unknown и почему не стоит спешить

any выключает проверку:

let value: any = 123;
value.toUpperCase();

TypeScript не ругнется, но в runtime код может упасть

unknown безопаснее:

let value: unknown = 123;

if (typeof value === "string") {
  console.log(value.toUpperCase());
}

Если данные пришли извне, например из API, лучше сначала проверить форму, а потом использовать

Практическое правило

Начинайте с простого:

primitive -> array -> object -> union -> function type

Не нужно сразу строить сложные generic-типы. Хорошая типизация отвечает на вопрос: "какие данные здесь допустимы и что код может с ними делать?"

Частые ошибки

Первая ошибка — использовать String, Number, Boolean вместо string, number, boolean

Вторая ошибка — ставить any, чтобы заглушить каждую ошибку

Третья ошибка — описывать объект слишком широко: { [key: string]: any }

Четвертая ошибка — не учитывать optional-поля

Пятая ошибка — дублировать одинаковые типы в разных файлах вместо одного общего типа

Самопроверка

Опишите тип Order с полями id, status, total и массивом товаров. Ограничьте status значениями "new" | "paid" | "cancelled". Затем попробуйте присвоить "done" и убедитесь, что TypeScript показывает ошибку

Что почитать дальше по TypeScript

Если нужен общий маршрут по теме, откройте рубрику TypeScript. Для соседних задач пригодятся эти разборы: