Как TypeScript работает в браузере?

Как TypeScript работает в браузере?

Коротко: TypeScript НЕ работает в браузере напрямую

Браузер понимает только JavaScript. TypeScript — это язык, который компилируется (транспилируется) в JavaScript перед тем, как браузер его получит.

Как это работает

TypeScript код (.ts файлы)
        ↓
TypeScript компилятор (tsc)
        ↓
JavaScript код (.js файлы)
        ↓
Браузер загружает .js и выполняет

Процесс разработки

1. Разработка на TypeScript

// file.ts
interface User {
  id: number;
  name: string;
  email: string;
}

function createUser(data: User): void {
  console.log(`User ${data.name} created`);
}

const user: User = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
};

createUser(user);

2. TypeScript компилируется в JavaScript

// file.js (результат компиляции)
function createUser(data) {
  console.log(`User ${data.name} created`);
}

const user = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
};

createUser(user);

// Заметь: все типы удалены! JavaScript не знает про User интерфейс

3. Браузер загружает JavaScript

<!-- HTML -->
<script src="file.js"></script>
<!-- Браузер выполняет JavaScript код -->

Инструменты для компиляции

1. TypeScript компилятор (tsc)

# Установка
npm install -g typescript

# Компилирование одного файла
tsc file.ts

# Компилирование с конфигом
tsc

# Watch режим (автоматически при изменении)
tsc --watch

2. Bundlers (бандлеры)

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

# Webpack
npm install --save-dev webpack ts-loader

# Vite (современный, быстрый)
npm create vite@latest my-app -- --template react-ts

# Next.js (встроена поддержка TypeScript)
npx create-next-app@latest

# Parcel
npm install --save-dev parcel

3. tsconfig.json

Конфигурация компиляции TypeScript:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "outDir": "./dist"
  },
  "include": ["src"]
}

Этапы разработки с TypeScript

Разработка (локально)

# Запуск dev сервера с hot reload
npm run dev

# Vite пример: компилирует в памяти и моментально обновляет браузер

Проверка типов

# TypeScript проверит типы перед компиляцией
npm run type-check

# Если ошибки — код не скомпилируется

Production build

# Создание оптимизированного .js
npm run build

# Результат в dist/ папка
# Эти файлы загружаются в браузер на production

Что браузер видит на production

// Браузер видит обычный JavaScript, без типов
// Никакого намёка на TypeScript

const user = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
};

function createUser(data) {
  console.log(`User ${data.name} created`);
}

createUser(user);

Важные моменты

1. Типы удаляются при компиляции

// TypeScript
const age: number = 25;
const getName = (user: User): string => user.name;

// JavaScript (после компиляции)
const age = 25;
const getName = (user) => user.name;

Типы нужны только для разработки (type checking в IDE и при компиляции).

2. Runtime типизация не существует

// TypeScript
function process(value: number) {
  return value * 2;
}

process('hello'); // Ошибка в IDE, не даст компилировать

// Но если somehow .js файл получит строку:
process('hello'); // Вернёт 'hellohello' - JavaScript просто конкатенировал!

3. tsconfig.json определяет целевой JavaScript

{
  "compilerOptions": {
    "target": "ES2020" // Компилировать в ES2020 JavaScript
  }
}

Это позволяет использовать современный JavaScript на старых браузерах через transpilation.

Пример полного цикла

// src/main.ts
interface Product {
  id: number;
  name: string;
  price: number;
}

const products: Product[] = [
  { id: 1, name: 'Laptop', price: 999 },
  { id: 2, name: 'Phone', price: 599 }
];

function calculateTotal(items: Product[]): number {
  return items.reduce((sum, item) => sum + item.price, 0);
}

console.log('Total:', calculateTotal(products));

# Командная строка
$ tsc

// dist/main.js (результат компиляции)
const products = [
  { id: 1, name: 'Laptop', price: 999 },
  { id: 2, name: 'Phone', price: 599 }
];

function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

console.log('Total:', calculateTotal(products));

<!-- index.html -->
<script src="dist/main.js"></script>
<!-- Браузер выполняет JavaScript -->

Отладка TypeScript в браузере

# Source maps — позволяют отлаживать TypeScript, видя оригинальные .ts файлы
# В tsconfig.json:
{
  "compilerOptions": {
    "sourceMap": true
  }
}

# DevTools браузера будет показывать оригинальные .ts файлы
# хотя на самом деле выполняется .js

Заключение

Как TypeScript работает в браузере:

1. Пишешь TypeScript код
2. Компилируешь в JavaScript (tsc, webpack, vite, next.js)
3. Браузер загружает и выполняет JavaScript
4. Типы удаляются на этапе компиляции
5. Runtime это обычный JavaScript, TypeScript не существует для браузера

TypeScript — это инструмент для разработчика, чтобы избежать ошибок. В production браузер видит только чистый JavaScript.

Преимущества:

• Ошибки типов ловятся при разработке, не на production
• Автодополнение в IDE
• Документирование кода через типы
• Рефакторинг безопаснее
• Zero runtime overhead — никакого замедления

IDE вроде VS Code проверяет TypeScript в реальном времени, но браузер этого никогда не видит.