Premiers pas avec le TypeScript

Sources utilisées pour ce tutoriel : 1,

Intérêt du JS

TypeScript n'est pas un langage en lui-même. Il a été construit en pensant à l’écosystème JavaScript. Il permet d'utiliser des fonctionnalités qui n'existent pas dans JS :

• le typage statique (comme en java)
• d'utiliser des types avancés (génériques, unions, ...)
• pouvoir définir ses propres interfaces et types

À retenir

L'idée du TS est avant tout de minimiser les erreurs liées à la permissivité du JS.

Conversion de ts vers js

La première chose importante à comprendre est que le TS n'est pas interprété directement par votre navigateur. Il y a une étape obligatoire de compilation pour transformer un fichier tsen fichier js. Lors de cette étape plusieurs opérations sont réalisées : l'analyse syntaxique, la vérification des types, la résolution des modules (via tsconfig.json), la transpilation (enlever les annotations) et enfin la création du js.

Exécution d'un code js à l'aide de node

Créer un répertoire respectant l'arborescence suivante :

projectRoot
├── src
│   ├── file1.ts
│   ├── file2.js
├── built
└── tsconfig.json

file1.js

const greeter = (person) => {
  return "Hello, " + person;
}
 
const user1 = "Jane User";
 
console.log(greeter(user1));
console.log(greeter([1,2,3]));

file2.ts

const bonjour = (person: string): string => { 
    return "Bonjour, " + person;
};

const user2: string = "Jane User";

console.log(bonjour(user2)); 
console.log(bonjour([1, 2, 3]));  

info

Dans un terminal exécutez les deux codes :

• node file1.js
• node file2.ts

Observez ce qui s'affiche dans la console.

Premier essai de transpilation

Copiez/collez le fichier de configuration suivant dans tsconfig.json. C'est ce fichier qui indique au compilateur ce qu'il doit faire.

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./built",    // Spécifie le répertoire où placer les fichiers JavaScript compilés (sortie).
    "strict": true,         // Active le mode strict de TypeScript, incluant des règles strictes de vérification de types.
    "target": "es6",         // Définit la version ECMAScript cible pour le code JavaScript généré. 
    "skipLibCheck": true    //ne pas vérifier les types dans les modules
  },
  "include": ["./src/**/*"],  // Inclut tous les fichiers TypeScript dans le dossier 'src' et ses sous-dossiers.
  "exclude": ["node_modules"]
}

info

Dans un terminal exécutez la transpilation : tsc

Observez :

1. observez l'erreur
2. commentez la ligne qui pose problème
3. recompilez
4. observez ce que contient built

danger

Sur les ordinateur il est possible que la commande tscne fonctionne pas. Il faut faire à la place npx tsc. Si ça ne marche toujours pas, c'est quil faut installer type-script. Normalement la commande vous est proposée. Sinon faites : npm install type-script