Le langage TypeScript : introduction à l’extension typée de JavaScript

TypeScript offre un certain nombre de fonctions essentielles qui améliorent radicalement le développement d’applications Web. Ce tutoriel TypeScript vous permettra de vous familiariser avec ce langage de programmation en vous expliquant ses principales caractéristiques, ses utilisations ainsi que ses avantages et inconvénients.

Qu’est-ce que TypeScript ?

Développée par Microsoft, TypeScript est une extension de JavaScript largement utilisée dans le monde du développement Web. L’une des caractéristiques les plus remarquables de TypeScript est le typage statique. Contrairement à JavaScript, qui présente un typage dynamique, TypeScript vous permet de déclarer des types de données pour les variables, les fonctions et les paramètres. Cela favorise une détection précoce des erreurs, et ce avant même l’exécution du code. Le typage statique améliore ainsi considérablement la qualité du code tout en le rendant plus lisible.

La syntaxe de TypeScript est en grande partie identique à celle de JavaScript, ce qui facilite l’intégration dans les projets JavaScript existants. En effet, TypeScript est un superset de JavaScript, ce qui signifie que tout code JavaScript correct fonctionne également avec TypeScript. Cela vous permet de passer progressivement à TypeScript et de profiter des avantages du typage statique et d’autres fonctionnalités sans devoir réécrire entièrement votre base de code existante.

Voici un exemple simple de JavaScript :

function greet(name) {
    return "Hello, " + name;
}
console.log(greet(123)); // Output: "Hello, 123"

Dans ce code JavaScript, la fonction greet n’est pas limitée à un type de données particulier pour le paramètre name. Ainsi, la fonction peut être appelée sans erreur, même lorsqu’un nombre est passé comme argument.

En TypeScript, le code se présente comme suit :

function greet(name: string): string {
    return "Hello, " + name;
}
console.log(greet(123)); // Error in TypeScript

Ici, nous avons déclaré explicitement le paramètre name comme une chaîne de caractères (string). Si nous essayons maintenant d’appeler la fonction avec un nombre, TypeScript affichera une erreur car le type de données passé en paramètre ne correspond pas au type de données attendu.

Cet exemple met en lumière la capacité de TypeScript à vous aider à repérer les erreurs en amont et à améliorer la qualité de votre code en évitant l’emploi de types de données incorrects. Néanmoins, il est important de rappeler que TypeScript est converti en JavaScript. Cela lui permet de fonctionner dans tout environnement JavaScript, mais signifie également que les avantages liés à la sécurité des types ne sont disponibles que durant la phase de développement.

Domaines d’application de TypeScript

TypeScript est un élément essentiel dans différents domaines d’application du développement de logiciels, en particulier dans les situations où la sécurité de type et la qualité du code sont d’une importance capitale.

Le développement Web est un domaine d’application important de TypeScript. Dans ce domaine, TypeScript permet d’écrire un code JavaScript plus sûr et plus facile à entretenir. C’est un avantage pour les projets frontend de grande envergure dans lesquels la base de code est complexe. Mais TypeScript peut également être implémenté du côté serveur (backend) dans les applications Node.js afin d’offrir une couche de sécurité supplémentaire. Dans les architectures sans serveur comme AWS Lambda et Azure Functions, TypeScript permet de minimiser les erreurs et de garantir une exécution fiable.

Le développement multiplateforme est un autre domaine dans lequel TypeScript montre ses atouts. Il peut considérablement optimiser le développement d’applications multiplateformes et d’applications mobiles. Des frameworks comme NativeScript et React Native offrent un support pour TypeScript dans la programmation d’applications mobiles pour différentes plateformes. Dans le développement de jeux, TypeScript est utilisé dans des projets qui utilisent WebGL ou des moteurs de jeu comme Phaser ou Babylon.js. La sécurité de type de TypeScript contribue à améliorer la qualité et la maintenabilité des jeux.

Pour les projets de visualisation et d’analyse de données, on a également recours à TypeScript. Des bibliothèques comme D3.js offrent un support pour TypeScript et permettent de créer des tableaux de bord et des visualisations sophistiqués.

Comment installer TypeScript ?

L’installation de TypeScript est simple et ne nécessite que quelques étapes. Vous pouvez installer TypeScript avec npm (Node Package Manager) si vous avez Node.js sur votre ordinateur.

