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