Comment porter votre programme JavaScript vers TypeScript

Initialement publié en 1995 après une période de développement incroyablement courte, JavaScript est depuis devenu une partie intégrante de nombreux sites et applications. Aujourd'hui, JavaScript a trouvé sa place dans les applications côté client et côté serveur. Les développeurs demandent toujours de nombreuses fonctionnalités, malgré tous les changements qu'il a connus au fil des ans.

TypeScript est un langage de script qui étend JavaScript avec bon nombre de ces fonctionnalités tant attendues. L'annotation de type, la saisie personnalisée et les interfaces sont tous des composants majeurs, ainsi que de meilleurs outils pour augmenter la productivité.

Pourquoi s'embêter à changer?

La perspective de changer de langue sur des projets majeurs peut être stressante. Heureusement pour tous ceux qui envisagent la tâche, le processus de portage d'un projet de JavaScript vers TypeScript est assez simple.

JavaScript a passé ces dernières années à gagner du terrain en tant que langage de programmation majeur. Utilisé à l'origine uniquement pour les scripts frontaux sur les sites Web, la sortie de Node.js a apporté JavaScript côté serveur, contribuant à accroître sa popularité.

Bien que JavaScript soit devenu beaucoup plus populaire récemment, il manque encore de nombreuses fonctionnalités à sa dernière implémentation, ES6. Pour de nombreux développeurs, ces fonctionnalités manquantes limitent l'utilité de JavaScript en tant que langage.

TypeScript vise à remédier à ces problèmes en enveloppant JavaScript avec des fonctionnalités supplémentaires, puis en transpilant le code utilisateur. Le résultat est un langage de type sécurisé avec la facilité et la convivialité de JavaScript.

Il existe déjà plusieurs outils et frameworks avec une prise en charge complète de TypeScript. Angular l'utilise depuis longtemps, et même React a des moyens d'implémenter TypeScript.

TypeScript est comme JavaScript amélioré

TypeScript implémente de nombreuses fonctionnalités que les développeurs demandent souvent en JavaScript. TypeScript porte le nom du système de type complet qu'il implémente, y compris des fonctionnalités telles que la vérification de type, la sécurité et le typage implicite. TypeScript vous permet même définir et utiliser des espaces de noms personnalisés.

TypeScript contient également des interfaces, des énumérations et une inférence de type. TypeScript maintient la prise en charge des fonctionnalités de la dernière implémentation JavaScript aux côtés des fonctionnalités héritées, et ajoute une suite de nouvelles fonctionnalités.

Dans l'ensemble, TypeScript se concentre sur la création d'un processus de développement plus sûr avec des outils plus solides pour aider les codeurs.

Il encourage le code de type sécurisé

TypeScript utilise un système de vérification de type intégré pour valider les types de variables. Il comprend un ensemble de types standard avec la possibilité de définir vos propres classes et types. Les types peuvent être explicitement déclarés ou déduits en fonction de l'affectation.

TypeScript possède plusieurs types de données standard, notamment des chaînes, des nombres, des booléens et des tuples. Il existe également des types de variables, comme unknown et any, qui vous permettent d'utiliser du code faiblement typé.

L'inférence de type de TypeScript vous permet d'exécuter des vérifications de type même sur du code JavaScript standard en l'exécutant via le transpiler de TypeScript.

La transpilation le rend facile à utiliser

Du point de vue du développeur, l'une des meilleures fonctionnalités de TypeScript est qu'il génère du JavaScript vanille. Vous pouvez exécuter du code TypeScript via un processus appelé transpilation, qui est similaire à la compilation.

Plutôt qu'un exécutable, le résultat de la transpilation est un script dans un langage autre que celui d'origine du code.

Le code TypeScript est transpilé en JavaScript que vous pouvez ensuite exécuter sur un serveur ou un client. Cela vous permet d'écrire rapidement et facilement du code que vous pouvez exécuter sur presque toutes les plates-formes.

