Зачем использовать import type в TypeScript и чем он отличается от обычного import?

Что такое import type?

В TypeScript import type — это синтаксис, который позволяет импортировать только типы (интерфейсы, типы, классы как типы) без включения соответствующих значений в итоговый JavaScript-код. Обычный import импортирует как типы, так и значения, что может привести к ненужному коду в бандле.

Основные отличия

• Генерация кода: import type полностью удаляется при компиляции, тогда как обычный import оставляет код для значений.
• Tree shaking: Использование import type помогает инструментам сборки (например, Webpack) лучше оптимизировать бандл, удаляя неиспользуемые импорты.
• Безопасность: import type гарантирует, что вы не используете импортированный модуль как значение, что предотвращает случайные ошибки.

Пример кода

// types.ts
export interface User {
  name: string;
  age: number;
}

export function greet(user: User) {
  console.log(`Hello, ${user.name}`);
}

// app.ts
// Обычный import — импортирует и тип, и функцию
import { User, greet } from './types';

// import type — импортирует только тип
import type { User } from './types';

// Использование типа
const user: User = { name: 'Alice', age: 30 };
greet(user); // Функция greet должна быть импортирована отдельно

В этом примере import type { User } не добавит код в JavaScript, а import { greet } — добавит. Если бы мы использовали только import type для User, то функция greet не была бы доступна.

Когда применять

Используйте import type для всех импортов, которые нужны только для типов (интерфейсы, типы, типы классов). Это улучшает производительность сборки и уменьшает размер бандла, особенно в больших проектах с множеством типов.

Вывод: import type — это инструмент для оптимизации TypeScript-проектов, который помогает избежать ненужного кода в JavaScript и улучшает tree shaking. Применяйте его везде, где импортируете только типы, чтобы сделать код чище и эффективнее.