Hello TypeScript

====== TypeScript: "Hello Picasoft!" ====== PeerTube est développé à l'aide de [[http://www.typescriptlang.org/index.html|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(([[https://bit.ly/2R0aIt3|Un article expliquant ce qu'apporte TypeScript à JavaScript pour développer de plus grosses applications]])) et d'augmenter la fiabilité et la maintenabilité du code. Nous allons dans ce petit exercice pratique réaliser notre "Hello world!" en TypeScript. ===== Installation de 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 [[https://www.npmjs.com/get-npm|par ici]]. C'est tout, vous êtes prêts à créer votre premier script en TypeScript ! ===== Un premier script ===== 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 [[https://www.typescriptlang.org/docs/handbook/variable-declarations.html|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 :




    
        
        Hello TypeScript

Tout est enfin prêt pour que vous puissiez ouvrir ''helloTypeScript.html'' dans votre navigateur et constater le résultat ! ===== Le static-typing ===== 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 ===== Pour aller plus loin dans la découverte de TypeScript, il est possible de consulter le [[txs:contrib:peertube_a18:concepts_typescript|wiki sur les concepts principaux]] que nous avons réalisé, ainsi que la [[http://www.typescriptlang.org/docs/home.html|documentation]]. Cette mise en jambe faite, il n'y a plus qu'à plonger dans le code de PeerTube !