Démarrez avec TypeScript en toute simplicité

Ces fonctionnalités ne sont pas propres à TypeScript. Ils font partie de tout langage fortement typé et se traduisent par des améliorations de la productivité et de la qualité du code telles que :

• Écrivez le code plus rapidement avec des suggestions de code de saisie semi-automatique au fur et à mesure que vous tapez.
• Vous avertit si vous avez une faute de frappe ou une erreur dans votre code.
• Plus facile d’introduire de nouvelles personnes dans la base de code.
• Meilleure collaboration pour les membres de l’équipe à travers le code qu’ils n’ont pas écrit.
• Peut empêcher le code cassé de passer par les déploiements automatiques.
• Rend le maintien de l’ancien code plus facile et plus sûr à modifier.
• Peut être utilisé pour documenter automatiquement votre projet.

C’est très bien, mais je n’essaie pas de vous vendre l’utilisation de TypeScript. Cet article est destiné aux développeurs JavaScript qui ont entendu parler de TypeScript et qui souhaitent s’y lancer ou à toute personne ayant déjà essayé TypeScript et souhaitant lui donner une autre perspective.

Contrairement à de nombreux tutoriels aujourd’hui, celui-ci se concentrera sur la minimisation des exigences techniques à suivre. Nous allons être opérationnels avec TypeScript sans ouvrir de terminal, installer des dépendances ou même initialiser un projet NPM. Dans la partie avancée, nous devrons faire un peu de cela, mais pour la plupart des utilisateurs, tout ce dont vous aurez besoin est Visual Studio Code comme éditeur.

Niveau 1 : Activer le texte dactylographié dans les fichiers JavaScript

VS Code a pris d’assaut le monde de la technologie. Si vous n’êtes pas familier, c’est un éditeur de code, mais je parierais que si vous écrivez régulièrement du JavaScript, vous l’utilisez probablement déjà.

Saviez-vous que VS Code intègre TypeScript ? C’est ainsi qu’il est capable de fournir des IntelliSense de base et des suggestions automatiques.

Par exemple, nous pouvons créer un objet avec une propriété appelée hello et lui donner la valeur "world". Lorsque nous essayons d’accéder aux propriétés de cet objet, VS Code suggérera automatiquement hello pour nous. Non seulement cela, mais il nous dira également que la propriété hello est un string.

Il s’agit d’une vérification de type très basique et elle peut être très utile. Cependant, il existe plusieurs erreurs qui peuvent encore être intégrées à notre base de code et qui auraient pu être évitées si nous avions activé une meilleure vérification de type.

Par exemple, si nous transmettions accidentellement un nombre à une fonction qui attendait une chaîne, nous pourrions rencontrer des problèmes.

VS Code a en fait une fonctionnalité qui permet une vérification complète du type pour les fichiers JavaScript. Et le meilleur, c’est que c’est super facile. Tout ce que vous avez à faire est d’ajouter ce commentaire en haut du fichier JavaScript auquel vous souhaitez ajouter la vérification de type : // @ts-check

Avec ce commentaire en place, nous avons activé une vérification de type plus stricte dans notre fichier. Maintenant, nous verrons plus d’astuces si nous introduisons des erreurs possibles dans notre base de code. Par exemple, si nous essayons d’écraser l’objet hello propriété avec un nombre, nous obtiendrons un avertissement nous indiquant « Le type ‘nombre’ n’est pas assignable au type ‘chaîne' »:

À ce stade, notre fonction précédente ne nous donnera aucune indication que notre code contient une erreur, et c’est parce que TypeScript ne sait pas que l’entrée ne peut être qu’une chaîne. Pour résoudre ce problème, nous pouvons ajouter des types à notre JavaScript avec JSDoc.

JSDoc est un système d’ajout de documentation contextuelle à votre code source à l’aide de commentaires, et il peut être utilisé pour générer automatiquement des sites Web de documentation. L’avantage qui nous intéresse le plus aujourd’hui, cependant, est que TypeScript prend en charge l’analyse des commentaires JSDoc.

Pour notre exemple de fonction, nous pouvons dire à TypeScript que le premier paramètre du yell la fonction est une appelée str et est un type de « chaîne ». Le résultat de la fonction est également une « chaîne ».

Maintenant, lorsque nous essayons de transmettre un nombre à la fonction, nous verrons un avertissement rouge ondulé. Et en passant la souris dessus, nous verrons l’avertissement : « L’argument de type ‘nombre’ n’est pas attribuable au paramètre de type ‘chaîne’. » Merci!

Apprendre à tout documenter avec JSDoc prend du temps, des études et de la pratique. C’est un peu au-delà de la portée du sujet d’aujourd’hui, mais jsdoc.app est un excellent endroit pour en savoir plus.

Niveau 2 : Activer TypeScript dans les projets JavaScript

Si vous êtes comme moi, vous verrez rapidement les avantages d’utiliser JSDoc pour documenter votre code tout en ayant TypeScript qui vous crie dessus lorsque vous vous trompez. Mais si vous travaillez sur de gros projets JavaScript, il ne vous faudra pas longtemps avant de vous lasser d’ajouter // @ts-check à chaque fichier.

Heureusement, VS Code propose quelques moyens de lui faire savoir que vous aimeriez qu’il fasse ce truc TypeScript sur chaque fichier JavaScript, s’il vous plaît. Une façon consiste à définir la configuration « Vérifier JS » sur true. Dans le settings.json fichier le paramètre est "javascript.implicitProjectConfig.checkJs": true

Vous pouvez le faire au niveau de l’utilisateur ou de l’espace de travail, mais cela ne sera activé que pour vous.

Si vous travaillez en équipe et que vous souhaitez activer cette fonctionnalité au niveau du projet pour tout le monde, vous pouvez le faire en ajoutant un tsconfig.json fichier dans le dossier racine de votre projet. Habituellement, je copie simplement le même fichier dans chaque projet, mais créons un tout nouveau fichier à partir de zéro avec la commande d’initialisation TypeScript :

Ce fichier peut être utilisé pour configurer quelques options, mais pour l’instant, nous ne sommes intéressés que par celui qui indique à VS Code d’utiliser TypeScript pour vérifier les fichiers JavaScript. Pour plus de détails sur les options de configuration de tsconfig.json, consultez staging typescript.

{
  "compilerOptions": {
   	"checkJs": true,               /* Report errors in .js files. */
  }
}

Je préfère faire les choses de cette façon parce que je dirige une équipe et je ne veux pas expliquer aux gens comment activer la vérification de type dans leurs paramètres. Et nous n’avons pas à nous soucier de la synchronisation des paramètres de l’éditeur de chacun.

Maintenant, quelle que soit la manière que vous préférez, TypeScript vérifiera tous vos fichiers JavaScript à la recherche de bogues potentiels sans que vous ayez besoin de faire autre chose. Hourra !

JSDocs prend en charge un certain nombre de types intégrés : string, number, boolean, array, promise, function, etc. Cependant, il ne faut pas longtemps avant que vous souhaitiez créer des définitions de type au-delà des valeurs primitives de base. Par exemple, disons que nous voulons définir un type d’objet « Chien » qui a une « race », un « âge » et une propriété « nom » facultative. JSDoc peut toujours vous aider là-bas.

Nous pouvons définir le type comme ceci :

/**
 * @typedef {object} Dog
 * @property {string} breed
 * @property {number} age
 * @property {string} [name]
 */

Il existe plusieurs façons de définir des objets, c’est une syntaxe. Je ne veux pas trop m’éloigner du sujet en passant du temps sur les détails de la définition des types. Pour plus de détails à ce sujet, n’hésitez pas à explorer la documentation JSDoc. Cela vaut également la peine d’examiner les types génériques et utilitaires de TypeScript lorsque vous abordez des besoins plus avancés.

Mon but ici est de vous montrer comment importer des définitions de type dans votre base de code. Cela m’a pris un peu de temps à apprendre, donc j’espère pouvoir vous éviter quelques recherches.

Disons que nous voulions avoir un fichier pour définir certains types globaux. Appelons-le types.js. Nous pouvons y mettre notre définition de type Dog et à partir d’un fichier différent, nous pouvons importer et utiliser ce type dans un autre fichier en référençant son chemin relatif :

/** @type {import('./types).Dog} */
const myDog = {
  breed: 'Chiweenie',
  age: 4,
  name: 'Nugget'
}

Si nous nous retrouvons à utiliser le Dog tapez à plusieurs endroits dans le même fichier, nous pouvons nous épargner quelques saisies en redéfinissant la définition de type localement :

/** @typedef {import('./types).Dog} Dog */

