Apprendre Angular en vidéos, ça te tente?
Pourquoi vous devez absolument utiliser TypeScript?

Pourquoi vous devez absolument utiliser TypeScript?

Nous nous retrouvons pour parler un peu de TypeScript. Je ne vais pas vous faire tout l’historique de ce langage. Ce qu’il faut essentiellement savoir est que le TypeScript est un langage open-source développé par Microsoft, et propose une solide alternative au JavaScript.

Pourquoi TypeScript?

Les deux avantages majeurs d’utiliser TypeScript :

  • Il fournit une solide option pour le typage du JavaScript
  • Il fournit les modifications d’ES5 et ES6 pour les compilateurs JavaScript actuels

Ces deux points nous motivent clairement à regarder de plus près ce langage.

 

Le typage

Une question vient naturellement quand l’on fait du JavaScript depuis longtemps et qu’on entend parler de TypeScript :

“Pourquoi nous embêter à ajouter des types au JavaScript?”

Les types ont l’avantage non négligeable d’améliorer la qualité et la compréhension du code. De grandes équipes (Google,Microsoft,Facebook) en sont arrivés à cette conclusion. Plus spécifiquement :

  • Les types améliore la facilité de refactorer le code.
  • Les types sont l’une des meilleurs formes de documentation qui soit.

TypeScript nous permet de faire tout cela facilement. En y pensant, pourquoi vous embêtez avec des prototypes dans tous les sens alors que vous pouvez rendre votre code maintenable avec TypeScript.

 

JavaScript = TypeScript

TypeScript permet de compiler des types de manière sécurisée en code JavaScript. Ce n’est pas vraiment une surprise vu le nom du langage. Une des choses qui est vraiment bien est le fait que le typage est optionnel. Ton fichier JavaScript .js est renommé en un fichier .ts. Ainsi il pourra fournir un .js équivalent au fichier JavaScript original. il est également un superset de JavaScript avec pour option le typage.

Les types peuvent être implicites

TypeScript va essayer de déterminer le type de chaque variable aussi précisément que possible dans le but d’améliorer les performances. Dans l’exemple suivant, il va comprendre le type de la variable foo (number) par lui-même. En conséquence il va donc générer une erreur sur la deuxième ligne.

var foo = 123;
foo = '456'; // Error: cannot assign `string` to `number`

// Est-ce que foo est de type string ou number?

Si tu codes quelque chose dans le style de l’exemple, en JavaScript tu n’es pas certain que ta variable foo sera de type string ou number. Avec TypeScript tu seras prévenu si le type de l’assignation change puisqu’il te générera une erreur.

 

Les types peuvent être explicites

Comme nous l’avons mentionné un peu plus tôt dans l’article, il va essayer de déterminer le type de ta variable. Cependant, il est possible d’utiliser les annotations pour :

  • Aider le compilateur et surtout aider le prochain développeur à voir directement le type de ta variable
  • Forcer le compilateur à prendre ta variable pour le type que tu lui as explicitement mis.

TypeScript utilise les suffixes après les variables pour préciser le type :

var foo: number = 123;

Comme pour le type implicite, le compilateur va retourner une erreur si tu assignes le mauvais type à ta variable :

var foo: number = '123'; // Error: cannot assign a `string` to a `number`

Les types structurent ton code

Dans pas mal de langages où le typage est obligatoire (C#, Java,…), nous ne nous posons  même plus la question sur la structure qu’apporte le typage à notre code. Comme le JavaScript est un langage non typé, il arrive souvent que nous nous retrouvons avec un code complètement désorganisé.

Le TypeScript nous permet de définir des interfaces pour pouvoir structurer notre code et aider les développeurs à mieux comprendre.

Dans l’exemple qui suit, la fonction ITakePoint2D  accepte n’importe quel objet qui contient x et y :

interface Point2D {
    x: number;
    y: number;
}
interface Point3D {
    x: number;
    y: number;
    z: number;
}
var point2D: Point2D = { x: 0, y: 10 }
var point3D: Point3D = { x: 0, y: 10, z: 20 }
function iTakePoint2D(point: Point2D) {  }

iTakePoint2D(point2D); // Match parfait
iTakePoint2D(point3D); // Informations fournies ok 
iTakePoint2D({ x: 0 }); // Error: missing information `y`

 

Le futur du JavaScript?

TypeScript fournit les features qui sont dans ES6 et dans ES5. L’équipe en charge du développement de TypeScript travaille activement pour ajouter de nouvelles features afin de nous permettre de développer plus aisément. Cette liste va être de plus en plus exhaustive au fil du temps. J’aimerai finir par un exemple de classe pour montrer sa puissance :

class Point {
    constructor(public x: number, public y: number) {
    }
    add(point: Point) {
        return new Point(this.x + point.x, this.y + point.y);
    }
}

var p1 = new Point(0, 10);
var p2 = new Point(10, 20);
var p3 = p1.add(p2); // {x:10,y:30}

Et le must du must, la fonction définie de cette manière :

code class="javascript">var inc = (x)=>x+1;

 

Nous avons vu les bases de ce que nous pouvons faire avec TypeScript et ce qu’il va nous apporter pour les années à venir.

Partagez, si vous aimez

Laisser un commentaire

Specify Facebook App ID and Secret in Super Socializer > Social Login section in admin panel for Facebook Login to work

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