Qu'est-ce que TypeScript? Créez votre premier projet

Typescript est un langage de programmation développé par Microsoft et basé sur JavaScript. Il a été conçu dans le but d'être à la fois plus efficace et puissant que JavaScript. Typescript a été adopté par Google, Facebook et Amazon comme langages par défaut pour le développement Web frontend.

Qu'est-ce que TypeScript ?

TypeScript est un langage de programmation développé par Microsoft pour combler les lacunes de JavaScript en tant que langage de programmation. L'objectif principal de TypeScript est de fournir une alternative aux développeurs qui souhaitent utiliser un langage de type sécurisé, mais qui souhaitent toujours que leurs programmes s'exécutent dans le navigateur.

TypeScript a été conçu avec des applications à grande échelle à l'esprit, et il est compilé avec des optimisations pour la vitesse et la taille. TypeScript a un typage statique, ce qui signifie que les développeurs n'ont pas besoin de spécifier des types au moment de l'exécution, et il fournit également des fonctionnalités telles que des interfaces et des génériques qui ne sont pas disponibles en JavaScript.

Quels sont les avantages de l'utilisation de Typescript ?

Certains des avantages de TypeScript sont :

Le système de type permet d'identifier les erreurs dans votre code avant son exécution.
Le compilateur vous avertira des erreurs ou problèmes potentiels avec votre code.
Le mode strict de Typescript vous aidera à détecter les problèmes avec votre code lorsqu'ils se produisent et à les empêcher de se reproduire à l'avenir.
Il a gagné en popularité ces dernières années et est devenu le langage de programmation le plus apprécié sur Stack Overflow.

Comment apprendre Javascript ?

Il existe de nombreuses façons d'apprendre Typescript. Vous pouvez lire la documentation, suivre un cours en ligne ou participer à un bootcamp.

Comment installer et utiliser Typescript?

Pour installer Typescript, vous avez besoin d'avoir NodeJS et NPM installés sur votre machine. Vous pouvez l'installer globalement comme suit:

npm install -g typescript

Ou l'installer comme dépendance de votre projet, je préfère cette option.

Étape 1: Créez un nouveau projet javascript.

$ mkdir premier-projet-typescript
$ cd premier-projet-typescript
$ npm init --y

Wrote to /Users/<path>/tutorials/premier-projet-typescript/package.json:

{
  "name": "premier-projet-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Étape 2: Ajouter TypeScript comme dépendance de développement.

$ npm install --save-dev typescript

added 1 package, and audited 2 packages in 1s

found 0 vulnerabilities

Installez tsc-watch. Ce programme surveille les modifications de vos fichiers TypeScript et les recharge dès qu'il les détecte.

$ npm install --save-dev tsc-watch

added 20 packages, and audited 22 packages in 3s

found 0 vulnerabilities

Étape 3: Créer un fichier tsconfig.json

C'est là que seront définies les options du compilateur TypeScript. Pour créer un tsconfig.json, exécutez ce qui suit :

npx tsc --init --rootDir src --outDir build \
--esModuleInterop --resolveJsonModule --lib es6 \
--module commonjs --allowJs true --noImplicitAny true

Explication de la commande:

rootDir: C'est l'endroit où TypeScript recherche notre code. Nous l'avons configuré pour chercher dans le dossier src/. C'est là que nous allons écrire notre TypeScript.

outDir: Où TypeScript met notre code compilé. Nous voulons qu'il aille dans un dossier build/.

esModuleInterop: Si vous étiez dans l'espace JavaScript au cours des deux dernières années, vous avez peut-être reconnu que les systèmes de modules étaient devenus un peu hors de contrôle (AMD, SystemJS, ES Modules, etc). Pour un sujet qui nécessite une discussion beaucoup plus longue, si nous utilisons commonjs comme système de modules (pour les applications Node, vous devriez le faire), alors nous avons besoin que ce paramètre soit défini à true.

resolveJsonModule: Si nous utilisons JSON dans ce projet, cette option permet à TypeScript de l'utiliser.

lib: Cette option ajoute des types ambiants à notre projet, ce qui nous permet de nous appuyer sur des fonctionnalités provenant de différentes versions d'Ecmascript, de bibliothèques de test et même de l'api DOM du navigateur. Nous aimerions utiliser certaines fonctionnalités du langage es6. Tout ceci est compilé en es5.

module: commonjs est le système de module standard de Node en 2019. Utilisons-le.

allowJs: Si vous convertissez un ancien projet JavaScript en TypeScript, cette option vous permettra d'inclure des fichiers .js parmi les .ts.

noImplicitAny: Dans les fichiers TypeScript, ne permettez pas qu'un type soit spécifié de manière non explicite. Chaque type doit soit avoir un type spécifique, soit être explicitement déclaré any. Pas de anys implicites.

Nous allons ajouter "DOM" à "lib", ouvrez le fichier tsconfig et modifez lib comme suit : "lib" : ["es6", "DOM"].

Étape 4: Créer le dossier src et le premier fichier TypeScript.

$ mkdir src
$ touch src/index.ts

Ajoutez ce code dans le fichier index.ts

// ici, nous avons precise le type
const userName:string = "Ousseynou DIOP";
// ici, nous n'avons
const salary = "3.000.000";


document.getElementById("name")!.innerHTML = userName;

document.getElementById("salary")!.innerHTML = salary;

Écrivons un peu de code rapide pour nous assurer que notre programme fonctionne. Naviguez vers le répertoire racine et créez un fichier index.html. Copiez et collez le code suivant :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Premier projet Typescript</title>
</head>

<body>
  <h1>Premier projet Typescript</h1>
  <h2>Bonjour M. <span id="name"></span>, votre salaire est: <span id="salary"></span> </h2>

  <script src="build/index.js"></script>
</body>

</html>

Étape 5: Compiler votre code

Pour compiler le code, nous allons utiliser cette commande npx tsc. La commande va créer un dossier build avec le fichier index.js, voici le contenu du fichier:

"use strict";
// ici, nous avons precise le type
const userName = "Ousseynou DIOP";
// ici, nous n'avons
const salary = "3.000.000";
document.getElementById("name").innerHTML = userName;
document.getElementById("salary").innerHTML = salary;

Étape 6: Tester l'application

Ouvrez le fichier index.html avec un navigateur. Quel est le résultat?

Vous avez aimé cet article ? Rejoignez le Bootcamp

Cette application devrait suffire à vous faire découvrir Typescript. Si vous voulez aller plus loin, inscrivez-vous à notre prochaine cohorte.

Qu'est-ce que TypeScript? Créez votre premier projet