Introduction

TypeScript est un superset syntaxique optionnel de JavaScript comprenant des fonctionnalités avancées telles que le typage statique, les classes, les modules et les interfaces. Lancé en octobre 2012, TypeScript est maintenant soutenu activement par Microsoft et la communauté Open Source. Ce langage de programmation moderne est devenu incontournable pour les développeurs Web souhaitant accroître la productivité et renforcer la fiabilité de leurs codes.

Ce guide vous présentera les concepts fondamentaux de TypeScript et vous accompagnera pas à pas dans la configuration et l'utilisation de ce langage dans vos projets Web.

Installer TypeScript

Premièrement, installez TypeScript en exécutant la commande suivante dans votre terminal :

npm install -g typescript

Vous pouvez également l'installer localement dans votre projet en ajoutant une ligne similaire au sein de votre fichier package.json :

{
  "devDependencies": {
    "typescript": "^4.5.2"
  }
}

Et puis en exécutant la commande suivante dans votre terminal :

npm install

Configurer tsconfig.json

Créez un nouveau fichier nommé tsconfig.json dans votre racine de projet. Celui-ci sera utilisé pour configurer les options relatives à TypeScript. Initialisons notre fichier avec les paramètres minimaux recommandés :

{
  "compilerOptions": {
    "target": "ES2017",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

target : Spécifie la version ECMAScript vers laquelle transpiler le code TypeScript.
module : Indique quel format de module JS utiliser.
strict : Active les contrôles de type stricts.
esModuleInterop : Facilite l'interopérabilité entre les modules ES et CommonJS.
skipLibCheck : Ignore les librairies externes pendant le contrôle de type.
forceConsistentCasingInFileNames : Force la casse cohérente dans les noms de fichiers.
include : Liste des chemins dossiers à inclure dans la compilation.

Types Basiques

TypeScript prend en charge divers types basiques incluant boolean, number, string, null, undefined, any, void, never et enum. Jetons un coup d'œil à ces types avec quelques exemples :

let isDone: boolean = false;
const myNumber: number = 42;
const myString: string = 'Hello World';
let nullVar: null = null;
let undefVar: undefined = undefined;
let myAny: any = 'Une variable ANY';
function warnUser(): void {
  console.log('This is my warning message');
}

Interfaces

Les interfaces jouent un rôle important dans TypeScript pour structurer et typer les objets. Ils permettent de décrire la structure attendue des instances d'objets.

interface User {
  id: number;
  firstName: string;
  lastName?: string; // Optional property
}

const user: User = {
  id: 1,
  firstName: 'John',
};

Fonctions Typées

Il existe deux manières de typer une fonction en TypeScript :

Par inférence implicite : Ne pas spécifier explicitement les types, ils seront alors inferrés automatiquement par TypeScript.

function add(a: number, b: number): number {
  return a + b;
}

Par inférence explicite : Annoter uniquement les arguments et le retour de la fonction.

type AddFn = (a: number, b: number) => number;

const add: AddFn = (a, b) => {
  return a + b;
};

Dans cet extrait, nous avons explicitement annoté le type de notre variable add avec AddFn qui est lui-même un alias de type représentant une fonction acceptant deux paramètres de type number et retournant un nombre.

Classes

La programmation orientée objet (POO) fait partie intégrante de TypeScript. Une classe est un modèle servant à créer des objets dotés d'un état et comportement communs. Voyons comment créer une simple classe Person et instancier celle-ci :

class Person {
  constructor(public firstName: string, public lastName: string) {}
  
  greet() {
    console.log(`Hi there, I am ${this.firstName} ${this.lastName}`);
  }
}

const john = new Person("John", "Doe");
john.greet();

Nous venons juste de créer une nouvelle classe Person possédant deux propriétés publiques firstName et lastName initialisées lors de l'appel du constructeur. Notre instance john hérite de ces attributs et dispose également d'une méthode greet().

Modules

Un module représente un agglomérat logique de code relié par un contexte commun tel qu'une bibliothèque tierce ou une partie spécifique de votre application. TypeScript permet d'extraire du code dans des modules isolés et de gérer leur import/export.

Voici un exemple simplifié mettant en scène un module person.ts exportant une interface User et une classe Person :

person.ts

export interface User {
  id: number;
  firstName: string;
  lastName: string;
}

export class Person implements User {
  constructor(
    public id: number,
    public firstName: string,
    public lastName: string
  ) {}
}

Utilisons notre module fraîchement crée dans app.ts :

app.ts

import { User, Person } from "./person";

const user: User = new Person(1, "Jane", "Doe");
console.log(user);

Comme illustré ci-dessus, nous avons importé notre interface User et notre classe Person depuis person.ts. Ceci nous permettra de profiter de tous les avantages du typage fort et de la POO TypeScript dans notre application.

Conclusion

Familiarisons-nous désormais avec les outils TypeScript couramment employés dans le monde professionnel :

Webpack : Compresseur de bundle JS prenant en charge les imports/exports ES6 et les modules CSS/HTML. Intégrez-le à votre workflow pour compiler et regrouper vos assets applicatifs.
TSLint / ESLint : Outils de linters analysant votre code source et identifiant les anomalies stylistiques et les bugs potentiels. Profitez-en pour uniformiser le style de votre équipe de développement.
VSCode & Extensions : Environnement de développement intégré favori des adeptes de TypeScript. Exploitez les extensions Visual Studio Code telles que TypeScript Hero, TypeScript God, etc.

Grâce à ce tour d'horizon, vous avez acquis les rudiments nécessaires pour embrasser la magie de TypeScript dans vos futurs projets Web. Bon codage !