Conversion d’une application JavaScript simple en TypeScript

Dans cet article, nous allons créer une application Node.js simple, puis la migrer vers une application TypeScript.

Javascript

JavaScript est un langage de script natif du Web utilisé pour rendre les applications Web interactives. Il est généralement utilisé pour ajouter une logique au balisage (HTML) et aux feuilles de style (CSS) dans le développement Web. JavaScript est ce qui rend une page Web interactive pour l’utilisateur au lieu d’être simple et statique. Il ouvre aux utilisateurs un moyen d’interagir avec les applications Web. Il est très populaire et est utilisé pour créer des applications Web, à la fois côté client et côté serveur, comme lors de la création d’applications serveur à l’aide de Node.

Manuscrit

TypeScript est un langage compilé orienté objet, fortement typé et créé par l’équipe de Microsoft. Il est considéré comme un sur-ensemble de JavaScript, prenant en charge d’autres bibliothèques JavaScript comme Angular, et est très portable pour divers navigateurs, systèmes d’exploitation et même appareils.

JavaScript contre TypeScript

JavaScript présente quelques limitations lorsque vous envisagez de créer une application côté serveur évolutive. Lorsque JavaScript a été créé, l’objectif principal était le développement Web côté client et non côté serveur. Cependant, avec l’émergence de Node.js, de plus en plus de personnes ont commencé à l’utiliser côté serveur et cela a commencé à révéler ces limitations. Certaines choses comme la programmation orientée objet (OOP), la vérification de type et les vérifications d’erreurs au moment de la compilation ont rendu plus difficile pour JavaScript d’être un excellent choix pour les applications serveur et TypeScript a donc été conçu pour résoudre ce problème.

JavaScript reste toujours un langage de script, tandis que TypeScript est un langage POO. TypeScript possède également des fonctionnalités telles que des interfaces et la prise en charge de modules que JavaScript ne propose pas. JavaScript est un langage interprété, ce qui signifie que le navigateur Web l’interprète, mais TypeScript est un langage compilé et donc il compile toujours JavaScript.

Ce que nous construisons

Dans cet article, nous allons créer notre toute première application JavaScript, puis une fois qu’elle fonctionnera, nous la convertirons en TypeScript. Cela illustrera mieux l’idée de migrer de JavaScript vers TypeScript pour les débutants.

Configurer Node.js

La première chose à faire est d’installer Node.js si vous ne l’avez pas déjà installé. Node.js nous aide essentiellement à exécuter nos fichiers JavaScript.

Dirigez-vous vers Node.js et téléchargez-le pour votre machine, extrayez le fichier et installez-le. Vous pouvez vérifier si Node est déjà installé en ouvrant votre terminal et en exécutant la commande ci-dessous :

node -v

Si vous voyez une réponse de version, Node est déjà installé sur votre PC.

Création de fichiers

La prochaine chose à faire est de créer un nouveau dossier dans n’importe quel répertoire choisi sur votre PC, puis de l’ouvrir dans votre éditeur de code. J’utilise et recommande Code VSque vous pouvez viens ici. Créez un nouveau fichier, appelez-le server.js et copiez-y le bloc de code ci-dessous :

var http = require('http');
function onRequest(req, res){
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.write('Hello there world!');
  res.end();
}
http.createServer(onRequest).listen(8000);

Cela crée essentiellement une variable HTTP qui se connecte à votre navigateur, puis crée un serveur avec la fonction onRequest et écoute sur le port 8000 pour fournir la réponse, qui est simplement du texte brut disant bonjour le monde.

Ouvrez maintenant le terminal dans votre application VS Code et exécutez la commande ci-dessous :

node server.js

Ouvrez n’importe lequel de vos navigateurs sur localhost:8000, et vous verrez que le message hello world s’affiche comme prévu.

Manifeste du projet

Comme tous les frameworks JavaScript dont vous devez avoir entendu parler, comme Angular, il existe toujours un fichier manifeste qui affiche vos configurations et sert en quelque sorte de manuel pour savoir comment naviguer, tester et créer vos projets Node. Il est généralement au format JSON, le fichier est communément nommé package.json et nous pouvons le créer facilement nous-mêmes. Créez un nouveau fichier et appelez-le package.json et à l’intérieur de celui-ci, copiez le bloc de code ci-dessous :

{
"name": "nodeapp",
"version": "1.0.0",
"description": "a test node application",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"author": "Lotanna Nwose",
"license": "ISC"
}

