Интерфейсы и типы TypeScript: Полное руководство

Интерфейсы и псевдонимы типов в TypeScript служат схожим целям при определении форм и структур, но они обладают различными возможностями и поведением. Интерфейсы могут расширяться, поддерживают объединение объявлений и в основном предназначены для объектных форм, в то время как псевдонимы типов предлагают большую гибкость для представления примитивов, объединений, кортежей и других сложных типов без возможности объединения.

Содержание

• Основные синтаксические различия
• Объединение объявлений
• Расширение и реализация
• Возможности типов
• Наилучшие случаи использования
• Рассмотрения производительности

Основные синтаксические различия

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

// Синтаксис интерфейса
interface User {
    id: number;
    name: string;
    email: string;
}

// Синтаксис псевдонима типа
type User = {
    id: number;
    name: string;
    email: string;
};

Ключевые синтаксические различия:

• Интерфейсы используют ключевое слово interface и являются более декларативными
• Псевдонимы типов используют ключевое слово type и могут представлять гораздо более широкий диапазон типов
• Оба поддерживают необязательные свойства (?), свойства только для чтения (readonly) и сигнатуры методов

// Оба поддерживают одинаковые объектные возможности
interface Person {
    readonly id: number; // свойство только для чтения
    name: string;
    age?: number; // необязательное свойство
    greet(): string; // сигнатура метода
}

type Person = {
    readonly id: number;
    name: string;
    age?: number;
    greet(): string;
};

Интерфейсы также могут быть именованными или анонимными, в то время как псевдонимы типов всегда являются именованными объявлениями.

Объединение объявлений

Это одно из наиболее значительных различий между интерфейсами и псевдонимами типов.

Интерфейсы поддерживают объединение объявлений - несколько объявлений интерфейса с одним и тем же именем автоматически объединяются в один интерфейс:

interface User {
    id: number;
    name: string;
}

interface User {
    email: string;
}

// Результирующий интерфейс имеет все свойства
const user: User = {
    id: 1,
    name: "John",
    email: "john@example.com" // Это работает благодаря объединению объявлений
};

Псевдонимы типов НЕ поддерживают объединение объявлений - попытка объявить несколько псевдонимов типов с одним и тем же именем приведет к ошибке компиляции:

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

// Ошибка: Дублирующий идентификатор 'User'
type User = {
    email: string;
};

Расширение и реализация

Интерфейсы предоставляют возможности наследования, которые не могут быть сопоставлены с псевдонимами типов.

Расширение интерфейса

Интерфейсы могут расширять другие интерфейсы с помощью ключевого слова extends:

interface Animal {
    name: string;
}

interface Dog extends Animal {
    breed: string;
    bark(): void;
}

const dog: Dog = {
    name: "Rex",
    breed: "Немецкая овчарка",
    bark() { console.log("Гав!"); }
};

Расширение нескольких интерфейсов

Один интерфейс может расширять несколько интерфейсов:

interface Walkable {
    walk(): void;
}

interface Swimmable {
    swim(): void;
}

interface Amphibious extends Walkable, Swimmable {
    name: string;
}

Расширение псевдонима типа

Псевдонимы типов могут достичь схожей функциональности с использованием типов пересечения:

type Animal = {
    name: string;
};

type Dog = Animal & {
    breed: string;
    bark(): void;
};

Реализация в классе

Только интерфейсы могут быть реализованы классами:

interface Serializable {
    serialize(): string;
}

class User implements Serializable {
    constructor(public id: number, public name: string) {}
    
    serialize(): string {
        return JSON.stringify({ id: this.id, name: this.name });
    }
}

Псевдонимы типов не могут быть реализованы классами, что делает интерфейсы незаменимыми для объектно-ориентированных шаблонов программирования в TypeScript.

Возможности типов

Эта область показывает наиболее заметное различие между интерфейсами и псевдонимами типов.

Что могут представлять интерфейсы

Интерфейсы в основном предназначены для объектных форм и структур классов:

// Объектные формы
interface Point {
    x: number;
    y: number;
}

// Структуры классов
interface Serializable {
    serialize(): string;
}

// Типы функций (менее распространено)
interface Callback {
    (error: Error | null, data: string): void;
}

Что могут представлять псевдонимы типов

Псевдонимы типов предлагают значительно большую гибкость и могут представлять почти любой тип TypeScript:

// Примитивы
type ID = string | number;

// Объединения
type Result = 'success' | 'error' | 'pending';

// Кортежи
type Coordinates = [number, number, number];

// Сопоставленные типы
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

// Условные типы
type ExtractType<T> = T extends string ? 'string' : 'not string';

// Шаблонные литеральные типы
type EventName = `on${'Click' | 'Hover' | 'Focus'}`;

// Сложные комбинации
type Complex = string | number[] | { data: any } | (() => void);

Ограничения обобщенных типов

И интерфейсы, и псевдонимы типов поддерживают обобщенные типы, но с разным синтаксисом:

