Comprendre Typescript en 5 minutes

Typescript a explosé en popularité en 2019 et continue sa folle course en 2020. Le premier langage qui tape le top 10 en moins de 5 ans. Incroyable. Incroyable qu’on ait toujours pas discuté de cette affaire.

Il était une fois

Nous sommes en 2010. Anders Hejlsberg, le concepteur du framework .NET, en a plein le cul de Javascript. Il bosse chez Microsoft. Chez Microsoft, et chez les clients externes de Microsoft, tout le monde est d’accord sur un point. Le Javascript n’est pas fait pour les projets à grandes échelles.

Mais Javascript est quand même utilisé dans ces projets de grande envergure. Ces projets sont en Javascript pour une raison simple : les navigateurs n’acceptent que le Javascript ! Tout le monde est bloqué avec.

C’est avec ce problème en tête que Microsoft va commencer à bosser sur Typescript. Le projet va être développé pendant deux ans en interne.

En octobre 2012, la version 0.8 de Typescript passe publique pour la première fois. Beaucoup de développeurs vont alors immédiatement changer de religion.

Et même si les premiers adorateurs sont plus qu’intenses, les premières années de Typescript seront discrètes. Le temps pour Typescript de se faire connaitre et de prendre ces marques. À partir de 2017, ça commence à être la folie côté adoption. Et la suite de l’histoire, t’en as sûrement déjà entendu parler non ?

C’est quoi Typescript ?

Typescript est un langage de programmation open source fait par Microsoft. Pour être plus précis, c’est un surensemble de Javascript. C’est-à-dire que tout programme Javascript existant est déjà un programme Typescript valide. Autrement dit, si t’es un développeur Javascript, t’as aucune barrière d’entrée.

Typescript est un langage multi paradigmes. Tu peux faire du fonctionnel, comme de l’orienté objet sans problème. Et je te parle de vrai orienté objet, pas d’orienté objet via prototype comme en Javascript. La combinaison POO et le fait que Typescript soit un langage fortement typé a tout changé.

En fait, Typescript explose en popularité grâce aux développeurs qui viennent de langages comme Java et C++. Ces développeurs ont horreur de Javascript à cause de sa nature interprétée, beaucoup trop permissive. Typescript leur permet de faire du Javascript, donc de travailler dans le navigateur, en gardant leur environnement fortement typé et orienté objet. Et beaucoup d’entre eux voient Typescript comme un tueur de Javascript

Alors, c’est évidemment pas le cas puisqu’en réalité Typescript va générer du Javascript en permanence. Typescript ne fait que transcompiler du code en Javascript. Et je dis bien transcompiler, non pas compiler, car c’est différent. Ce fonctionnement est perturbant ? OK, voyons comment ça marche cette affaire.

Comment ça marche ?

Typescript, c’est très simple. Enfin, c’est simple pour nous, les utilisateurs. Microsoft a dû s’arracher les cheveux à faire ça.

D’abord tu vas développer en Typescript dans des fichiers .ts. Ça ressemble comme deux gouttes d’eau à Javascript, tu vas pas être perdu. La différence c’est que tu seras dans un environnement objet et fortement typé (de façon optionnelle toujours).

Typescript vient avec un compilateur (TSC). Ce compilateur, c’est vraiment ça qui fait que Typescript c’est un truc de fifou. Pendant le développement c’est ce compilateur qui va transcompiler ton application Typescrit en application Javascript. OK, dessin !

Le truc important à comprendre c’est que la partie Typescript c’est la partie développement dans un environnement typé, « sécurisé », fait pour attraper les bugs. Après transcompilation, on est en Javascript. C’est la partie interprétation au runtime et donc plus exposé aux bugs.

Mais comme on est passé par Typescript avant, notre application est « renforcée ». Et c’est ça qui fait le succès de Typescript. On a assez discuté théorie, mettons les mains dedans.

Fais voir le code

Je pars du principe que tu es sur une sainte distrib Linux et les exemples ici tournent tous sur du Node 13. Commençons par installer cette affaire. On va utiliser npm, l’installer de façon générale et vérifier que l’installation s’est bien faite.

npm install -g typescript
tsc --version

Débutons par un truc quotidien dans ton Javascript de tous les jours. Un simple async/await. On va appeler une fonction async via un await et on va simuler une latence de 1 sec avec un setTimeout et une promesse. Pour le moment, on reste en format Javascript et ça donne ça.