Étape 1 : télécharger Node.js

Vérifiez que vous avez bien installé Node.js sur votre ordinateur. Si vous n’avez pas encore configuré Node.js, vous pouvez le télécharger sur le site officiel et l’installer.

Étape 2 : installer TypeScript sur votre terminal

Ouvrez votre ligne de commande (par exemple l’invite de commande Windows, le terminal sur macOS ou Linux) et saisissez la commande suivante pour installer TypeScript sur votre système :

npm install -g typescript

Avec le drapeau -g (global), TypeScript est installé sur tout votre système, ce qui vous permet de l’utiliser de n’importe où.

Étape 3 : afficher la version installée

Vous pouvez tester si l’installation a réussi en exécutant la commande suivante :

tsc -v

Cette commande affiche la version installée de TypeScript. Si vous voyez le numéro de version, l’installation a réussi.

Après l’installation, vous pouvez créer des fichiers TypeScript (avec l’extension .ts) et les compiler avec le compilateur TypeScript tsc pour générer des fichiers JavaScript.

Étape 4 : créer un fichier TypeScript

Créez un fichier TypeScript, par exemple app.ts, et insérez votre code TypeScript.

type Person = { name: string, age: number };
const alice: Person = { name: "Alice", age: 30 };
console.log(`Hello, I am ${alice.name} and I am ${alice.age} years old.`);

Étape 5 : compiler le fichier

Compilez le fichier TypeScript en tapant la commande suivante :

tsc app.ts

Cela compilera app.ts en un fichier JavaScript nommé app.js. Vous pouvez alors exécuter le fichier JavaScript.

Caractéristiques de TypeScript

Le développement Web a fait des progrès considérables ces dernières années, et TypeScript s’est imposé comme une alternative extrêmement performante à JavaScript. Nous avons résumé pour vous les principales caractéristiques de TypeScript ci-dessous.

Typage statique

Le typage statique est un aspect essentiel de TypeScript et concerne la définition des types de données pour les variables, paramètres, fonctions et autres éléments de votre code. Contrairement au typage dynamique en JavaScript, dans lequel les types de données sont déterminés au moment de l’exécution, la déclaration des types de données dans TypeScript a lieu pendant le développement, soit avant l’exécution du code. Les types aident donc à détecter les erreurs et les problèmes logiques à un stade précoce.

function add(a: number, b: number): number {
    return a + b;
}
const result = add(5, 3); // valid
const result = add(5, "3"); // Type Error

Dans cet exemple, nous utilisons le typage statique pour la fonction add. Les deux paramètres a et b sont déclarés comme des nombres (number) et la fonction renvoie une valeur de type number. Ainsi, les tentatives d’appeler cette fonction avec d’autres types de données sont reconnues comme des erreurs par TypeScript.

Typage optionnel

Le typage optionnel permet d’attribuer des types à certaines variables et paramètres, tout en en laissant d’autres sans typage explicite.

function sayHello(name: string, age: any): string {
    if (age) {
        return `Hello, ${name}, you are ${age} years old.`;
    } else {
        return `Hello, ${name}.`;
    }
}

La fonction sayHello est définie avec les paramètres name et age. Le terme any indique que le paramètre age peut prendre n’importe quel type de données.

Fonctions ES6+

TypeScript prend en charge les fonctions JavaScript modernes, y compris ES6 et les fonctions plus récentes comme les fonctions fléchées (Arrow Functions) et les chaînes de modèles.

const multiply = (a: number, b: number): number => a * b;
const greeting = (name: string) => `Hello, ${name}!`;

Les fonctions fléchées conduisent à une syntaxe plus courte et plus concise.

Organisation du code

Grâce aux modules et aux espaces de noms, TypeScript offre une meilleure organisation du code et assure la division du code en parties réutilisables.

// Math.ts
export function add(a: number, b: number): number {
    return a + b;
}
// Main.ts
import { add } from './Math';
const result = add(5, 3);

Nous illustrons ici l’organisation du code à l’aide de modules et l’utilisation de import et export. La fonction add est définie dans un module séparé Math.ts et importée et intégrée dans un autre module Main.ts.

Programmation orientée objet (OOP)

TypeScript facilite la programmation orientée objet car il comprend l’utilisation des classes TypeScript, des interfaces et de l’héritage.

