Introduction au TypeScript

Le TypeScript se répand de plus en plus dans l'univers du web. Certain gros framework comme Angular se mettent même à en faire la promotion.

Qu'est ce que c'est au juste que le TypeScript ? Il s'agit d'une implémentation du standard EcmaScript au même titre que JavaScript, que CoffeScript et autres.

Le TypeScript a, par contre, la particularité suivante : tout code JavaScript est un code TypeScript valide. Dans sa philosophie il se voit donc plus comme une surcouche au JavaScript que comme une implémentation totalement indépendante du standard pré-cité.

Le Type de TypeScript

Pourquoi cette sur-couche ? Comme son nom l'indique le TypeScript ajoute un typage explicite au JavaScript.

let chaine = "Je suis une chaine"
let chaine: string = "Je suis une chaine"

Ces deux lignes de code sont identique : il s'agit de la déclaration d'une variable de type String. La première ligne est écrite en JavaScript et la deuxième en TypeScript.

Voilà le vrai intérêt du TypeScript. Forcer l'utilisateur à typer explicitement ses variables. Ça ne parait pas grand chose comme ça mais ça induit énormément de possibilité pour le reste du code.

Au passage vous pouvez utiliser les types primitifs suivant : number, string, boolean, any.

Faire des tableaux

À partir de ces types primitifs vous pouvez fabriquer des tableau. Par exemple dans let messages: string[] la variable messages est un tableau de string.

Lorsque vous déclarez un tableau de cette façon : : any[], vous précisez au système que votre tableau stocke n'importe quel type de variable.

Typer des objets

On a vu comment typer les types primitifs mais si je veux vérifier un objet ? La syntaxe ES6 apporte le mot-clé class.

class Voiture {
  couleur: any
  roule() {

  }
}

Cette syntaxe existe en TypeScript bien-sûr et il ajoute à cela la notion de visibilité (private, public, etc) et les interfaces.

interface User {
  lastname: string
  firstname: string
}

let usr: User = {
  lastname: 'Dupon',
  firstname: 'Jean'
}

Comme dans les autres langage, les interfaces en TypeScript peuvent être considéré comme des contrats que doivent respecter les objets.

Dans l'exemple usr doit respecter le contrat User et donc avoir les membres lastname et firstname qui sont de type string. Si le contrat n'est pas respecté, TypeScript plante à la transpilation.

Dans un cas plus "traditionnel", on peut aussi faire en sorte qu'une class implémente une interface.

interface User {
  lastname: string
  firstname: string
}

class Admin implements User {
  lastname = 'Dupon'
  firstname = 'Jean'
  roles = ['ADMIN']
}

La class Admin pour être considéré comme un User par le reste de la base de code implémenter cette interface. Ici, TypeScript ce comporte comme les autres langages : si Admin ne respecte pas le contrat User — c'est a dire ne possède pas d'attribut lastname et firstname — une erreur est levée.

Propriété d'instance

En orienté objet il y a une notion importante qui est : la différence entre une propriété de classe et une propriété d'instance. La dernière est plus utilisée.

Pour faire rapide : une classe est un "moule" qui permet de créer des instances. Les propriété d'instance sont propres à une de ses instances (au "soit" de cette instance). Elle est accessible en faisant nomdelinstance.propriete ou si c'est l'instance elle-même qui veut utiliser sa propriété this.propriete. Une propriété de classe est une propriété qui est propre à la classe (au "moule"). Pour y accéder il faut faire Nomdelaclasse.propriete

class User {
  lastname: string
}

lastname est une propriété d'instance de User. Elle est déclarée mais pas instanciée.

class User {
  lastname: string = "Dupon"
}

lastname est instanciée à "Dupon".

class User {
  private lastname: string = "Dupon"
}

Vous pouvez ajouter une notion de visibilité aux propriétés. Ici lastname est privée, on ne peut y accéder qu'a l'intérieur de la class User.

Paramètre de constructeur

Souvent les paramètres des constructeurs sont des données dont toute la classe peut avoir besoin à plusieurs étapes de son cycle de vie.

class User {
  private lastname: string
  private firstname: string

  constructor(lastname: string, firstname: string) {
    this.lastname = lastname
    this.firstname = firstname
  }
}

Même si dans certain cas ça change, les développeur de TypeScript se sont rendu compte que cette façon de faire était très répétitive. Ils ont donc décidé de la simplifier un peu.

class User {
  constructor(
    private lastname: string,
    private firstname: string
  ) {}
}

Ce code fait exactement la même chose que le précédent. En TypeScript, si vous indiquez la visibilité dans les paramètres d'un constructeur une propriété d'instance avec la visibilité et le type correspondant est créé automatiquement.

Les deux écritures sont utilisables ensemble.

Conclusion

Les quelques aspect que l'on vient de voir du TypeScript peuvent donner l'impression que "ce n'est pas grand chose" mais elle suffisent largement à modifier votre façon de développer.

Elles apportent aussi quelques avantages comme la vérification du code pendant la transpiration, une autocomplétion beaucoup efficace, etc.

Ce n'est qu'un début d'information sur ce langage. N'hésitez pas à lire la documentation, il y'a encore énormément de chose a découvrir pour profiter pleinement de TypeScript.

Si vous avez des questions ou des remarques/conseils, n'hésitez pas à laisser un commentaire plus bas ! Je serais ravis de vous lire. Et si vous aimez l'article, n'oubliez pas de le partager avec vos amis.