Comment vérifier les types en JavaScript sans utiliser TypeScript

Découvrez comment ajouter des types à JavaScript sans utiliser TypeScript

Si tu n'as pas vécu sous un rocher, tu sais quelque chose surManuscrit. C'est un nouveau langage introduit par Microsoft, et il s'agit essentiellement de JavaScript avec des types (et se compile en JavaScript pour s'exécuter dans le navigateur).

Maintenant, je l'ai utilisé dans certains projets de test mais j'ai tendance à éviter d'écrire mes tutoriels en TypeScript pour diverses raisons.

La première est que j'écris principalement des tutoriels pour débutants et TypeScript n'est généralement pas ce par quoi les gens commencent.

De plus, je pense que si je commence à écrire des choses en TypeScript, j'introduirai de la confusion - de quoi est-ce que je parle?

Les fans de TypeScript peuvent toujours utiliser des didacticiels JavaScript, car JavaScript peut très bien s'intégrer dans leurs fichiers TypeScript, alors que l'inverse n'est pas vrai.

Donc, je m'en tiens aux principes fondamentaux de la plate-forme Web plutôt qu'aux technologies qui s'appuient sur elle.

Cela dit…

Il y a des moments où je bénéficierais d'avoir des types en JavaScript. Ils sont utiles.

Grâce àcette vidéopar le génial Paul Lewis, j'ai trouvé quenous pouvons en fait avoir des types en JavaScript, utilisantCode Visual Studio!

Tout d'abord, vous devez installer TypeScript, si vous ne l'avez pas déjà fait:

npm install -g typescript

Ensuite, vous ajoutez untsconfig.jsonfichier à la racine de votre projet. En supposant que vous ayez les fichiers JavaScript dans lesrcdossier, c'est la quantité minimale de configuration dont vous avez besoin dans ce fichier:

{
  "compilerOptions": {
    "outFile": "../../built/local/tsc.js",
    "checkJs": true,
    "allowJs": true
  },
  "include": [
    "src/*"
  ]
}

Vous pouvez décider d'exclure des dossiers, par exemple c'est une bonne idée d'exclurenode_modules:

{
  "compilerOptions": {
    "outFile": "../../built/local/tsc.js",
    "checkJs": true,
    "allowJs": true
  },
  "include": [
    "src/*"
  ],
  "exclude": [
    "node_modules",
  ]
}

Désormais, VS Code peut signaler des erreurs de type dans notre code JavaScript.

Et il peut le faire automatiquement, sans que nous ayons à faire quoi que ce soit.

En particulier, il peut déduire les types de paramètres de fonction en utilisant la valeur par défaut.

Disons que nous avons cette fonction, oùtimesreçoit la valeur par défaut de 2:

const multiply = (aNumber, times = 2) => {
  return aNumber * times
}

Maintenant que le deuxième paramètre a une valeur par défaut, nous pouvons appeler cette fonction avec

multiply(20)

pour multiplier 20 par 2, ou comme ceci pour le multiplier par 10:

multiply(20, 10)

Mais si vous passez, par exemple, une chaîne comme deuxième paramètre commemultiply(20, 'hey'), VS Code va maintenant vous dire qu'il y a un problème:

L'argument de type «hey» »ne peut pas être affecté au paramètre de type« nombre »

Impressionnant!

Nous pouvons également effectuer ce type de vérification de type pour les arguments qui n'ont pas de valeur par défaut. Vous pouvez le faire en utilisantJSDoc, qui est normalement utilisé comme générateur d'API, et en ajoutant des indices de type:

/**
 * @param {number} aNumber
 */
const multiply = (aNumber, times = 2) => {
  return aNumber * times
}

⚠️ N'oubliez pas le double**au début du commentaire, sinon les choses ne fonctionneront pas comme prévu.

Maintenant si vous essayez d'appelermultiply('ho!')vous obtiendrez également une erreur:

L'argument de type "ho!" "N'est pas assignable au paramètre de type" nombre "

Autre quenumber, vous pouvez définir les types suivants:

  • null
  • undefined
  • boolean
  • string
  • Array
  • Object

Exemple:

/**
 * @param {null} aNull
 * @param {undefined} anUndefined
 * @param {boolean} aBoolean
 * @param {string} aString
 * @param {Array} anArray
 * @param {Object} anObject
 */
const multiply = (aNull, anUndefined, aBoolean, aString, anArray, anObject) => {
  console.log(aNull, anUndefined, aBoolean, aString, anArray, anObject)
}

Maintenant, bien sûr, ne pas avoir à ajouter d'annotations dans les commentaires et avoir le code lui-même vous indique levéritéserait mieux. Si vous pouvez vivre avec cette façon de faire, tant mieux! Sinon, il y a TypeScript.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: