Le langage Ty­peS­cript : in­tro­duc­tion à l’extension typée de Ja­vaS­cript

Ty­peS­cript offre un certain nombre de fonctions es­sen­tielles qui amé­lio­rent ra­di­ca­le­ment le dé­ve­lop­pe­ment d’ap­pli­ca­tions Web. Ce tutoriel Ty­peS­cript vous permettra de vous fa­mi­lia­ri­ser avec ce langage de pro­gram­ma­tion en vous ex­pli­quant ses prin­ci­pales ca­rac­té­ris­tiques, ses uti­li­sa­tions ainsi que ses avantages et in­con­vé­nients.

Qu’est-ce que Ty­peS­cript ?

Dé­ve­lop­pée par Microsoft, Ty­peS­cript est une extension de Ja­vaS­cript largement utilisée dans le monde du dé­ve­lop­pe­ment Web. L’une des ca­rac­té­ris­tiques les plus re­mar­quables de Ty­peS­cript est le typage statique. Con­trai­re­ment à Ja­vaS­cript, qui présente un typage dynamique, Ty­peS­cript vous permet de déclarer des types de données pour les variables, les fonctions et les pa­ra­mè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 con­si­dé­ra­ble­ment la qualité du code tout en le rendant plus lisible.

La syntaxe de Ty­peS­cript est en grande partie identique à celle de Ja­vaS­cript, ce qui facilite l’in­té­gra­tion dans les projets Ja­vaS­cript existants. En effet, Ty­peS­cript est un superset de Ja­vaS­cript, ce qui signifie que tout code Ja­vaS­cript correct fonc­tionne également avec Ty­peS­cript. Cela vous permet de passer pro­gres­si­ve­ment à Ty­peS­cript et de profiter des avantages du typage statique et d’autres fonc­tion­na­li­tés sans devoir réécrire en­tiè­re­ment votre base de code existante.

Voici un exemple simple de Ja­vaS­cript :

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

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

En Ty­peS­cript, 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é ex­pli­ci­te­ment le paramètre name comme une chaîne de ca­rac­tères (string). Si nous essayons main­te­nant d’appeler la fonction avec un nombre, Ty­peS­cript affichera une erreur car le type de données passé en paramètre ne cor­res­pond pas au type de données attendu.

Cet exemple met en lumière la capacité de Ty­peS­cript à 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 in­cor­rects. Néanmoins, il est important de rappeler que Ty­peS­cript est converti en Ja­vaS­cript. Cela lui permet de fonc­tion­ner dans tout en­vi­ron­ne­ment Ja­vaS­cript, mais signifie également que les avantages liés à la sécurité des types ne sont dis­po­nibles que durant la phase de dé­ve­lop­pe­ment.

Domaines d’ap­pli­ca­tion de Ty­peS­cript

Ty­peS­cript est un élément essentiel dans dif­fé­rents domaines d’ap­pli­ca­tion du dé­ve­lop­pe­ment de logiciels, en par­ti­cu­lier dans les si­tua­tions où la sécurité de type et la qualité du code sont d’une im­por­tance capitale.

Le dé­ve­lop­pe­ment Web est un domaine d’ap­pli­ca­tion important de Ty­peS­cript. Dans ce domaine, Ty­peS­cript permet d’écrire un code Ja­vaS­cript plus sûr et plus facile à en­tre­te­nir. C’est un avantage pour les projets frontend de grande envergure dans lesquels la base de code est complexe. Mais Ty­peS­cript peut également être im­plé­menté du côté serveur (backend) dans les ap­pli­ca­tions Node.js afin d’offrir une couche de sécurité sup­plé­men­taire. Dans les ar­chi­tec­tures sans serveur comme AWS Lambda et Azure Functions, Ty­peS­cript permet de minimiser les erreurs et de garantir une exécution fiable.

Le dé­ve­lop­pe­ment mul­ti­pla­te­forme est un autre domaine dans lequel Ty­peS­cript montre ses atouts. Il peut con­si­dé­ra­ble­ment optimiser le dé­ve­lop­pe­ment d’ap­pli­ca­tions mul­ti­pla­te­formes et d’ap­pli­ca­tions mobiles. Des fra­me­works comme Na­ti­veS­cript et React Native offrent un support pour Ty­peS­cript dans la pro­gram­ma­tion d’ap­pli­ca­tions mobiles pour dif­fé­rentes pla­te­formes. Dans le dé­ve­lop­pe­ment de jeux, Ty­peS­cript est utilisé dans des projets qui utilisent WebGL ou des moteurs de jeu comme Phaser ou Babylon.js. La sécurité de type de Ty­peS­cript contribue à améliorer la qualité et la main­te­na­bi­lité des jeux.

