TypeScript : premiers pas avec les options TSConfig

Qu’est-ce que TypeScript ?

TypeScript est un surensemble de JavaScript. Cela signifie que vous pouvez utiliser la syntaxe JavaScript dans TypeScript, il est donc préférable d'apprendre JavaScript avant de vous lancer dans TypeScript. Avec cet avertissement, parlons de ce qu'est TypeScript et de la manière dont nous pouvons mettre en place un projet pour TypeScript.

Selon la documentation de TypeScript, « TypeScript est un langage de programmation fortement typé qui s'appuie sur JavaScript. »[1] Le langage TypeScript ajoute une syntaxe de type pour vous aider à détecter les erreurs dès le début du développement et à maintenir des protections pendant que votre équipe de développement se développe. à mesure que le projet évolue. TypeScript vous permet de définir les types de données pour les variables et les interfaces pour les objets. TypeScript utilise ces définitions pour vérifier votre code pour les erreurs lors de sa compilation et vous informe lorsque vous ne suivez pas les définitions que vous avez définies au préalable.

Si vous vous demandez : « Pourquoi dois-je écrire plus de code juste pour utiliser TypeScript alors que je peux être plus prudent en premier lieu ? » Vous n'avez pas tort, mais les humains peuvent commettre des erreurs, et c'est souvent le cas lorsqu'ils travaillent pendant de longues périodes. Si cette même réflexion était appliquée à la construction, alors les échafaudages supplémentaires et les procédures de sécurité nécessiteraient plus de travail et de temps, et nous pouvons gagner du temps en étant simplement prudent sur le chantier.

Vous voyez ? Dans un effort pour gagner du temps, ce couvreur a peut-être perdu plus de temps et de ressources. Ce n'est qu'un travailleur. Imaginez une équipe de travailleurs travaillant sur un projet à mesure que d'autres membres de l'équipe sont ajoutés. C'est la réalité du développement de logiciels ; avoir un plan pour détecter ces erreurs vous aidera, vous et votre équipe, à long terme.

Exemples de scripts dactylographiés

Les exemples suivants proviennent de la documentation TypeScript[2], mais le commentaire est le mien.

TypeScript :

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

TypeScript détectera l'erreur lorsque greet sera appelé. Nous avons défini greet pour recevoir deux arguments, person et date, et nous avons uniquement fourni person. TypeScript détectera cette erreur lors de la compilation du code et vous fera savoir qu'il attend un deuxième argument. D'une certaine manière, TypeScript peut être considéré comme un linter pour votre code afin de détecter ces erreurs pendant que vous travaillez, mais nous pouvons exploiter la syntaxe de type pour nous aider davantage.

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Maddison", Date());

Maintenant, nous ajoutons un type aux deux arguments, person doit être une chaîne et date doit être un objet Date pour la méthode toDateString. Lorsque greet est appelé sans le mot-clé new avant le deuxième argument, Date(), TypeScript vous indiquera qu'il a reçu une chaîne au lieu d'une Date pour le paramètre date. Désormais, vous pouvez corriger votre erreur avant de poursuivre le développement et devoir remonter à cette erreur lorsque vous recevez un résultat inattendu lors du test.

Maintenant que vous avez vu TypeScript en action, examinons les prochaines étapes de configuration de votre projet pour l'utiliser.

Configuration du compilateur de TypeScript : tsconfig.json

La compilation TypeScript par défaut n'est peut-être pas ce que vous recherchez, et il existe un moyen de personnaliser TypeScript selon vos besoins, similaire à l'utilisation d'un linter, mais elle peut faire bien plus.

La première étape consiste à créer un fichier tsconfig.json dans le répertoire racine de votre projet. Ce fichier indique à TypeScript quels fichiers doivent être inclus dans le processus de compilation. Dans le tsconfig.json, vous pouvez spécifier les répertoires de la racine qui doivent être inclus si vous souhaitez plus de spécificité en utilisant la clé "includes" de votre fichier JSON.

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

Maintenant, parlons des « options du compilateur ». Faites-moi confiance quand je dis qu’il existe une tonne d’options parmi lesquelles choisir. C'est une bonne chose mais aussi terrifiant si c'est la première fois que vous utilisez TypeScript. Je vais détailler quelques-uns des choix populaires pour vous aider à démarrer :

autoriser Js

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Maddison", Date());

Cette option permet d'importer des fichiers JavaScript dans votre projet au lieu de uniquement TypeScript. En règle générale, TypeScript suppose que toutes les importations sont TypeScript et génère une erreur pour les fichiers JavaScript importés, mais cette option nous permet d'utiliser ces importations et peut être utile lorsque vous travaillez avec TypeScript et JavaScript dans le même référentiel.

esModuleInterop

{
  "include": ["src/**/*"]
}

Une importation d'espace de noms dans ES6 ne peut être qu'un objet, mais comme cela revient à utiliser require sans .default, nous avons autorisé TypeScript à traiter un objet comme une fonction. Au lieu de devoir faire attention à nos importations, cette option résoudra ce problème lorsque TypeScript transpilera le code en JavaScript.

cible

{
  "compilerOptions": {
    "allowJs": true
  }
}

Cette option modifie les fonctionnalités JS qui sont rétrogradées et celles qui restent intactes lorsque TypeScript transpile votre code en JavaScript. es6 est un bon choix puisque la plupart des navigateurs modernes prennent en charge ES6, mais vous pouvez désigner n'importe quelle version d'ECMAScript pour cette option en fonction de vos besoins.

strict

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

Cet indicateur permet de nombreux comportements de vérification de type différents. Cela se traduira par une base de code plus solide avec moins d'erreurs. Si vous souhaitez exclure certains comportements de vérification de type, consultez la documentation [3] et définissez leurs options sur false. Si vous ne souhaitez que quelques comportements de vérification de type, j'envisagerais de les activer au lieu d'utiliser strict.

Répsortie

{
  "compilerOptions": {
    "target": "es6"
  }
}

Lorsque TypeScript transpile votre code en JavaScript utilisable, cette option émettra ces fichiers dans ce répertoire.

nonÉmettre

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

Cette option empêche l'émission de tous les fichiers JavaScript transpilés. Cela peut paraître idiot puisque je viens de vous parler de outDir, mais TypeScript émettra toujours des fichiers et outDir dirigera les fichiers vers le bon emplacement. noEmit entre en jeu lorsque vous utilisez déjà un autre outil comme Babel ou Webpack pour transpiler et regrouper votre code. Émettre dans ce cas reviendrait à créer des fichiers JavaScript inutiles.

Conclusion

Voilà. Ce sont sept options pour vous aider à configurer votre configuration pour TypeScript et comment TypeScript peut vous aider à créer une base de code plus stable. Je recommande de lire "The TSConfig Cheat Sheet" de Matt Pocock pour connaître les options plus populaires à insérer dans votre tsconfig.json et de toujours vous référer à la documentation TypeScript sur TSConfig avant d'implémenter l'une de ces options.

Bon codage !
Tyler Meyer

Sources :

[1] https://www.typescriptlang.org/

[2] https://www.typescriptlang.org/docs/handbook/2/basic-types.html

[3] https://www.typescriptlang.org/tsconfig/

[4] https://www.totaltypescript.com/tsconfig-cheat-sheet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!