/** @type {Dog} */
const myDog = {
  breed: 'Chiweenie',
  age: 4,
  name: 'Nugget'
}

Si vous avez essayé cela en lisant cet article, vous avez peut-être rencontré un petit problème. Dans l’état actuel des choses, nous ne pouvons rien importer de notre types.js fichier car ce fichier n’est pas un module JavaScript. Notre éditeur nous le dira : « Le fichier ‘/chemin/vers/types.js’ n’est pas un module ».

La solution consiste à ajouter une exportation à ce fichier. Vous pouvez utiliser la syntaxe CommonJS ou ES Modules. La valeur exportée n’a pas d’importance. Il peut même être undefined. Par exemple, n’importe laquelle de ces lignes ferait l’affaire (notez que vous n’en avez besoin que d’une) :

// Works
module.exports = {}

// Sure
exports.merp = ''

// Why not?
export default = null

// Go for it
export const thingamabob = undefined

Il est également possible d’importer des définitions de types à partir d’une bibliothèque tierce. La syntaxe est très similaire, mais au lieu d’utiliser un chemin relatif, vous référencez simplement la bibliothèque par son nom. Par exemple, un composant Vue.js peut être saisi avec :

/** @type {import('vue').Component} */

Toutes les bibliothèques ne fournissent pas de définitions de type. Il vous suffit d’essayer de voir si VS Code vous en propose automatiquement. Mais dans le cas où votre bibliothèque ne fournit pas de définitions de types, il peut toujours y avoir un package de types fourni par la communauté sur certainementtyped.org, alors jetez-y un coup d’œil également. VS Code a une fonctionnalité appelée « Acquisition automatique de type » qui recherchera et installera automatiquement les définitions de type de communauté pour vous.

Enfin, je soulignerai que vous pouvez également écrire vos définitions de type dans un fichier TypeScript si vous préférez cette syntaxe. L’importation sera exactement la même pour JSDoc. La seule chose qui change est l’extension de fichier (se termine par .ts) et la syntaxe. Par exemple, si nous voulions définir nos types globaux ci-dessus avec TypeScript, nous pouvons changer le nom du fichier en « type.ts » et le contenu comme ceci :

export interface Dog {
  breed: string
  age: number
  name?: string
}

Niveau 3 : Intégration de TypeScript dans le pipeline CI/CD

Jusqu’à présent, nous avons accompli tout ce qui précède sans étape de construction, sans installer de dépendance (à part notre éditeur), sans initialiser une commande NPM et même sans ouvrir la ligne de commande. Comme c’est rafraîchissant !?!? C’est tout simplement du vieux JavaScript, mais avec des super pouvoirs.

Maintenant, nous allons commencer à nous aventurer dans des questions plus complexes. Pouvons-nous empêcher le déploiement de notre code si un bogue est introduit dans le code ?

Le reste de cette section fera les hypothèses suivantes :

• Vous êtes à l’aise avec la ligne de commande.
• Vous avez une certaine expérience avec NPM (sinon, vous pouvez lire la page de démarrage de NPM pour démarrer avec npmjs).
• Vous êtes familiarisé avec les concepts CI/CD (Continuous Integration/Continuous Delivery).
• Vous avez déjà un projet NPM initialisé avec un fichier package.json.

Notre objectif est d’exécuter le compilateur TypeScript à partir d’un environnement CI/CD afin que le système sache si notre code contient ou non des erreurs de type. Cela signifie que nous ne pouvons plus compter uniquement sur VS Code pour nous fournir TypeScript et nous dire si notre code contient des erreurs. Nous devrons fournir à l’environnement CI/CD une version de TypeScript et un script à exécuter.

La première chose que nous allons faire est d’exécuter cette commande dans le terminal (à partir du même dossier que notre projet) :

npm install --save-dev typescript

Cela installera TypeScript localement et mettra également à jour le fichier package.json en incluant le "typecript" packages en tant que dépendance de développement. Cela sera nécessaire à tout autre ordinateur exécutant notre projet pour savoir quelles dépendances installer. Une fois cela en place, TypeScript est désormais disponible pour le projet sans dépendre de VS Code.

Ensuite, nous devons être en mesure de dire à l’ordinateur comment exécuter réellement TypeScript. Nous pouvons mettre à jour la section « scripts » NPM de notre fichier package.json avec la ligne suivante :

Cela ajoutera un nouveau script appelé « ts »…