TYPESCRIPT : Du Super JS

TypeScript est un langage de programmation JavaScript open-source développé par Microsoft (Co-créé par Anders Hejlsberg, principal inventeur de C#).

Il constitue un sur-ensemble de JavaScript, ce qui signifie que tout code JavaScript valide peut être utilisé avec TypeScript. Le code est transpilé par le biais d’un transpileur vers du code JS standard, qui lui sera interprété par le navigateur.

Son but principal est d'améliorer et sécuriser la production de code JS.

Pourquoi TypeScript ?

Utiliser le langage améliore nettement la lisibilité du code, et permet d’avoir une syntaxe pérenne (Support navigateurs ES5, ES6).

C’est par ailleurs un choix sans risque dans la mesure où du code JS peut y être inséré sans provoquer d’erreurs, et l’utilisation de JS dans du TypeScript est tout à fait possible.

Le principal avantage de TypeScript est de pouvoir disposer de possibilités étendues, dont notamment l’utilisation de let (variable a portée limitée), le typage des variables mais également l’utilisation de la programmation orientée objet.

L'avantage de TypeScript sur tous les autres langages qui sont compilés en JavaScript est qu'il en est un sur-ensemble : vous pouvez réutiliser un fichier JS et y inclure des fonctions ajoutées par TypeScript, puis renommer le fichier de .js en .ts.

Et quand le langage se développe, il se fait avec des fonctions définies dans ECMAScript 6 et suivant, et ainsi il reste un sur-ensemble de JS.

Utilisation et installation

Pour pouvoir utiliser Typescript, il est impératif de d’avoir node.js installé sur votre environnement de développement.

Installation : 

(sudo) npm install –g typescript

La commande va installer le transpileur tsc.

Utilisation

Pour l’utilisation, de nombreuses commandes sont disponibles en utilisant la commande :

tsc –help
tsc file.ts

Pour transpiler file.ts en file.js au même niveau.

tsc file.ts --watch

Pour compiler et utiliser le watcher.

tsc file.ts –target ES5

Pour définir le target.

Le typage

Avec TypeScript, il est possible d’utiliser le typage des variables mais également le retour des fonctions. Bien que recommandé c’est toutefois optionnel.

Le langage comporte les types suivants :

boolean
number
string
list (Converti en tableau, mais avec un type en option, dans ce cas converti en tableau typé)
enum (Converti provisoirement en tableau ou constantes)
const enum (Une constante avec plusieurs propriétés)
any (type générique qui supporte toutes les valeurs)
void (pour le retour des fonctions)
undefined

Qui se défini comme suit :

let myString : string;
let myNumber : number;

L’intérêt ici est de pouvoir avoir un retour immédiat sur la validité du code en ce sens que si une erreur survient, la console nous avertit immédiatement sans avoir à passer par le navigateur ou le console.log().

Par exemple si on change la valeur de myString = 1  voilà le retour de la console :

types.ts(14,1): error TS2322: Type '1' is not assignable to type 'string'.
14:09:44 - Compilation complete. Watching for file changes.

Les principaux IDE supportent l’intégration de Typescript, dont VsCode où il est intégré par défaut et les erreurs sont soulignées dynamiquement lors du codage.

La POO

TypeScript rend possible l’utilisation traditionnelle de la Programmation Orientée Objet grâce aux éléments suivants :

constructor()
Class
let (portée limitée au bloc)
Héritage
Interfaces
Public, Protected & Private

Le playground montre comment le code TypeScript devient du JavaScript.

Classes et interfaces : on définit le constructeur par le mot réservé constructor, et on ajoute this pour référence un attribut dans la classe.

Par exemple :

class voiture {
  passagers = 4;
  constructor(personnes : number) {
    this.passagers = personnes;
  }

  mamethode(message : string) {
    console.log(message);
  }
}

var mavoiture = new voiture(2);

L'héritage se fait avec le mot-clé extends:

class voiture extends vehicule { 
    ... 
}

Le constructeur peut appeler le constructeur de la classe héritée avec la méthode super().

Les attributs étant publics par défaut, on a besoin seulement du mot-clé private pour déclarer un membre comme privé.

Le mot-réservé static peut s'appliquer au membres d'une classe afin de partager les valeurs assignées entre toutes les classes héritées.

Les classes peuvent être associées à des interfaces.

Exemple:

class moteur extends voiture {
  puissance : number;
}
interface voiture {
  passagers : number;
}

var mavoiture : voiture = { passagers : 4, puissance : 300 };

Cet article n'étant qu'un aperçu des possibilités qu'offre le TypeScript, il n'est en aucun cas exhaustif. Le site officiel est un bon point de départ pour celui qui souhaite découvrir et utiliser le language.

Ressources :

TypeScript. Le site officiel.
Playground. Testez en direct la conversion TypeScript en JavaScript.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *