Découverte de TypeScript

TypeScript est un sur-ensemble de JavaScript d’ES5 et maintenant ES6 qui propose quelques options supplémentaires intéressantes comme le typage des variables par exemple. En gros, c’est du JavaScript amélioré sauf qu’ici le code sera compilé pour donner le code JavaScript final.

Avant de passer à l’action, voici quelques explications !

Les types et les fonctions

La syntaxe de typage est très simple let variable: type;, par exemple avec les types primaires, ça donnerait :

let name: string = 'John Connor'; 
let phone: number;

(*) Les types sont facultatifs dans certains cas, ici le compilateur TS peut déduire le type de username grâce à sa valeur "John Connor".

On peut aussi définir une classe et typer un objet avec !

let user: User = new User();

Ce qui reste cool, c’est qu’une variable, même avec TypeScript peu toujours accepter plusieurs types avec "any" :

let something: any = 100;
something = "stone";

Les énumérations sont bien pratiques aussi et TypeScript propose un type enum :

 
enum UserStatus { Registered, Activated, Banned, Deleted }
let user: User = new User();
user.status = UserStatus.Registered;

Les retours typés dans la définition de la fonction améliorent également la lecture du code :

enum UserStatus { Registered, Activated, Banned, Deleted } 
// ...

// no return -> void
function registerUser(user:User): void{
   //call ajax, do what you want...
   user.status = UserStatus.Registered;
}

// typed return -> "User"
function activeUser(user:User):User{
   //call ajax, do what you want...
   user.status = UserStatus.Activated;
   return user;
}

Avec JavaScript, les fonctions à paramètres optionnels sont possibles car lorsqu’on ne passe pas de paramètre, leur valeur sera simplement définie undefined. Avec TypeScript, le compilateur va coincé si on a pas précisé avec ? que ce n’est pas obligatoire ! Voici la syntaxe pour annoncé que c’est optionnel :

function addReputationPoints(user: HasReputation, points?:number): void{
   points = points || 0;
   user.reputationPoints += points;
}

Les Interfaces

En JavaScript, tout fonctionnera correctement si les objets possèdent les propriétés attendues.

// Js sample
function addPhoneNumber(user, phoneNumber){
   user.phone = phoneNumber;
}

Dans cet exemple de fonction JavaScript, nous avons en paramètre d’entrée un objet utilisateur user et un numéro de téléphone phoneNumber.

Cette fonction peut donc être appliquée à n’importe quel objet possédant la propriété phone. Grâce à TypeScript, on peut définir une interface pour s’assurer que les objets correspondent bien au types d’objet attendu et éviter certaines erreurs du coup !

// Note: dès qu'il y a plus d'un paramètre à vérifier, je préfère créer une interface
interface HasPhoneNumber {
   phone: number;
}

function addPhoneNumber(user: HasPhoneNumber, phoneNumber:number):void{
   user.phone = phoneNumber;
}

Ca correspond à la même chose que le code ci-dessous mais je trouve que c’est souvent plus lisible avec une interface nommé en dehors de la signature de la fonction mais ça dépend des cas, tu adaptes hein ^^.

// Note: dans le cas présent, je préfère cette façon de faire
function addPhoneNumber(user: { phone: number }, phoneNumber:number):void{ 
   user.phone = phoneNumber; 
}

Les interfaces peuvent étendre d’autres interfaces, voici un exemple :

interface Human extends HasBirthday, HasPhoneNumber{
   //...
}

class User implements Human{
   //...
}

Les classes

Une classe peut implémenter une interface (ou plusieurs même) avec TypeScript, ce qui pourrait donner par exemple :

interface CanFollow{
   follow(postId: number): void;
}

class User implements CanFollow{
   follow(postId){
      console.log("Now, I'm following a post !");
   }
}

Par défaut, les propriétés d’une classe sont public mais TypeScript introduit le mot-clé private pour « cacher » une propriété ou même une méthode.

class User {
   public surname: string;
   private realname: string;

   constructor(surname: string, realname: string){
      this.surname = surname;
      this.realname = realname;
   }

Voici pour un petit tour rapide de TypeScript histoire de comprendre que ça va nous faciliter énormément la vie pour un minimum d’effort d’apprentissage ! Que demander de mieux ?

Je prépare un tutoriel en quelques chapitres pour apprendre à utiliser TypeScript avec les dernières versions d’Angular 😉