Qu'est-ce que Typescript ?

Typescript est un langage de programmation fortement typé et open-source, développé par Microsoft.

Aucun environnement n'exécute à proprement parler du TypeScript. Il est d'abord transpilé en JavaScript avant d'etre exécuté, généralement par un navigateur ou Node.js.

L'objectif de TypeScript est d'améliorer la maintenabilité et la lisibilité du code Javascript en permettant le typage des variables.

Typescript, langage compilé ?

Par abus de langage, on parle de compilation TypeScript. Mais si on veut être exact, on doit parler de transpilation : en effet Typescript n'est pas réellement compilé.

Une compilation transforme un langage "humain" en langage machine. Or, TypeScript est transformé en JavaScript, qui est un langage interpreté. Un langage interpreté est exécuté par un logiciel (un interpréteur de code), alors qu'un langage compilé est transformé en langage machine, et exécuté par un système d'exploitation.

Pourquoi Typescript ?

Typescript a été créé pour pallier certains manquements de Javascript. Principalement : le typage (d'où le nom TypeScript).

Le typage est souhaitable dans le sens où il permet d'améliorer la maintenabilité, la propreté et la lisibilité du code.

Le typage est aussi connu pour améliorer les performances mais à l'inverse des langages compilés, le typage n'améliore pas les performances dans le cas de TypeScript : le code est transformé en JavaScript, qui n'utilise pas les types ajoutés par TypeScript.

Les fonctionnalités de TypeScript

Voici une liste non exhaustive des fonctionnalités apportées par Typescript :

• Le typage explicite/implicite
• Les classes
• L'héritage
• Accesseurs public/private
• Les interfaces
• Les modules
• Les énumérations
• Les types génériques

Typescript s'adapte à la version de JavaScript que vous utilisez et est compatible avec Node.Js.

Le typage par annotation

Pour typer une variable explicitement, on utilise en TypeScript la notation ":" suivi du type. C'est ce qu'on appelle une annotation.

1
2
3
const title: string = 'test';
const page: number = 25;
const person: object = {};

Remarquez qu'un type a été attribué à chaque propriété. Mais si on essaie d'assigner une valeur qui ne correspond pas au type de la propriété cela produira une erreur :

1
2
let title: string = 'test';
title = 12; // TypeError: 12 is not a string

Dans cet exemple, TypeScript n'ira pas au bout de la compilation car il détectera une erreur de typage.

Le typage par inférence

1
2
let title = "Hello";
title = 12; // TypeError: 12 is not a string

Ce code produit une erreur de compilation. Est-ce que vous devinez pourquoi ?

C'est parce que même si vous n'avez pas typé la variabletitle, le compilateur aura défini lui-même le type en fonction de la première valeur qui a été affectée à la variable. title est donc de type string et ne peut pas se voir attribué une valeur de type number.

On appelle ça le typage par inférence.

Composition de types

Vous pouvez aussi typer une variable de plusieurs types différents, grâce à la composition de types. Cela peut s'avérer utile, par exemple pour typer le retour des fonctions qui implémentent des conditions.

1
2
3
let age : string | number;
age = 12;
age = '12 ans';

Ce code ne produira pas d'erreur car la variable est explicitement typée string OU number. Attention à ne pas abuser de cette fonctionnalité cependant, il est rarement une bonne idée de joindre des types aussi distincts que string et number.

La composition de type s'utilisera plutôt dans ce genre de cas :

1
2
let vehicle : Car | Boat;
let age: number | null;

Typage des fonctions

Pour les fonctions, vous pouvez typer les paramètres et/ou la valeur de retour comme ceci :

Valeur de retour

Pour typer une valeur de retour, placez une annotion de typage juste avant l'ouverture du bloc d'éxecution de la fonction (après la fermeture de la parenthèse).

1
2
3
function getAdminUser(): User {
//...
}

Paramètres

Pour typer un paramètre, placez une annotion de typage juste après le nom du paramètre.

1
2
3
function searchUserById(userId: number) {
// ...
}

Vous pouvez (et devriez!) bien sûr utiliser les 2 approches sur une même fonction :

1
2
3
function searchUserById(userId: number): User {
// ...
}

Les classes

Déclarer une classe

En TypeScript, pour déclarer une classe vous devez utiliser le mot-clé class, suivi du nom de la classe et les accolades.

1
class MyNewClass {}

Déclarer des attributs

Voici comment déclarer les attributs de vos classes. De manière facultative, vous pouvez choisir de les typer :

1
2
3
4
class MyNewClass {
  x: number;
  y: number;
}

Par ailleurs, vous pouvez aussi donner une valeur initiale à l'attribut comme ceci :

1
2
3
4
class MyNewClass {
  x: number = 0;
  y: number = 2;
}

Implicitement, les attributs sont accessibles publiquement et vous pouvez donc y accéder en dehors de la classe pour modifier leur valeur.

Les interfaces

L'interface vous permet de typer un objet sans avoir à utiliser de classe et à gérer des instances.

Elle peut aussi vous pemettre de contraindre une classe en implémentant une interface.

Exemple :

1
2
3
4
5
6
interface Exemple {
  a: string;
  b: number;
  c: any;
}
let obj: Exemple = {a: 'Hello', b: 12, c: {test: 'hello'}};

Dans cet exemple, obj est typé Exemple (qui est une interface) et donc obj doit contenir obligatoirement une propriété a de type string, une propriété b de type number et une propriété c de n'importe quel type (any).

Conclusion

Voilà pour cette introduction à Typescript, retenez que ce langage est un ajout des fonctionnalités de typage manquantes à JavaScript. TypeScript nous donne tous les outils pour produire un code correct et maintenable, n'hésitez pas à creuser le sujet !

J'espère que cet article vous a plu, n'hésitez pas à laisser un commentaire si vous avez des idées d'amélioration.