Перейти к содержимому
JS/TS Interview Tutorial

import type / export type

Тонкий, но важный набор флагов. Под isolatedModules и verbatimModuleSyntax bundler/SWC/esbuild обязательно требуют, чтобы типы импортировались через import type. На интервью спросят, зачем эти флаги и почему «лишние» runtime-импорты типов ломают tree shaking.

Type-only imports/exports:

// Чистый тип — runtime-кода нет
import type { User } from './user';


// Смешанный импорт: можно пометить отдельные имена как type
import { type User as U, createUser } from './user';


// Type-only export
export type { User };

Что делают флаги:

tsconfig.json
{
  "compilerOptions": {
    "isolatedModules": true,        // запрещает фичи, не транспилируемые по одному файлу
    "verbatimModuleSyntax": true    // TS 5.0+: оставляет import/export как написаны
  }
}


// Под verbatimModuleSyntax:
//  - import { User } — компилируется в runtime-импорт (даже если User это только type)
//  - import type { User } — стирается из выхода

Почему это важно для бандлеров:

// Без verbatimModuleSyntax TS «угадывает» и удаляет неиспользуемые импорты типов.
// esbuild/SWC/Babel так делать не умеют — они один файл за раз.
// Если не пометить тип как `import type`, бандлер оставит ненужный runtime-импорт,
// что мешает tree shaking и может тащить side effects.

Итог: Под verbatimModuleSyntax/isolatedModules всегда используй import type для типов — это требование bundler’ов и условие предсказуемого вывода.