0Pricing
TypeScript Academy · Leçon

Compiler TypeScript en JavaScript

Comprenez le compilateur TypeScript et sa sortie.

Compiler TypeScript en JavaScript est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Bienvenue

TypeScript ne peut pas s’exécuter directement dans Node.js ou dans le navigateur. Il doit d’abord être compilé en JavaScript. Dans cette leçon, vous apprendrez comment fonctionne le compilateur TypeScript.

Installer le compilateur TypeScript

Installez TypeScript comme dépendance de développement dans votre projet. La commande `tsc` devient disponible dans vos scripts locaux après l’installation.
npm install --save-dev typescript
npx tsc --version

Votre première compilation avec tsc

Exécutez `tsc hello.ts` pour compiler un seul fichier. La commande produit `hello.js` dans le même répertoire, après avoir supprimé tous les types.
// hello.ts
function greet(name: string): string {
  return 'Hello, ' + name;
}
console.log(greet('World'));

// Compile: npx tsc hello.ts
// Output: hello.js (no types)

tsconfig.json : la configuration du projet

Pour un projet réel, vous avez besoin d’un fichier `tsconfig.json`. Exécutez `tsc --init` pour en générer un. Il contrôle la cible, le format des modules, le niveau de rigueur, le répertoire de sortie et bien plus encore.
npx tsc --init
// Creates tsconfig.json with defaults and comments

Principales options de tsconfig.json

Les champs les plus importants de tsconfig.json sont la cible (version ES produite), le module (système de modules), outDir (dossier de sortie) et la rigueur (activation de toutes les vérifications strictes).
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

Mode de surveillance avec tsc --watch

Exécutez `tsc --watch` pour recompiler automatiquement chaque fois que vous enregistrez un fichier TypeScript. Cela accélère le cycle de développement.
npx tsc --watch
// Watches for changes and recompiles on save

noEmit : vérifier les types sans produire de fichiers

L’option `noEmit` exécute le vérificateur de types sans écrire de fichiers de sortie. Elle est utile dans les chaînes d’intégration continue qui utilisent un outil de regroupement tel que Vite ou esbuild pour effectuer la compilation réelle.
// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

Alternatives plus rapides : ts-node et tsx

Pour le développement, vous pouvez exécuter directement TypeScript sans étape de compilation distincte en utilisant `ts-node` ou l’outil plus rapide `tsx`.
# Run TS directly with ts-node
npx ts-node src/index.ts

# Or faster with tsx
npx tsx src/index.ts

Cartes sources pour le débogage

Activez `sourceMap: true` afin que les outils de développement du navigateur et les débogueurs Node.js associent les lignes JS compilées à votre code source TypeScript d’origine.
{ "compilerOptions": { "sourceMap": true } }

Fichiers de déclaration (.d.ts)

Avec `declaration: true`, le compilateur produit également des fichiers `.d.ts`. Ceux-ci permettent à d’autres projets TypeScript d’utiliser votre bibliothèque avec toutes les informations de type.
{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

Les erreurs du compilateur bloquent la production par défaut

Par défaut, si votre code TypeScript contient des erreurs de type, `tsc` produit quand même le JavaScript, mais se termine avec un code différent de zéro. Utilisez `noEmitOnError: true` pour empêcher la production de fichiers en cas d’erreurs.
{ "compilerOptions": { "noEmitOnError": true } }

Vérification rapide

Que permet d’accomplir l’exécution de `tsc --noEmit` ?

Récapitulatif

Le compilateur TypeScript transforme les fichiers .ts en JavaScript. Configurez-le avec tsconfig.json, utilisez --watch pour le développement, --noEmit pour vérifier uniquement les types, et ts-node/tsx pour exécuter directement TypeScript.

Questions Fréquemment Posées

La leçon « Compiler TypeScript en JavaScript » est-elle gratuite ?

Oui — le texte complet de « Compiler TypeScript en JavaScript » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Compiler TypeScript en JavaScript » ?

Comprenez le compilateur TypeScript et sa sortie. Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Compiler TypeScript en JavaScript » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Points sensibles de JavaScript : erreurs à l’exécution
  2. Ce que TypeScript apporte à JavaScript
  3. Compiler TypeScript en JavaScript
  4. Quand utiliser TypeScript dans vos projets
← Retour à TypeScript Academy