Dactylographié, moins dactylographié

Pendant de nombreuses années, TypeScript est devenu une partie intégrante du développement JavaScript. Il ajoute un système de type basé sur JavaScript, améliorant la lisibilité et la maintenabilité du code. Cependant, les étapes de syntaxe et de compilation supplémentaires de TypeScript peuvent parfois augmenter la charge de développement. Heureusement, l'équipe TypeScript prend en charge la vérification du type de code JavaScript pur à l'aide de JSDOC, en tenant compte à la fois de la sécurité du type et de l'efficacité de développement.

Paramètres du projet

Pour commencer la vérification de type avec JSDOC, vous avez besoin de NodeJS et NPM. Créez un nouveau projet et exécutez npm init . Cet article utilisera VS Code comme éditeur de code. Installer TypeScript:

 NPM I -D TypeScript

Créez un fichier tsconfig.json et ajoutez la configuration suivante:

 {
  "CompilerOptions": {
    "cible": "esnext",
    "module": "esnext",
    "modularesolution": "nœud",
    "lib": ["es2017", "Dom"],
    "Allowjs": vrai,
    "Checkjs": vrai,
    "Noemit": vrai,
    "strict": faux,
    "nomplicitthis": vrai,
    "Toujours unstrict": vrai,
    "EsmoduleInterop": True
  },
  "inclure": ["script", "test"],
  "exclure": ["node_modules"]
}

Les configurations clés sont allowJs et checkJs , tous deux définis sur true , permettant à TypeScript de vérifier le code JavaScript. Nous avons également spécifié le répertoire /script comme emplacement du code.

Exemple simple

Créez un fichier index.js et écrivez une fonction d'addition simple:

 / **
 * Ajoutez deux nombres ensemble
 * @param {numéro} x
 * @param {numéro} y
 * @return {numéro}
 * /
fonction add (x, y) {
  retour xy;
}

Nous spécifions les types de paramètres et les valeurs de retour via jsdoc annotations @param et @return . Essayez d'appeler la fonction avec le type d'erreur, VS Code invitera une erreur.

Les annotations JSDOC sont équivalentes au code de type:

 / **
 * Ajoutez deux nombres ensemble
 * /
fonction add (x: numéro, y: numéro): numéro {
  retour xy;
}

JSDOC prend en charge une variété de types intégrés, tels que les types string , object , Array et de DOM tels que HTMLElement , MutationRecord .

JSDOC permet également d'ajouter des contraintes de type à des objets, tels que WeakMap :

 / ** @type {faiblemap<object string> } * /
const Metadata = new faibleMap ();

const objet = {};
const OtherObject = {};

metadata.set (objet, 42); // Une erreur est signalée car la valeur n'est pas la chaîne metadata.set (autreobject, «bonjour world»);</object>

Type personnalisé

JSDOC permet de définir des types personnalisés, tels que les types Person :

 / **
 * Personne @typedef
 * @Property {String} Nom - le nom de la personne
 * @property {nombre} Âge - L'âge de la personne
 * @Property {String} [Hobby] - un passe-temps facultatif
 * /

Utilisez @typedef pour définir des types, utilisez @property ou @prop pour définir les propriétés.

Utilisez des types personnalisés:

 / ** @type {personne} * /
const Person = {nom: «John Doe», âge: 30, passe-temps: «lecture»};

Un ensemble limité d'options peut être défini à l'aide de types d'union:

 / **
 * @typedef {'cat' | 'chien' | 'poisson'} animal de compagnie
 * /

Génériques

JSDOC prend en charge les génériques, tels que les fonctions identity :

 / **
 * @template t
 * @param {t} cible
 * @return {t}
 * /
Identité de fonction (cible) {
  cible de retour;
}

Utilisez @template pour définir les types génériques.

Conversion de type

Parfois, la conversion de type est requise, comme le traitement des auditeurs d'événements:

 document.getElementById ('Input'). AddEventListener ('Input', Event => {
  console.log (/ ** @Type {htmlinPutellement} * / (event.target) .Value);
});

Use /** @type {类型} */ pour la conversion de type.

Résumer

JSDOC fournit un moyen d'obtenir des invites de vérification et de code de type lors de l'écriture de code JavaScript pur, qui est utile pour les projets qui souhaitent améliorer la qualité du code sans introduire des étapes de syntaxe et de compilation supplémentaires. Bien que le compilateur TypeScript soit puissant, JSDOC fournit une alternative flexible.

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!