TypeScript에서 JavaScript로: 완전 변환 가이드

Convertir TypeScript en JavaScript est une tache courante pour publier des packages npm ou supporter des environnements legacy. Ce guide couvre tsc, Babel, esbuild, les outils en ligne et les bonnes pratiques.

Essayez notre convertisseur gratuit TypeScript vers JavaScript.

Pourquoi convertir TypeScript en JavaScript ?

TypeScript est un sur-ensemble de JavaScript avec le typage statique. Les navigateurs executent du JavaScript, chaque fichier TypeScript doit etre compile.

Scenarios courants : publication de librairies npm, deploiement sans support TypeScript, debogage du code compile, migration de projets legacy.

Les annotations de type, interfaces et alias sont effaces. Les enums, decorateurs et namespaces generent du code JavaScript.

Ce qui est supprime : Types vs Code runtime

Comprendre quelles fonctionnalites sont effacees et lesquelles produisent du code :

Methodes de conversion TypeScript vers JavaScript

Methode 1 : Compilateur TypeScript (tsc)

Le compilateur officiel est la methode la plus fiable avec verification de types :

# Install TypeScript
npm install -D typescript

# Create tsconfig.json
npx tsc --init

# tsconfig.json key settings for conversion
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "outDir": "./dist",
    "rootDir": "./src",
    "declaration": true,       // Generate .d.ts files
    "sourceMap": true,          // Generate source maps
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

# Compile single file
npx tsc src/app.ts --outDir dist

# Compile entire project
npx tsc

# Type-check only (no output)
npx tsc --noEmit

Methode 2 : Babel

Babel supprime les types sans verification, plus rapide pour les pipelines de build :

# Install Babel with TypeScript preset
npm install -D @babel/core @babel/cli @babel/preset-typescript

# babel.config.json
{
  "presets": ["@babel/preset-typescript"]
}

# Compile a single file
npx babel src/app.ts --out-file dist/app.js --extensions ".ts,.tsx"

# Compile entire directory
npx babel src --out-dir dist --extensions ".ts,.tsx"

# Note: Babel does NOT type-check!
# Run tsc separately for type safety:
npx tsc --noEmit && npx babel src --out-dir dist --extensions ".ts,.tsx"

Methode 3 : esbuild (le plus rapide)

esbuild est extremement rapide et supporte nativement TypeScript :

# Install esbuild
npm install -D esbuild

# Bundle a TypeScript entry point to JavaScript
npx esbuild src/app.ts --bundle --outfile=dist/app.js --platform=node

# Transpile without bundling (preserves module structure)
npx esbuild src/**/*.ts --outdir=dist --format=esm

# Watch mode for development
npx esbuild src/app.ts --bundle --outfile=dist/app.js --watch

# Build with minification for production
npx esbuild src/app.ts --bundle --minify --outfile=dist/app.min.js

Methode 4 : Convertisseur en ligne

Pour des conversions rapides, notre outil en ligne gere toute la syntaxe TypeScript.

Gerer les enums TypeScript en JavaScript

Les enums generent du code JavaScript runtime :

// === TypeScript: Numeric enum ===
enum Direction {
  Up,      // 0
  Down,    // 1
  Left,    // 2
  Right    // 3
}

// === Compiled JavaScript ===
var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 0] = "Up";
    Direction[Direction["Down"] = 1] = "Down";
    Direction[Direction["Left"] = 2] = "Left";
    Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));
// Direction[0] === "Up"   (reverse lookup)
// Direction.Up === 0      (forward lookup)

// === TypeScript: String enum ===
enum Color {
  Red = "#FF0000",
  Green = "#00FF00",
  Blue = "#0000FF"
}

// === Compiled JavaScript ===
var Color;
(function (Color) {
    Color["Red"] = "#FF0000";
    Color["Green"] = "#00FF00";
    Color["Blue"] = "#0000FF";
})(Color || (Color = {}));
// No reverse mapping for string enums

// === TypeScript: const enum (inlined) ===
const enum Status {
  Active = "ACTIVE",
  Inactive = "INACTIVE"
}
const s = Status.Active;

// === Compiled JavaScript (const enum is inlined) ===
const s = "ACTIVE"; // enum declaration removed entirely

Enums numeriques compilent en IIFE avec mapping bidirectionnel.

Enums string compilent en objet de mapping unidirectionnel.

const enum sont inlines aux sites d'utilisation.

Preserver le comportement runtime

Certains patterns necessitent une attention particuliere :

Chainage optionnel : ?. et ?? sont du JavaScript standard (ES2020).

Proprietes de parametres generent des assignations dans le constructeur.

// === TypeScript: Parameter properties ===
class User {
  constructor(
    public name: string,
    private age: number,
    readonly id: string
  ) {}
}

// === Compiled JavaScript ===
class User {
  constructor(name, age, id) {
    this.name = name;
    this.age = age;
    this.id = id;
  }
}

// === TypeScript: import type (always erased) ===
import type { UserType } from './types';  // Erased completely
import { createUser } from './utils';     // Kept (runtime value)

Elision des imports : TypeScript supprime les imports utilises uniquement comme types.

Migration de projet TypeScript vers JavaScript

Migrer un projet entier est une tache plus importante :

Bonnes pratiques de conversion

tsc pour la correction, esbuild pour la vitesse.

Definir le bon target dans tsconfig.json.

Utiliser module: "ESNext" pour le tree shaking.

Preferer import type pour les imports de types uniquement.

Prudence avec les enums : preferez les union types.

Tester la sortie compilee.

Utiliser les source maps.

Outils connexes : JSON to TypeScript, JSON Formatter, Diff Checker.

TypeScript to JavaScriptJSON to TypeScriptJSON FormatterDiff Checker

Questions frequemment posees

Peut-on convertir TypeScript en JavaScript en ligne ?

Oui, notre outil gratuit gere toutes les fonctionnalites TypeScript sans installation.

Quelle difference entre tsc, Babel et esbuild ?

tsc verifie les types et est le plus correct. Babel et esbuild sont plus rapides mais sans verification de types.

Que deviennent les interfaces apres conversion ?

Elles sont completement effacees, aucune sortie JavaScript.

Comment les enums TypeScript compilent-ils ?

Les enums numeriques generent un IIFE bidirectionnel. Les string enums un objet unidirectionnel. Les const enums sont inlines.

Faut-il convertir un projet TypeScript existant ?

Generalement non. TypeScript apporte des benefices significatifs pour la qualite du code.

La conversion TypeScript vers JavaScript est simple une fois compris ce qui est efface et ce qui genere du code runtime.

Convertissez TypeScript en JavaScript instantanement avec notre outil gratuit.

Related Developer Tools and Guides

• TypeScript to JavaScript Converter - Convert TS to JS online instantly
• JSON to TypeScript Converter - Generate TypeScript interfaces from JSON
• JSON Formatter - Format and validate JSON data
• Diff Checker - Compare TypeScript and JavaScript output
• JSON to Go Converter - Create Go structs from JSON
• JSON to Kotlin Converter - Generate Kotlin data classes
• Regex Tester - Test regular expressions online
• Base64 Encoder/Decoder - Encode and decode Base64
• JSON to TypeScript Guide - Complete guide to generating TS interfaces
• TypeScript vs JavaScript - When to use TypeScript