Navigation

PeerTube est développé à l’aide de TypeScript, un langage apportant des fonctionnalités supplémentaires à JavaScript (on parle de superset ou de surcouche de JS). Conçu par Anders Hejlsberg (concepteur de C#, chez Microsoft) avec une première version en 2012, le but de ce langage est de permettre, grâce à l’introduction du static-typing, des classes et de la modularité, de développer des applications à plus grande échelle¹⁾ et d’augmenter la fiabilité et la maintenabilité du code.

Nous allons dans ce petit exercice pratique réaliser notre “Hello world!” en TypeScript.

Si vous avez installé l’image docker fournie pour cette soutenance, vous pouvez sauter cette étape.

Sinon, il vous suffit d’installer le package npm TypeScript en tapant dans votre terminal :

$ sudo npm install -g typescript

Pour installer le gestionnaire de paquets npm, c’est par ici.

C’est tout, vous êtes prêts à créer votre premier script en TypeScript !

Dans le répertoire de votre choix, créez le script helloTypeScript.ts :

$ vim helloTypeScript.ts

Insérez-y le code suivant :

function bienvenue(personne) {
    return "Hello " + personne + "!";
}
 
let user = "Picasoft";
 
document.body.innerHTML = bienvenue(user);

Ici, une fonction bienvenue retourne la concaténation d’un “Hello” avec le nom d’une personne passé en paramètre. On déclare ensuite la variable user que l’on passe en paramètre de notre fonction, le tout inséré dans le body du HTML correspondant.

Le terme let est une façon très récente de déclarer une variable, permettant de passer outre les anomalies de var.

Il reste maintenant à compiler le fichier :

$ tsc helloTypeScript.ts

Dans le répertoire courant, un fichier JavaScript vient d’être généré, vous pouvez aller y jeter un coup d’oeil.

Créez ensuite un fichier HTML minimal afin de pouvoir tester votre script :

$ vim helloTypeScript.html

Y écrire le code suivant :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello TypeScript</title>
    </head>
    <body>
        <script src="helloTypeScript.js"></script>
    </body>
</html>

Tout est enfin prêt pour que vous puissiez ouvrir helloTypeScript.html dans votre navigateur et constater le résultat !

Le premier apport de TypeScript à JavaScript, ce qui lui vaut son nom, est le typage. Nous allons maintenant voir comment cela se traduit concrètement dans le code.

Transformez la définition de la fonction bienvenue de telle sorte à ajouter au paramètre personne un type string :

function bienvenue(personne: string) { ... }

Relancez la compilation et observez le changement dans le fichier JavaScript généré.

A présent, transformez la valeur de user en 42. Que retourne la compilation ? Qu’en est-il du fichier JS ?

Pour aller plus loin dans la découverte de TypeScript, il est possible de consulter le wiki sur les concepts principaux que nous avons réalisé, ainsi que la documentation.

Cette mise en jambe faite, il n’y a plus qu’à plonger dans le code de PeerTube !

¹⁾

Un article expliquant ce qu'apporte TypeScript à JavaScript pour développer de plus grosses applications