// Обобщенные интерфейсы
interface Repository<T> {
    findById(id: string): T | null;
    save(entity: T): void;
}

// Обобщенные псевдонимы типов
type Repository<T> = {
    findById(id: string): T | null;
    save(entity: T): void;
};

Наилучшие случаи использования

Когда использовать интерфейсы

Выбирайте интерфейсы, когда:

1. Определяете объектные формы для API, моделей данных или объектов конфигурации
2. Создаете контракты для реализации классами
3. Нужно расширение через наследование
4. Работаете со сторонними библиотеками, которые ожидают определения интерфейсов
5. Требуется объединение объявлений для расширения существующих типов
6. Пишете объектно-ориентированный код с иерархиями классов

// Правильное использование интерфейса
interface ApiResponse {
    success: boolean;
    data: any;
    timestamp: Date;
}

// Реализация в классе
class ApiClient implements ApiResponse {
    // ... реализация
}

Когда использовать псевдонимы типов

Выбирайте псевдонимы типов, когда:

1. Представляете примитивы, объединения, кортежи или другие не-объектные типы
2. Создаете сложные композиции типов с использованием типов пересечения или объединения
3. Нужно определить условные или сопоставленные типы
4. Работаете с шаблонными литеральными типами
5. Хотите предотвратить непреднамеренное объединение типов
6. Создаете утилитарные типы или помощники типов

// Правильное использование псевдонима типа
type UserId = string | number;
type Status = 'active' | 'inactive' | 'pending';
type Coordinates = [number, number];
type ApiResponse<T> = T extends 'success' ? SuccessResponse : ErrorResponse;

Гибридный подход

Многие TypeScript-проекты стратегически используют оба подхода:

// Используем интерфейсы для объектных форм
interface User {
    id: string;
    name: string;
    email: string;
}

// Используем псевдонимы типов для композиций
type UserProfile = User & {
    preferences: UserPreferences;
    settings: UserSettings;
};

// Псевдоним типа для сложной логики
type FilterableUser = User & {
    matches(filter: UserFilter): boolean;
};

Рассмотрения производительности

Производительность компиляции

В большинстве приложений разница в производительности между интерфейсами и псевдонимами типов незначительна. Однако есть некоторые моменты, которые стоит учитывать:

• Интерфейсы с объединением объявлений иногда могут приводить к более крупным определениям типов
• Сложные псевдонимы типов с глубокой вложенностью или условными типами могут компилироваться медленнее
• Обобщенные интерфейсы могут иметь последствия для производительности в крупных кодовых базах

Размер пакета

Во время выполнения оба интерфейса и псевдонимы типов удаляются из скомпилированного JavaScript. Выбор между ними не влияет на размер пакета.

Производительность проверки типов

В очень крупных кодовых базах интерфейсы с обширным объединением объявлений могут немного влиять на производительность проверки типов по сравнению с псевдонимами типов.

Инструменты и поддержка IDE

Современные инструменты TypeScript и IDE очень хорошо обрабатывают как интерфейсы, так и псевдонимы типов. Однако некоторые расширенные функции, такие как “Перейти к определению”, могут работать немного по-разному для каждого.

Заключение

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

1. Интерфейсы excel в объектно-ориентированных шаблонах - они поддерживают расширение, реализацию и объединение объявлений, что делает их идеальными для определения контрактов и иерархий классов.

2. Псевдонимы типов предлагают большую гибкость - они могут представлять примитивы, объединения, кортежи и сложные композиции типов, которые интерфейсы не могут обрабатывать.

3. Объединение объявлений - самый большой отличительный фактор - интерфейсы объединяются автоматически, в то время как псевдонимы типов отклоняют дублирующиеся объявления.

4. Оба удаляются во время выполнения - ваш выбор не влияет на вывод JavaScript или размер пакета.

Практические рекомендации

• Начинайте с интерфейсов для большинства определений объектов, особенно при работе с классами
• Используйте псевдонимы типов для сложных типов, объединений, кортежей и утилитарных типов
• Избегайте ненужного смешивания подходов - будьте последовательны в своей кодовой базе
• Используйте оба подхода по мере необходимости - интерфейсы для форм, псевдонимы типов для композиций

Когда сомневаетесь

Если вы не уверены, что выбрать, рассмотрите эти вопросы:

• Мне нужно расширить это или реализовать в классе? → Используйте интерфейс
• Я определяю сложную композицию типов? → Используйте псевдоним типа
• Я хочу, чтобы несколько объявлений объединялись автоматически? → Используйте интерфейс
• Я представляю примитив, объединение или кортеж? → Используйте псевдоним типа

Источники

1. Документация TypeScript - Интерфейсы
2. Документация TypeScript - Псевдонимы типов
3. TypeScript Deep Dive - Интерфейсы против типов
4. Команда Microsoft TypeScript - Лучшие практики
5. Официальный блог TypeScript - Расширенные типы