0Pricing
Frontend Academy · Leçon

Compiler TS et tsconfig.json

Exécutez tsc pour compiler TypeScript et configurez le compilateur avec des options de tsconfig.json comme strict, target et outDir.

Compiler TS et tsconfig.json est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Installer le compilateur TypeScript

Installez TypeScript comme dépendance de développement. L'interface de ligne de commande CLI tsc compile les fichiers TypeScript. Avec Vite ou Next.js, le regroupeur s'occupe de la compilation, mais tsc sert toujours à vérifier les types.

npm install --save-dev typescript
npx tsc --version  # verify installation
npx tsc app.ts     # compile a single file

Initialiser tsconfig.json

Exécutez npx tsc --init pour générer un fichier tsconfig.json dont toutes les options sont désactivées par commentaire et qui contient des valeurs par défaut raisonnables. Ce fichier constitue l'unique configuration du compilateur TypeScript.

npx tsc --init
# Creates tsconfig.json with ~100 commented-out options

Structure de tsconfig.json

Les principales sections sont les suivantes : compilerOptions (comportement du compilateur), include (fichiers à compiler) et exclude (fichiers à ignorer).

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Cible — version JavaScript produite

target indique la version de JavaScript produite par tsc. Utilisez ES2022 ou ESNext pour les environnements modernes, et ES5 pour une compatibilité maximale, généralement prise en charge par Babel.

Module — système de modules

module contrôle le format de module produit. Utilisez CommonJS pour Node.js, ESNext ou ES2022 pour les regroupeurs (Vite, webpack), et NodeNext pour Node.js moderne avec un type type:module dans package.json.

Strict — indicateur de rigueur

"strict": true active un ensemble de vérifications strictes : strictNullChecks, noImplicitAny, strictFunctionTypes et bien d'autres. Activez-le toujours dans les nouveaux projets : il détecte la plupart des erreurs.

{
  "compilerOptions": {
    "strict": true  // enables all strict checks
    // or individually:
    // "strictNullChecks": true,
    // "noImplicitAny": true
  }
}

strictNullChecks — éliminer les erreurs liées à null

Lorsque strictNullChecks est activé, null et undefined ne peuvent pas être affectés à d'autres types, sauf s'ils sont explicitement inclus dans une union. Cette option vous oblige à gérer les cas null.

// Without strictNullChecks:
const name: string = null; // allowed

// With strictNullChecks:
const name: string = null; // Error!
const name2: string | null = null; // OK

outDir et rootDir

outDir indique où sont placés les fichiers JS compilés. rootDir définit la racine des fichiers TypeScript sources. Ensemble, ces options reproduisent la structure source dans dist/.

// src/utils.ts → dist/utils.js
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

Chemins — alias de modules

Configurez des alias de chemins avec l'option paths et baseUrl. Vous pouvez ainsi importer @/components/Button au lieu de ../../components/Button.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

Mode surveillance et vérification des types uniquement

tsc --watch recompile lorsque les fichiers sont modifiés. tsc --noEmit vérifie les types sans produire de fichiers, ce qui est utile dans l'intégration continue pour valider les types sans dupliquer le travail du regroupeur.

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

# Watch and recompile:
npx tsc --watch

Étendre tsconfig.json

Utilisez extends pour hériter d'une configuration de base. Les configurations de base partagées (comme @tsconfig/strictest) fournissent les bonnes pratiques de la communauté.

// Install:
npm install -D @tsconfig/strictest

// tsconfig.json:
{
  "extends": "@tsconfig/strictest",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

Vérification rapide

Quelle option de tsconfig active l'ensemble complet des vérifications strictes des types ?

Récapitulatif : tsconfig.json

tsc compile TypeScript en JavaScript. tsconfig.json contrôle la cible (version ES produite), le module (système de modules), outDir, strict et les chemins. strict: true détecte la plupart des erreurs. Utilisez --noEmit dans l'intégration continue pour effectuer une vérification des types uniquement. Étendez les configurations de base de la communauté pour appliquer les bonnes pratiques.

Questions Fréquemment Posées

La leçon « Compiler TS et tsconfig.json » est-elle gratuite ?

Oui — le texte complet de « Compiler TS et tsconfig.json » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Compiler TS et tsconfig.json » ?

Exécutez tsc pour compiler TypeScript et configurez le compilateur avec des options de tsconfig.json comme strict, target et outDir. Tu pratiques Frontend 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 Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend 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 4 sur 4.

Combien de temps prend la leçon « Compiler TS et tsconfig.json » ?

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 Frontend Academy ?

Oui. Chaque leçon Frontend 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. Pourquoi TypeScript : les types détectent les bogues à la compilation
  2. Types primitifs, unions et alias de types
  3. Interfaces et types d’objets
  4. Compiler TS et tsconfig.json
← Retour à Frontend Academy