Встроенная поддержка TypeScript без настройки

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

Vite не выполняет полную типизацию кода во время разработки. Вместо этого используется стратегия трансформации, при которой TypeScript-код преобразуется в JavaScript с удалением типов.

Ключевой момент:

  • TypeScript в Vite не компилируется в классическом смысле
  • выполняется только синтаксическое преобразование

Это означает, что такие конструкции как интерфейсы, типы, generics полностью исчезают на этапе обработки, но при этом не влияют на выполнение кода.

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

const user: User = {
  id: 1,
  name: 'Alex'
};

После обработки в Vite:

const user = {
  id: 1,
  name: 'Alex'
};

Типы удаляются, но структура кода остаётся неизменной.

Отсутствие обязательной настройки tsconfig.json

Vite не требует обязательного наличия tsconfig.json для запуска проекта. Однако при его отсутствии TypeScript-функциональность будет ограничена только трансформацией синтаксиса без учёта пользовательских правил компиляции.

При наличии tsconfig.json Vite автоматически его считывает и использует как источник конфигурации для:

  • путей модулей
  • алиасов
  • базовых настроек языка
  • strict-режимов
  • параметров совместимости
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Vite интегрирует эти параметры в систему резолвинга модулей без необходимости дополнительных плагинов.

Роль esbuild в обработке TypeScript

В основе обработки TypeScript в Vite лежит esbuild. Он используется как сверхбыстрый трансформер, написанный на Go, и отвечает за:

  • удаление TypeScript-типов
  • преобразование современного синтаксиса
  • поддержку JSX/TSX
  • быстрый HMR в разработке

esbuild не выполняет проверку типов, что принципиально важно для архитектуры Vite.

Проверка типов как отдельный процесс

Так как Vite не выполняет type-checking, проверка типов отделяется от процесса сборки. Обычно она выполняется через стандартный компилятор TypeScript:

tsc --noEmit

Этот режим используется только для анализа типов без генерации файлов. Такой подход позволяет:

  • не замедлять dev-server
  • сохранять мгновенный HMR
  • разделять задачи трансформации и валидации

Поддержка .ts и .tsx файлов без конфигурации

Vite автоматически поддерживает файлы с расширениями:

  • .ts
  • .tsx

без необходимости регистрации дополнительных загрузчиков.

Пример компонента React в TypeScript:

type Props = {
  title: string;
};

export function Header({ title }: Props) {
  return <h1>{title}</h1>;
}

Такие файлы обрабатываются напрямую через встроенный pipeline Vite и esbuild.

Импорт TypeScript без указания расширения

Vite поддерживает резолвинг модулей без указания расширений, что распространяется и на TypeScript:

import { utils } from './utils';

Файл utils.ts будет автоматически найден и обработан.

Это возможно благодаря встроенной системе module resolution, которая учитывает:

  • .ts
  • .tsx
  • .js
  • .jsx
  • index.ts

Совместимость с ESM-архитектурой

Vite работает поверх нативных ES-модулей, поэтому TypeScript рассматривается как промежуточный формат, совместимый с ESM.

Особенности:

  • import/export остаются неизменными
  • namespace и legacy-механизмы TypeScript не рекомендуются
  • предпочтение отдается модульной структуре ESNext
export const sum = (a: number, b: number): number => {
  return a + b;
};

После трансформации сохраняется идентичная структура ESM.

Алиасы и TypeScript paths

Vite синхронизирует алиасы из tsconfig.json с собственной системой резолвинга. Это позволяет использовать единый источник конфигурации для редактора и сборщика.

import { api } from '@/api/client';

При этом:

  • @/api соответствует src/api
  • не требуется дополнительная настройка webpack-style alias

Ограничения встроенной поддержки TypeScript

Несмотря на удобство, встроенная поддержка имеет ряд архитектурных ограничений:

  • отсутствует проверка типов во время dev-сервера
  • декораторы требуют дополнительной настройки в зависимости от режима
  • экспериментальные возможности TypeScript могут поддерживаться частично
  • строгая типизация не влияет на runtime поведение

Vite сознательно отделяет трансформацию от статического анализа.

TSX и JSX обработка

TSX поддерживается на уровне esbuild без дополнительной конфигурации.

const Button = ({ label }: { label: string }) => {
  return <button>{label}</button>;
};

JSX трансформация выполняется автоматически, с учётом настроек среды React или других JSX-фреймворков.

Итог архитектурного подхода

Встроенная поддержка TypeScript в Vite основана на принципах:

  • минимальной конфигурации
  • разделения трансформации и проверки типов
  • использования esbuild как основного трансформера
  • полной интеграции с ESM
  • автоматического резолвинга модулей и алиасов

Такой подход делает TypeScript в Vite не отдельной системой компиляции, а естественным расширением JavaScript-пайплайна, ориентированным на скорость разработки и упрощение инфраструктуры проекта.

Оглавление