Pour les projets de vi­sua­li­sa­tion et d’analyse de données, on a également recours à Ty­peS­cript. Des bi­blio­thèques comme D3.js offrent un support pour Ty­peS­cript et per­met­tent de créer des tableaux de bord et des vi­sua­li­sa­tions so­phis­ti­qués.

Comment installer Ty­peS­cript ?

L’ins­tal­la­tion de Ty­peS­cript est simple et ne nécessite que quelques étapes. Vous pouvez installer Ty­peS­cript avec npm (Node Package Manager) si vous avez Node.js sur votre or­di­na­teur.

Étape 1 : té­lé­char­ger Node.js

Vérifiez que vous avez bien installé Node.js sur votre or­di­na­teur. Si vous n’avez pas encore configuré Node.js, vous pouvez le té­lé­char­ger sur le site officiel et l’installer.

Étape 2 : installer Ty­peS­cript 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 Ty­peS­cript sur votre système :

npm install -g typescript

Avec le drapeau -g (global), Ty­peS­cript 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’ins­tal­la­tion a réussi en exécutant la commande suivante :

tsc -v

Cette commande affiche la version installée de Ty­peS­cript. Si vous voyez le numéro de version, l’ins­tal­la­tion a réussi.

Après l’ins­tal­la­tion, vous pouvez créer des fichiers Ty­peS­cript (avec l’extension .ts) et les compiler avec le com­pi­la­teur Ty­peS­cript tsc pour générer des fichiers Ja­vaS­cript.

Étape 4 : créer un fichier Ty­peS­cript

Créez un fichier Ty­peS­cript, par exemple app.ts, et insérez votre code Ty­peS­cript.

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 Ty­peS­cript en tapant la commande suivante :

tsc app.ts

Cela compilera app.ts en un fichier Ja­vaS­cript nommé app.js. Vous pouvez alors exécuter le fichier Ja­vaS­cript.

Ca­rac­té­ris­tiques de Ty­peS­cript

Le dé­ve­lop­pe­ment Web a fait des progrès con­si­dé­rables ces dernières années, et Ty­peS­cript s’est imposé comme une al­ter­na­tive ex­trê­me­ment per­for­mante à Ja­vaS­cript. Nous avons résumé pour vous les prin­ci­pales ca­rac­té­ris­tiques de Ty­peS­cript ci-dessous.

Typage statique

Le typage statique est un aspect essentiel de Ty­peS­cript et concerne la dé­fi­ni­tion des types de données pour les variables, pa­ra­mètres, fonctions et autres éléments de votre code. Con­trai­re­ment au typage dynamique en Ja­vaS­cript, dans lequel les types de données sont dé­ter­mi­nés au moment de l’exécution, la dé­cla­ra­tion des types de données dans Ty­peS­cript a lieu pendant le dé­ve­lop­pe­ment, 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 pa­ra­mètres a et b sont déclarés comme des nombres (number) et la fonction renvoie une valeur de type number. Ainsi, les ten­ta­tives d’appeler cette fonction avec d’autres types de données sont reconnues comme des erreurs par Ty­peS­cript.

Typage optionnel

Le typage optionnel permet d’attribuer des types à certaines variables et pa­ra­mè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 pa­ra­mètres name et age. Le terme any indique que le paramètre age peut prendre n’importe quel type de données.

Fonctions ES6+

Ty­peS­cript prend en charge les fonctions Ja­vaS­cript 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 con­dui­sent à une syntaxe plus courte et plus concise.

Or­ga­ni­sa­tion du code

Grâce aux modules et aux espaces de noms, Ty­peS­cript offre une meilleure or­ga­ni­sa­tion du code et assure la division du code en parties réu­ti­li­sables.

// 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 il­lus­trons ici l’or­ga­ni­sa­tion du code à l’aide de modules et l’uti­li­sa­tion 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.

Pro­gram­ma­tion orientée objet (OOP)

Ty­peS­cript facilite la pro­gram­ma­tion orientée objet car il comprend l’uti­li­sa­tion des classes Ty­peS­cript, des in­ter­faces 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’uti­li­sa­tion des classes et de la pro­gram­ma­tion orientée objet (OOP) dans Ty­peS­cript. La classe Person a les pro­prié­tés name, age et une méthode greet pour se présenter et donner des in­for­ma­tions sur soi-même.

Système de types étendu

Le système de types de Ty­peS­cript est flexible et étendu. Vous pouvez créer des types et des in­ter­faces définis par l’uti­li­sa­teur 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é sup­plé­men­taire breed. L’objet myDog possède les ca­rac­té­ris­tiques des deux in­ter­faces.

Com­pa­ti­bi­lité avec Ja­vaS­cript

