Что такое type в TypeScript?

Type в TypeScript

type — это способ определения пользовательского типа данных в TypeScript. Это ключевое слово позволяет создавать новые типы, объединять существующие типы и описывать структуру данных, которые вы используете в приложении.

Основное определение

type создает alias (псевдоним) для типа или определяет новый тип через объединение (union), пересечение (intersection) или другие операции.

// Простой type alias
type Age = number;
type Name = string;

const userAge: Age = 25; // правильно
const userName: Name = "Иван"; // правильно

Основные использования

1. Type для объектов (похоже на interface)

type User = {
  id: number;
  name: string;
  email: string;
  age?: number; // опциональное поле
};

const user: User = {
  id: 1,
  name: "Иван",
  email: "ivan@mail.com"
};

2. Type для объединения типов (Union types)

type Status = "active" | "inactive" | "pending";
type Result = string | number | boolean;

const userStatus: Status = "active"; // правильно
const userStatus2: Status = "deleted"; // ошибка!

const result: Result = "успех"; // правильно
const result2: Result = 42; // правильно

3. Type для пересечения типов (Intersection types)

type Person = {
  name: string;
  age: number;
};

type Employee = {
  id: number;
  salary: number;
};

// Новый тип содержит все свойства обоих типов
type EmployeePerson = Person & Employee;

const emp: EmployeePerson = {
  name: "Мария",
  age: 30,
  id: 101,
  salary: 100000
};

4. Type для функций

type Callback = (data: string) => void;
type Sum = (a: number, b: number) => number;

const logMessage: Callback = (data) => {
  console.log(data);
};

const add: Sum = (a, b) => a + b;

const result = add(5, 3); // 8

5. Generics (обобщенные типы)

// Type параметр, похожий на шаблон
type Box<T> = {
  value: T;
  getValue: () => T;
};

const stringBox: Box<string> = {
  value: "привет",
  getValue: () => "привет"
};

const numberBox: Box<number> = {
  value: 42,
  getValue: () => 42
};

6. Условные типы (Conditional types)

type IsString<T> = T extends string ? true : false;

type A = IsString<"привет">; // true
type B = IsString<42>; // false

Type vs Interface - Отличия

Сходства

// Оба определяют структуру объекта
type UserType = { id: number; name: string };
interface UserInterface { id: number; name: string }

const user1: UserType = { id: 1, name: "Иван" };
const user2: UserInterface = { id: 1, name: "Иван" };

Различия

// 1. Type может быть union
type Status = "active" | "inactive";
// interface не может быть union
// interface Status = "active" | "inactive"; // ошибка!

// 2. Type может быть пересечением
type Combined = Person & Employee; // правильно
// interface Combined extends Person, Employee {} // альтернатива, но другой синтаксис

// 3. Interface можно объявлять несколько раз (merging)
interface User { name: string; }
interface User { age: number; } // объединится с первым
// Type нельзя объявлять дважды
// type User = { name: string; }
// type User = { age: number; } // ошибка!

// 4. Type лучше для alias простых типов
type Age = number;
type Callback = (x: string) => void;

Практические примеры

Пример 1: Тип ответа API

type ApiResponse<T> = {
  status: "success" | "error";
  data?: T;
  error?: string;
};

type User = {
  id: number;
  name: string;
  email: string;
};

const response: ApiResponse<User> = {
  status: "success",
  data: {
    id: 1,
    name: "Иван",
    email: "ivan@mail.com"
  }
};

Пример 2: Тип для обработчика событий

type EventHandler<T> = (event: T) => void;
type ButtonEvent = React.MouseEvent<HTMLButtonElement>;

const handleClick: EventHandler<ButtonEvent> = (event) => {
  console.log("Кнопка нажата", event.currentTarget);
};

Пример 3: Утилита для извлечения ключей

type ExtractKeys<T> = keyof T; // получить ключи объекта

type User = {
  id: number;
  name: string;
  email: string;
};

type UserKeys = ExtractKeys<User>; // "id" | "name" | "email"

const key: UserKeys = "name"; // правильно
const wrongKey: UserKeys = "age"; // ошибка!

Пример 4: Создание Readonly типа

type ReadonlyUser = Readonly<{
  id: number;
  name: string;
}>;

const user: ReadonlyUser = { id: 1, name: "Иван" };
// user.name = "Петр"; // ошибка: не можно изменять

Когда использовать Type

1. Union типы — type Status = "active" | "inactive"
2. Простые alias — type Id = string | number
3. Функции — type Callback = () => void
4. Обобщенные типы — type Box<T> = { value: T }
5. Пересечения — type Admin = User & { role: "admin" }
6. Кортежи — type Tuple = [string, number, boolean]

Когда использовать Interface

1. Объекты с наследованием — расширяемые объекты
2. Декларативное слияние — когда нужно добавлять свойства
3. Классы — когда класс реализует интерфейс
4. Более читаемый синтаксис для сложных объектов

Ключевые выводы

• Type — это alias для типа данных в TypeScript
• Используйте type для union, пересечений и функций
• Используйте interface для определения контрактов объектов
• Обе конструкции работают с объектами, но interface более расширяемый
• Best practice: используйте type для большинства случаев в современном TypeScript