async.ts

async function displayUser(idUser) {
  try {
    const user = await _getUserData(idUser)

    console.log(user)
  } catch (error) {
    console.log(error)
  }
}

async function _getUserData(id) {
  const user = await new Promise(resolve => setTimeout(() => resolve({ id,  name: 'superToto' }), 1000))
  
  return user
}

displayUser(1)

Je t’ai dit plus haut que tout code Javascript et un code Typescript valide. Donc on devrait pouvoir transcompiler ce code non ? Lançons le compilateur dans le même dossier pour voir.

tsc

Ce qui va générer un fichier async.js qui ressemble à ça.

function displayUser(idUser) {
    return __awaiter(this, void 0, void 0, function () {
        var user, error_1;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    _a.trys.push([0, 2, , 3]);
                    return [4 /*yield*/, _getUserData(idUser)];
                case 1:
                    user = _a.sent();
                    console.log(user);
                    return [3 /*break*/, 3];
                case 2:
                    error_1 = _a.sent();
                    console.log(error_1);
                    return [3 /*break*/, 3];
                case 3: return [2 /*return*/];
            }
        });
    });
}
function _getUserData(id) {
    return __awaiter(this, void 0, void 0, function () {
        var user;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve({ id: id, name: 'superToto' }); }, 1000); })];
                case 1:
                    user = _a.sent();
                    return [2 /*return*/, user];
            }
        });
    });
}

Et là tu vas me dire : c’est quoi cet enfer ? D’où sort tout ce code infernal ? C’est quoi ce bordel ? Je préfère mourir que bosser avec un truc pareil. Et je te comprends.

Mais en fait, c’est juste qu’on n’a pas configuré notre compilateur. Alors du coup, il fait n’importe quoi. Par défaut, il va partir du principe que tu veux du Javascript compatible ES3. Une très ancienne spécification. Une époque ou async/await n’existait pas. Il essaye de reproduire async/await comme si on était en 1999.

Pour éviter cette torture pour les yeux, configurons cette affaire. Pour ce faire, comme toujours, direction la doc. On va créer un fichier tsconfig.json à la racine. Ça va être notre config.

{
  "compilerOptions": {
    "target": "esnext",
    "watch": true
  }
}

Target : c’est la cible de compilation Javascript. Il faut mettre la spécification ECMAScript que tu veux. Y’a pas longtemps je t’ai parler de l’ES2020 alors mettons la dernière spécification via « esnext ».

Watch : ça veut dire que le compilateur va transcompiler ton code si ton fichier change. Semblable à un nodemon en NodeJS. En relançant TSC, le code généré est identique et le compilateur attend tout changement.

Très bien, maintenant regardons un exemple plus évolué. On va faire ce que Javascript ne sais pas faire. Utilisation de vraie interface (sans duck typing), de typage fort et le tout dans un environnement objet.

class Hero {
  constructor(public name: String) {}

  age: Number;
  powers: Array<string>;
}

interface Anonym {
  name: string;
  age: number;
  powers: Array<string>;
}

function displayHeroInfo(anonym: Anonym) {
  const heroInfo = {
    name: anonym.name,
    age: anonym.age,
    powers: anonym.powers
  }

  console.log(heroInfo);
}

const superToto = new Hero("SuperToto");

superToto.age = 25
superToto.powers = ['telekinesis', 'laser']

displayHeroInfo(superToto);

Je crée une classe Hero avec un constructeur. L’utilisation du public dans les arguments du constructeur me permet de créer automatiquement une propriété name. Puis, toujours dans la classe Hero, je déclare age (typé number) et powers (typé array de string).

Derrière, je crée une interface qui établit un contrat name, age, powers. Ensuite, une fonction qui prend en argument mon interface. Enfin, un bout de code qui va appeler ma classe pour afficher le JSON.

Et ça fonctionne ! Essaye de passer un string pour l’age, de pas mettre de name à l’instanciation de la classe ou d’enlever une propriété dans la classe. Typescript va hurler et te laissera pas transcompiler en Javascript.

Épilogue

Ça fait plus de cinq minutes qu’on discute, je m’arrête là. Tu trouveras plus d’exemples de code par ici. Je trouve cette technologie vraiment parfaite pour des projets de grande envergure. Un layer de protection pareille au développement est rassurant. J’espère t’avoir donné envie de tester tout ça par toi-même !