Les bases de TypeScript

TypeScript est un langage qui a été développé en 2012 par Microsoft. Et son objectif est de Typer le Javascript.

Mais nous devons surligner ici que TypeScript est un surlangage de Javascript ou encore un superset de Javascript. L’image ci-dessous résume bien cette définition.

Dans le schéma ci-dessus, nous avons :

• JS Today : qui est le Javascript qui est implémenté par les navigateurs ;
• Javascript Next : qui est le Javascript défini par ECMAScript mais qui ne sont pas encore implémenté par les navigateurs. Ainsi, si je veux que mon code Javascript Next soit compréhensible par mon navigateur qui n’implémente pas encore les fonctionnalités, il faut que je le compile en JS Today pour que mon code en Javascript Next soit fonctionnel dans mon navigateur.
• Et TypeScript encore plus de fonctionnalité que du Javascript Next. Mais il faut garder à l’esprit que du JS Today reste du TypeScript valide.

Les fonctionnalités de bases de TypeScript

Avec TypeScript, on peut donner un type statique à du variable Javascript. En effet, en Javascript standard, les variables sont de type dynamique. Celà va permettre d’améliorer :

• l’IntelliSence ;
• la vérification du programme surtout lors de la compilation.

L’intérêt de typer les variables en Javascript est de définir les types de variable. Ainsi, lorsque l’on utilisera ces fonctions, on connaîtra directement le type de variable à utiliser. Ainsi, éviter des pertes de temps à la recherche du cause de l’erreur.

Les différents types en TypeScript

Dans TypeScript, nous pouvons avoir les types suivants :

• Any : un type général pour dire qu’on ne veut pas typer une variable ;
• Natifs à Javascript : ce sont les types standards de Javascript tel que les booléens, les number, etc… ;
• Créés par classe pour par interface.

Il faut garder en mémoire que les fichiers TypeScript ont pour extension .ts.

Les lignes de code ci-dessous montre comment on type les variables en TypeScript.

let a: any; //Type Any

let b: number; // Natifs à Javascript

Pour en connaître plus sur les types de données, on peut voir sur le site https://developer.mozilla.org/fr/docs/Web/JavaScript/Data_structures.

Les types personnalisés

Avant de parler des types personnalisés de TypeScript, voyons d’abord la notion d’Interface.

Tout d’abord, l’interface est une fonctionnalité purement TypeScript. Il permet de définir la forme qu’aura une certaine catégorie d’objet.

Pour déclarer une interface, nous utiliserons les lignes de commande suivante :

interface User{
    id: number;
    name: string;
}

Et pour déclarer une variable de type User, nous utiliserons :

let user1 : User = {
    id: 1,
    name: "Rakoto"
}

On a déjà vu ici comment définir un type de variable à partir d’une interface.

Pour définir un type de variable à partir d’une classe, on va faire comme suit :

class User{
    id: number;
    name: string;
}

Et pour déclarer une variable de type User, nous ferons :

let user1 = new User();