class Person {
    constructor(public name: string, public age: number) {}
    greet() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}
const person = new Person("Alice", 30);
person.greet();

Cet exemple montre l’utilisation des classes et de la programmation orientée objet (OOP) dans TypeScript. La classe Person a les propriétés name, age et une méthode greet pour se présenter et donner des informations sur soi-même.

Système de types étendu

Le système de types de TypeScript est flexible et étendu. Vous pouvez créer des types et des interfaces définis par l’utilisateur et même étendre des types existants.

interface Animal {
    name: string;
}
interface Dog extends Animal {
    breed: string;
}
const myDog: Dog = { name: "Buddy", breed: "Labrador" };

L’interface Animal définit une propriété name, tandis que l’interface Dog hérite de Animal et ajoute une propriété supplémentaire breed. L’objet myDog possède les caractéristiques des deux interfaces.

Compatibilité avec JavaScript

TypeScript est compatible avec JavaScript et peut être exécuté dans n’importe quel environnement JavaScript. Cela facilite l’introduction progressive de TypeScript dans des projets JavaScript existants.

// JavaScript-Code
function greet(name) {
    return "Hello, " + name;
}
// TypeScript-Code
function greet(name: string): string {
    return "Hello, " + name;
}

Le code JavaScript (sans typage) peut être utilisé sans problème dans un code TypeScript (avec typage).

Quels sont les avantages et inconvénients de TypeScript ?

TypeScript offre une multitude d’avantages, mais a aussi quelques inconvénients. Voici un aperçu des pour et des contre :

Avantages

TypeScript dispose d’un vaste écosystème de définitions de types pour de nombreuses bibliothèques et frameworks JavaScript. Cela rend l’intégration de code tiers dans les projets TypeScript transparente et simple. C’est utile dans le contexte actuel des applications basées sur le Web, qui dépendent souvent de plusieurs bibliothèques et frameworks.

Outre le typage statique, TypeScript offre une multitude de fonctionnalités de développement, notamment des interfaces, des classes, des modules et le support des standards ECMAScript actuels. Ces fonctionnalités améliorent la structuration du code, facilitent la maintenabilité et l’évolutivité des projets ainsi que favorisent la productivité lors du développement. TypeScript est également très bien pris en charge par de nombreux environnements de développement intégrés (IDE) tels que Visual Studio Code.

Inconvénients

TypeScript nécessite une certaine période d’apprentissage, surtout si les développeurs n’ont travaillé auparavant qu’avec JavaScript. De plus, le code TypeScript doit être compilé en JavaScript avant de pouvoir être exécuté dans les navigateurs ou les environnements Node.js, ce qui entraîne une étape supplémentaire dans le processus de développement.

Pour de petits projets, TypeScript peut être perçu comme trop complexe, car les avantages de la sécurité des types ne sont pas forcément aussi évidents. Les projets TypeScript peuvent nécessiter davantage de ressources en raison des informations supplémentaires requises sur le type, et de l’étape additionnelle de compilation.

Alternatives à TypeScript

Il existe plusieurs langages de programmation Web alternatifs à TypeScript, en fonction des besoins spécifiques d’un projet et des préférences des développeurs.

• Flow : Flow est un typage statique pour JavaScript développé par Facebook. Il permet d’ajouter des types au code JavaScript sans devoir effectuer une conversion complète vers TypeScript. Flow est un bon choix si vous souhaitez intégrer progressivement le typage dans vos projets JavaScript.

• Dart : il s’agit d’un langage de programmation développé par Google qui peut être utilisé pour créer des applications Web et mobiles. Il offre une sécurité de type et de bonnes performances. Dart est souvent utilisé en combinaison avec le framework Flutter pour le développement d’applications mobiles.

• PureScript : PureScript sert de langage de programmation fonctionnel strictement typé, qui comprend une forte sécurité de type et un style de programmation fonctionnel. Il permet l’importation de bibliothèques JavaScript.

• Elm : Elm est un langage fonctionnel, strictement typé, conçu pour le développement d’applications Web. Elm promeut le principe de « l’architecture Elm » et possède une grande sécurité de type.

• ReasonML (BuckleScript) : ce langage est développé par Facebook et basé sur OCaml. BuckleScript est un compilateur qui compile ReasonML en JavaScript. Il permet également la sécurité des types et une forte intégration avec React pour le développement frontend.