Installation

Installation globale

npm i -g typescript

Pour vérifier que l'installation fonctionne, inscrivez :

tsc -v #5.4.x

Setup fichiers

Nous allons créer un dossier ts-course et initialiser un projet TypeScript :

# mkdir ts-course
# cd ts-course
npm init # Vous pouvez tout valider

Ensuite installer vite :

npm i vite

Créer un dossier public et placez y un fichier index.html :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cours TypeScript</title>
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
  <h1>TypeScript course</h1>
  <script type="module" src="dist/script.js"></script>
</body>
</html>

Vous pouvez récupérer le favicon ici : favicon.ico

Créer un fichier vite.config.ts :

export default {
  root: 'public',
  build : {
    outDir: 'public/dist'
  }
}

Créer un dossier src. C'est ici que nous allons placer nos fichiers TypeScript.

Vous aurez les fichiers suivants :

node_modules
public
- index.html
package-lock.json
package.json

Fichier TypeScript

`index.ts`

Créer un fichier src/script.ts :

const city: string = "Paris";
 
console.log(`hello ${city}`);
 
// export {} Décommentez si vous avez une erreur "TS2448: Block-scoped variable 'city' used before its declaration."

Nous allons maintenant compiler le code TypeScript en JavaScript:

tsc script.ts

Une fois effectué, un fichier au meme nom avec l’extension js est créé

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var city = "Paris";
console.log("Hello ".concat(city));

Par défaut, le compilateur TypeScript génère du code JavaScript ES3. Nous verrons plus tard commenr changer cela.

TypeScript - target (opens in a new tab)

Explication

use strict : Le code est exécuté en mode strict.
Object.defineProperty(...) : Génère un module compatible avec CommonJS.
var remplace const car ES3 ne le supporte pas.
.concat remplace ${} car ES3 ne le supporte pas.

Ajoutons

// script.ts
const city: string = "Paris";
const department: number = 75;
 
console.log(`Hello ${city}, department: ${department}`);
 
// export {}

Regardons le fichier généré, rien n'a changé 🤔

Afin que les modifications soient prises en compte, nous devons compiler le code à nouveau :

tsc script.ts

Super ça fonctionne ! 🎉

Pour que ce soit fait automatiquement, nous pouvons ajouter un watcher :

tsc script.ts --watch

En plus de l'éditeur de texte, c'est ici que nous verrons les erreurs de typage.
Le terminal n'est plus disponible, vous pouvez ouvrir un autre terminal pour continuer à travailler.

Le mode strict

Activer le mode strict

tsc script.ts --strict -w

Fichier de configuration

Plutot que de passer des options à chaque compilation, nous pouvons créer un fichier de configuration tsconfig.json :

tsc --init

Cela va créer un fichier avec des options spécifiques.

Les paramètres qui nous intéressent pour l'instant sont :

target : Version de JavaScript à générer
module : Type de module à générer (EcmaScript ou CommonJS)
outDir : Dossier de destination
rootDir : Dossier source des fichier ts à compiler
strict : Active le mode strict

Valeur à changer

{
  "compilerOptions": {
    "target": "ES2016", // Code moderne largement supporté
    "module": "ES2022", // Module EcmaScript
    "rootDir": "./src", // Dossier source
    "outDir": "./public/dist", // Dossier de destination
 
  },
  "exclude": [
    "node_modules",
    "vite.config.ts"
  ]
}

Maintenant, dans le terminal faites :

tsc -w

Vous pouvez supprimer le fichier script.js
Un nouveau fichier dist/script.js est créé
Le code qu'il contient est adapté à la version ES2016 avec les modules EcmaScript

const city = "Paris";
const department = 75;
console.log(`Hello ${city}, department: ${department}`);
export {};

Résumé

Vous devez avoir 3 terminaux ouverts :

Un pour lancer le serveur Vite (watch)
Un pour compiler le code TypeScript (watch)
Un pour effectuer les différentes commandes

Vous avez un fichier script.ts dans le dossier src qui est compilé en dist/script.js dans le dossier public.

Pour la suite du cours, je vous recommande :

de travailler dans le fichier src/script.ts
de copier / coller le code dans des fichiers relatifs aux exercices

- src
  - script.ts # Fichier en cours
  - /5-types-primitives
    - exercice.ts
    # ...
  - /6-array-tuple
    - exercice.ts
    # ...
  # ...

2 - Qu'est-ce que TypeScript ?4 - Configuration