TypeScript aide la productivité des développeurs

L'ajout de types à JavaScript permet non seulement au code de s'exécuter en toute sécurité, mais fournit également aux développeurs des outils qui facilitent le codage. La plupart des IDE modernes offrent une prise en charge de TypeScript qui permet aux outils de complétion de code comme IntelliSense d'offrir un contexte supplémentaire au code. Il peut également offrir une vérification de type au fur et à mesure que vous écrivez, vous aidant à détecter les erreurs plus rapidement.

De plus, les structures de données et la syntaxe supplémentaires de TypeScript sont conçues pour augmenter la lisibilité du code. Ces fonctionnalités permettent de créer plus rapidement et plus facilement du code de haute qualité et de détecter les problèmes potentiels avant qu'ils ne deviennent problématiques.

Comment pouvez-vous porter votre code?

Si vous démarrez un tout nouveau projet, créer un nouveau projet TypeScript est assez simple. Cependant, la conversion d'un projet préexistant en TypeScript est un peu plus compliquée.

Dans la plupart des circonstances normales, la perspective de convertir un projet d'une langue à une autre est effrayante. La conversion de JavaScript en TypeScript, cependant, est étonnamment simple.

TypeScript en tant que sur-ensemble de JavaScript

TypeScript est considéré comme un sur-ensemble de JavaScript. Cela signifie que TypeScript ajoute des couches supplémentaires de syntaxe et de fonctionnalité, sans modifier ni supprimer la fonctionnalité de base autour de laquelle il se construit.

Pour les développeurs, cela signifie que tout code qui s'exécute correctement en JavaScript s'exécutera automatiquement correctement dans TypeScript. Que le script en question soit un serveur Web écrit pour s'exécuter dans NodeJS ou un ensemble de scripts frontaux pour une page Web, le basculement est exceptionnellement simple.

Après avoir installé le transpileur TypeScript, vous pouvez créer un simple tsconfig.json fichier avec le contenu suivant :

{
"options du compilateur": {
"outDir": "./construire",
"allowJs": vrai,
"cible": "es5"
 },
"inclure": ["./src/**/*"]
}

Déplacez tous les fichiers applicables dans le répertoire src et exécutez le transpiler. Cela créera les fichiers JavaScript résultants dans le construire annuaire.

Ces modifications rapides et simples convertiront un projet JavaScript standard en un projet TypeScript. À partir de là, vous êtes libre d'utiliser les nouvelles fonctionnalités proposées par TypeScript à votre guise. Vous pouvez annoter des types sur des variables, implémenter des types personnalisés et définir des interfaces.

Après chaque transpilation, vous pouvez utiliser la sortie du construire répertoire si nécessaire en ajoutant les fichiers dans n'importe quel projet comme vous le feriez normalement. Le transpileur tapera le code JavaScript standard de vérification et convertira les nouvelles fonctionnalités en scripts ES5 valides.

Ce que vous devez savoir pour passer de JS à TS

Le processus de conversion d'un projet de JavaScript en TypeScript est exceptionnellement simple. La conversion est aussi simple que de changer la structure des répertoires, d'ajouter un fichier de configuration et d'installer le transpiler.

Obtenir tous les avantages de la nouvelle langue, cependant, peut être un projet beaucoup plus long. Bien que TypeScript puisse déduire le type de chaque variable d'un projet, celles-ci doivent être explicitement déclarées. Revenir en arrière et ajouter des types personnalisés à un projet, ajouter des annotations appropriées et créer des interfaces peut prendre du temps.

Cependant, l'ajout de ces fonctionnalités à un projet vous permettra de profiter des avantages d'une vérification de type appropriée et d'un outillage étendu. Les projets majeurs seront plus rapides et plus faciles à construire, vous identifierez les erreurs plus tôt et les nouveaux développeurs auront plus de facilité à lire votre code.