Ty­peS­cript est com­pa­tible avec Ja­vaS­cript et peut être exécuté dans n’importe quel en­vi­ron­ne­ment Ja­vaS­cript. Cela facilite l’in­tro­duc­tion pro­gres­sive de Ty­peS­cript dans des projets Ja­vaS­cript existants.

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

Le code Ja­vaS­cript (sans typage) peut être utilisé sans problème dans un code Ty­peS­cript (avec typage).

Quels sont les avantages et in­con­vé­nients de Ty­peS­cript ?

Ty­peS­cript offre une multitude d’avantages, mais a aussi quelques in­con­vé­nients. Voici un aperçu des pour et des contre :

Avantages

Ty­peS­cript dispose d’un vaste éco­sys­tème de dé­fi­ni­tions de types pour de nom­breuses bi­blio­thèques et fra­me­works Ja­vaS­cript. Cela rend l’in­té­gra­tion de code tiers dans les projets Ty­peS­cript trans­pa­rente et simple. C’est utile dans le contexte actuel des ap­pli­ca­tions basées sur le Web, qui dépendent souvent de plusieurs bi­blio­thèques et fra­me­works.

Outre le typage statique, Ty­peS­cript offre une multitude de fonc­tion­na­li­tés de dé­ve­lop­pe­ment, notamment des in­ter­faces, des classes, des modules et le support des standards EC­MAS­cript actuels. Ces fonc­tion­na­li­tés amé­lio­rent la struc­tu­ra­tion du code, fa­ci­li­tent la main­te­na­bi­lité et l’évo­lu­ti­vité des projets ainsi que fa­vo­ri­sent la pro­duc­ti­vité lors du dé­ve­lop­pe­ment. Ty­peS­cript est également très bien pris en charge par de nombreux en­vi­ron­ne­ments de dé­ve­lop­pe­ment intégrés (IDE) tels que Visual Studio Code.

In­con­vé­nients

Ty­peS­cript nécessite une certaine période d’ap­pren­tis­sage, surtout si les dé­ve­lop­peurs n’ont travaillé au­pa­ra­vant qu’avec Ja­vaS­cript. De plus, le code Ty­peS­cript doit être compilé en Ja­vaS­cript avant de pouvoir être exécuté dans les na­vi­ga­teurs ou les en­vi­ron­ne­ments Node.js, ce qui entraîne une étape sup­plé­men­taire dans le processus de dé­ve­lop­pe­ment.

Pour de petits projets, Ty­peS­cript 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 Ty­peS­cript peuvent né­ces­si­ter davantage de res­sources en raison des in­for­ma­tions sup­plé­men­taires requises sur le type, et de l’étape ad­di­tion­nelle de com­pi­la­tion.

Al­ter­na­tives à Ty­peS­cript

Il existe plusieurs langages de pro­gram­ma­tion Web al­ter­na­tifs à Ty­peS­cript, en fonction des besoins spé­ci­fiques d’un projet et des pré­fé­rences des dé­ve­lop­peurs.

• Flow : Flow est un typage statique pour Ja­vaS­cript développé par Facebook. Il permet d’ajouter des types au code Ja­vaS­cript sans devoir effectuer une con­ver­sion complète vers Ty­peS­cript. Flow est un bon choix si vous souhaitez intégrer pro­gres­si­ve­ment le typage dans vos projets Ja­vaS­cript.

• Dart : il s’agit d’un langage de pro­gram­ma­tion développé par Google qui peut être utilisé pour créer des ap­pli­ca­tions Web et mobiles. Il offre une sécurité de type et de bonnes per­for­mances. Dart est souvent utilisé en com­bi­nai­son avec le framework Flutter pour le dé­ve­lop­pe­ment d’ap­pli­ca­tions mobiles.

• Pu­reS­cript : Pu­reS­cript sert de langage de pro­gram­ma­tion fonc­tion­nel stric­te­ment typé, qui comprend une forte sécurité de type et un style de pro­gram­ma­tion fonc­tion­nel. Il permet l’im­por­ta­tion de bi­blio­thèques Ja­vaS­cript.

• Elm : Elm est un langage fonc­tion­nel, stric­te­ment typé, conçu pour le dé­ve­lop­pe­ment d’ap­pli­ca­tions Web. Elm promeut le principe de « l’ar­chi­tec­ture Elm » et possède une grande sécurité de type.

• ReasonML (Bu­ck­leS­cript) : ce langage est développé par Facebook et basé sur OCaml. Bu­ck­leS­cript est un com­pi­la­teur qui compile ReasonML en Ja­vaS­cript. Il permet également la sécurité des types et une forte in­té­gra­tion avec React pour le dé­ve­lop­pe­ment frontend.