Vous pouvez également y parvenir facilement en exécutant la commande :

npm init

Cela fera apparaître un assistant qui vous guidera tout au long de la création de ce fichier exact.

Utiliser Express

Node.js possède également quelques frameworks qui facilitent encore plus l’exécution de JavaScript, vous n’avez donc pas besoin de connaître toutes ces commandes que nous venons de voir. L’utilisation d’Express commence par son installation :

npm install express

Créez maintenant un nouveau fichier et appelez-le index.js, puis à l’intérieur, collez le bloc de code ci-dessous :

const express = require('express');
const app = express();
app.get("https://www.telerik.com/",(req, res, next) => {
    res.send('hello there world!')
});
app.listen('8000', () => {
    console.log('Server is on');
});

Avec Express, nous utilisons l’application pour envoyer notre demande et pour écouter sur le port aussi. Cela nous donne exactement le même résultat et résume beaucoup plus. Maintenant que nous avons défini l’application hello world, migrons le même projet vers TypeScript.

Conversion en TypeScript

La première chose à noter est que TypeScript se compile en JavaScript comme nous l’avons déjà mentionné. Maintenant, pour installer TypeScript, vous pouvez le faire dans votre terminal :

npx typescript — - init

Dans le fichier tsconfig généré, assurez-vous que ces options ne sont pas commentées :

“moduleResolution”: “node”
“rootDir”: “./src”
“outDir”: “./dist”

Ensuite, créez un dossier, appelez-le src et déplacez-y le fichier index.js.

Installez ensuite TypeScript en tant que dépendance de développement. Vous pouvez le faire avec cette commande :

npm i -D typescript @types/node @types/express

Maintenant, votre fichier package.json devrait ressembler à ceci :

{
  "name": "nodeapp",
  "version": "1.0.0",
  "description": "a test node application",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node dist/index.js"
    "build": "tsc -p tsconfig.json"
  },
  "author": "Lotanna Nwose",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^16.11.10",
    "typescript": "^4.5.2"
  }
}

Nous avons également ajouté une commande de construction pour compiler le TypeScript en code JavaScript dans le dossier dist.

La prochaine étape consiste à renommer le fichier index.js en index.ts. Immédiatement, vous verrez des lignes rouges partout, indiquant certaines choses qui fonctionnent en JavaScript et qui ne seront pas autorisées dans TypeScript.

TypeScript est JavaScript

Sans changer quoi que ce soit de majeur dans le code, nous pouvons utiliser le JavaScript directement dans un fichier TS.

const express = require('express');
const app = express();
app.get("https://www.telerik.com/",(req:any, res:any, next:any) => {
    res.send('hello there world!')
});
app.listen('8000', () => {
    console.log('Server is on');
});

Construisons-le pour montrer ceci :

npm run build
npm run start

Vous verrez qu’un dist dossier a été créé avec un fichier index.js nouvellement compilé, et la deuxième commande l’exécute pour montrer qu’il fonctionne comme prévu.

Refonte du code

Maintenant, TypeScript a quelques nouvelles règles comme tout doit avoir un type et les modules doivent être importés plutôt que d’utiliser la fonction requise. Effectuons une partie de cela dans notre code.

Tout d’abord, nous pouvons changer le besoin en quelque chose de modulaire, une meilleure pratique TypeScript, en changeant ceci :

const express = require('express');

à quelque chose comme :

import express, { Request, Response, NextFunction } from 'express'

Ensuite, la deuxième chose que nous faisons est de changer le type des arguments que nous avons dans notre fonction get de :

app.get("https://www.telerik.com/",(req, res, next) => {
    res.send('hello there world!')
});

à quelque chose comme ça :

app.get(‘/’,(req:Request, res:Response, next:NextFunction) => {
 res.send(‘hello there world!’)
});

Voici comment effectuer la conversion – vous pouvez en savoir plus sur l’utilisation de TypeScript via la documentation officielle ici. Vous verrez beaucoup de similitudes avec JavaScript et la motivation pour TypeScript au fur et à mesure.

Emballer

Dans l’article d’aujourd’hui, nous avons examiné JavaScript et TypeScript en tant que débutants et comment migrer une application JavaScript simple vers une application TypeScript en quelques étapes. Nous avons également examiné à quel point les deux langues sont différentes et comment nous pouvons commencer à les refactoriser. Bon piratage !