Emprunt des techniques à des langues fortement dactylographiées en js

Cet article explique comment utiliser des langages fortement typés dans le code JavaScript. Ces techniques réduisent non seulement les erreurs de code, mais réduisent également la quantité de code. Bien que cet article prenne JavaScript à titre d'exemple, ces conseils s'appliquent également à la plupart des langues de type faible.

Points clés:

• Les conseils d'application des langages fortement typés en JavaScript peuvent réduire les bogues et réduire le volume de code.
• "Règle de type cohérente" (qui spécifie que toutes les valeurs n'ont qu'un seul type) peuvent être appliquées à JavaScript pour améliorer la qualité et la lisibilité du code.
• La vérification des types et la conversion de type doivent être effectuées au bord du module pour empêcher les bogues causés par la coulée de type implicite et simplifier le code.
• L'utilisation de "NULL" et "Undefined" dans JavaScript doit être soigneusement considérée, en particulier lors de la gestion des types de référence tels que des objets et des tableaux.
• TypeScript est un outil recommandé pour appliquer une sémantique dactylographiée plus forte en JavaScript, avec des avantages tels que la détection des erreurs précoces et la documentation de code plus claire.

Système de type JavaScript

Tout d'abord, passons rapidement en revue le fonctionnement du système de type de données JavaScript. JavaScript divise ses valeurs en deux catégories:

• Types primitifs tels que la chaîne, le nombre et le booléen. Lorsque vous attribuez le type d'origine à une variable, une nouvelle valeur est toujours créée, qui est une copie de la valeur attribuée.
• Types de référence , tels que l'objet et le tableau. Le type de référence d'affectation copie toujours la même référence. Pour clarifier cela, examinons l'exemple de code suivant:

var a = [];
var b = a;

a.push('Hello');

Lorsque nous changeons A, la variable B change également car ils se réfèrent tous au même tableau. C'est ainsi que tous les types de référence fonctionnent. JavaScript n'applique aucun type, ce qui signifie que toute variable peut enregistrer n'importe quel type de données à tout moment. Le reste de cet article traite des inconvénients de cette approche et de la façon d'appliquer des astuces simples dans l'application des types pour écrire un meilleur code JavaScript.

introduire une règle de type cohérente

La règle de type cohérente est théoriquement simple: toutes les valeurs ne doivent avoir qu'un seul type. Les langues fortement typées appliquent cette règle au niveau du compilateur, et elles ne vous permettent pas de mélanger et de faire correspondre les types à volonté. Les types faibles nous donnent beaucoup de liberté. Un exemple courant est de concaténer les nombres en chaînes. Vous n'avez pas besoin de effectuer une conversion de type fastidieux que dans des langues comme C. Ne vous inquiétez pas, je ne vous dirai pas d'abandonner toutes les commodités. Les règles de type cohérente vous obligent à faire attention à la façon dont les variables et les fonctions se comportent, donc votre code sera amélioré.

Types en variables

Tout d'abord, voyons comment la règle est appliquée à une variable. C'est très simple: votre variable doit toujours avoir un seul type.

var a = [];
var b = a;

a.push('Hello');

L'exemple ci-dessus montre le problème. Cette règle nous oblige à prétendre que la dernière ligne de code dans cet exemple lance une erreur car lorsque nous définissons d'abord le texte variable, nous lui donnons une valeur du type de chaîne, et maintenant nous lui attribuons un nombre. Les règles de type cohérent signifient que nous n'autorisons pas la modification du type de la variable de cette manière. Il est plus facile de déduire votre code lorsque vos variables sont cohérentes. Il aide particulièrement à des fonctions plus longues où il est facile d'ignorer la source des variables. Lorsque vous travaillez dans une base de code qui ne suit pas cette règle, j'ai accidentellement causé beaucoup d'erreurs parce que j'ai vu une variable déclarée, puis j'ai supposé que cela resterait le même type - parce que avouons-le, cela a du sens, n'est-ce pas? Il n'y a généralement aucune raison d'attribuer différents types à la même variable.

Tapez les paramètres de fonction

Les mêmes règles s'appliquent également ici. Les paramètres de la fonction doivent également être cohérents. Un exemple d'erreur:

var text = 'Hello types';

// 错误！不要这样做！
text = 1;

quel est le problème ici? On pense généralement que la logique de branchement basée sur la vérification des types n'est pas une bonne pratique. Il y a quelques exceptions à cela, mais généralement une meilleure option consiste à utiliser le polymorphisme. Vous devez essayer de vous assurer que le paramètre de fonction n'a également qu'un seul type. Si vous oubliez de considérer différents types, cela réduit la probabilité de problèmes et rend le code plus simple car vous n'avez pas à écrire de code pour gérer tous les différents types de cas. De meilleures façons d'écrire la fonction SUM sont les suivantes:

function sum(a, b) {
  if (typeof a === 'string') {
    a = 1;
  }

  return a + b;
}

Ensuite, vous gérez la vérification du type dans le code d'appel plutôt que dans la fonction. Comme on peut le voir à partir de ce qui précède, cette fonction est beaucoup plus simple maintenant. Même si nous devons déplacer le type de vérification ailleurs, plus nous les exécutons dans le code, mieux cela fonctionnera. Nous discuterons de l'utilisation de la vérification des types et du type de type plus tard dans cet article, y compris la façon dont la vérification des types peut être facilement en cascade si elle est utilisée de manière incorrecte.

Tapez la valeur de retour de la fonction

Ceci est lié aux deux autres: votre fonction doit toujours renvoyer la valeur du même type. Nous pouvons donner un exemple d'angularjs ici. AngularJS fournit une fonction qui convertit le texte en minuscules, appelé Angular.LowerCase. Il existe également une fonction standard, string.prototype.tolowercase. Nous pouvons comparer leur comportement pour mieux comprendre cette partie de la règle:

function sum(a, b) {
  return a + b;
}

La variable a contiendra ce que vous attendez: "Hello Types". Mais qu'inclura B? Sera-ce une chaîne vide? La fonction va-t-elle lancer une exception? Ou peut-être que c'est juste nul? Dans ce cas, la valeur de B est nul. Notez qu'il est difficile de deviner immédiatement quel est le résultat - nous avons trois résultats possibles depuis le début. Pour les fonctions angulaires, pour les valeurs non corrigées, il renverra toujours l'entrée. Maintenant, voyons comment les fonctions intégrées se comportent:

var a = [];
var b = a;

a.push('Hello');

Le résultat du premier appel est le même, mais le deuxième appel lance une exception. Les fonctions intégrées suivent les règles de type cohérente et n'autorisent pas les types de paramètres incorrects. La valeur de retour est toujours une chaîne. Nous pouvons donc dire que les fonctions intégrées sont meilleures, mais vous vous demandez peut-être exactement comment faire cela? Considérons les cas d'utilisation typiques pour de telles fonctions. Nous l'utilisons à un moment donné de notre code pour convertir la chaîne en minuscules. Comme cela arrive souvent dans le code JavaScript, nous ne pouvons pas déterminer à 100% si notre entrée est toujours une chaîne. C'est OK, parce que nous sommes de bons programmeurs et nous supposons que notre code n'est pas faux. Que se passe-t-il si nous utilisons des fonctions angularjs qui ne sont pas conformes à ces règles? Les valeurs non corrigées le traversent sans aucun problème. Il peut passer plusieurs fonctions, et nous pouvons même l'envoyer via l'appel XMLHTTPREQUEST. Maintenant, la mauvaise valeur est dans notre serveur et revient finalement à la base de données. Vous pouvez voir ce que je veux dire, non? Si nous utilisons des fonctions intégrées conformes aux règles, nous trouverons immédiatement l'erreur à ce moment-là. Chaque fois que vous écrivez une fonction, assurez-vous que les types qu'il renvoie sont cohérents. Un mauvais exemple est illustré ci-dessous:

var text = 'Hello types';

// 错误！不要这样做！
text = 1;

De même, comme les variables et les paramètres, si nous avons une telle fonction, nous ne pouvons pas faire d'hypothèses sur son comportement. Nous devrons utiliser si pour vérifier le type qui renvoie la valeur. Nous pouvons l'oublier à un moment donné, puis une autre erreur apparaîtra entre nos mains. Nous pouvons le réécrire de plusieurs façons, voici une solution à ce problème:

function sum(a, b) {
  if (typeof a === 'string') {
    a = 1;
  }

  return a + b;
}

Cette fois, nous nous assurons que tous les chemins renvoient une chaîne. Il est désormais plus facile de déduire les résultats de la fonction.

NULL ET UNDEFINED SONT SPÉCIAL

Jusqu'à présent, nous n'avons en fait discuté que du genre original. Vous devez suivre les mêmes règles en ce qui concerne les objets et les tableaux, mais vous devez être conscient de deux cas spéciaux. Lors du traitement des types de référence, il est parfois nécessaire d'indiquer qu'il n'y a pas de valeur. Un bon exemple est document.getElementByid. Si l'élément correspondant n'est pas trouvé, il renvoie Null. C'est pourquoi nous considérons NULL comme partageant un type avec n'importe quel objet ou tableau, mais seulement ces objets ou tableaux. Vous devez éviter de renvoyer NULL des fonctions qui peuvent renvoyer des valeurs d'origine telles que le nombre. Undefined peut également être considéré comme un "sans valeur" référencé. À la plupart des fins, il peut être considéré comme égal à NULL, mais NULL est préférable en raison de sa sémantique dans d'autres langues orientées objet.

Array et Null

Lorsque vous utilisez des tableaux, vous devez également considérer que les tableaux vides sont généralement meilleurs que NULL. Bien que les tableaux soient des types de référence, vous pouvez utiliser Null avec eux, il est généralement plus logique de renvoyer un tableau vide. Regardons l'exemple suivant:

var a = [];
var b = a;

a.push('Hello');

Il s'agit probablement de l'une des utilisations les plus courantes des tableaux. Vous obtenez un tableau de la fonction et vous y itérez pour effectuer d'autres opérations. Qu'arrive-t-il au code ci-dessus si getListofiTems renvoie null lorsqu'il n'y a pas de projet? Il lance une erreur car NULL n'a aucune longueur (ou tout autre attribut). Lorsque vous envisagez d'utiliser des tableaux comme celui-ci, ou même list.ForEach ou List.map, vous pouvez voir que retourner un tableau vide en cas de valeur est généralement une bonne idée.

Type de vérification et de conversion de type

En savoir plus sur la vérification des types et la conversion de type plus en détail. Quand devriez-vous faire la vérification des types? Quand devriez-vous faire la conversion de type?

Type Conversion

Le premier objectif d'une conversion de type

devrait être de vous assurer que votre valeur est du bon type. La valeur doit être un nombre plutôt qu'une chaîne, etc. Le deuxième objectif devrait être que vous ne deviez convertir la valeur qu'une seule fois. Le meilleur endroit pour effectuer la conversion de type est à la source. Par exemple, si vous obtenez des données du serveur, vous devez effectuer toute conversion de type nécessaire dans la fonction qui traite les données reçues. L'analyse des données du DOM est un endroit très courant où les erreurs commencent à se produire. Supposons que vous ayez une zone de texte contenant des numéros et que vous souhaitez le lire. Ou, il peut s'agir d'un attribut dans un élément HTML, et il ne doit même pas être une entrée utilisateur.

var text = 'Hello types';

// 错误！不要这样做！
text = 1;

Étant donné que les valeurs que vous pouvez obtenir à partir du DOM sont généralement des chaînes, il est important de taper convertir lors de leur lecture. Dans une certaine mesure, vous pouvez le considérer comme le "bord" du module. Les données vont dans votre module JavaScript en lisant ses fonctions, il doit donc convertir les données au format correct. En effectuant une conversion de type au bord du module, nous nous assurons qu'il n'a pas à être traité en interne. Cela réduit considérablement la possibilité de moulage de type implicite provoquant des erreurs. Il nous permet également d'écrire moins de code car nous ne permettons pas aux mauvaises valeurs d'entrer le module à partir du bord.

function sum(a, b) {
  if (typeof a === 'string') {
    a = 1;
  }

  return a + b;
}

Typeof et Type Check

Vous ne devez utiliser que le type de validation, non basé sur la logique de la branche de type. Il y a quelques exceptions à cela, mais c'est une bonne règle de base. Regardons deux exemples:

function sum(a, b) {
  return a + b;
}

Il s'agit d'un exemple d'utilisation de typeof pour la validation. Nous nous assurons que les paramètres transmis à la fonction sont du type correct. Cependant, l'exemple suivant montre ce que la logique de branche est basée sur le type.

var a = [];
var b = a;

a.push('Hello');

Ne faites pas cela. Bien qu'il soit nécessaire de le faire parfois, c'est souvent un signe de mauvaise conception. Si vous vous retrouvez fréquemment à exécuter cette logique, vous devriez probablement convertir la valeur au bon type au début de votre code. Si vous finissez par utiliser beaucoup de types dans votre code, cela peut signifier que vous devrez peut-être convertir la valeur que vous souhaitez comparer. Les contrôles de type se propagent souvent, ce qui est généralement un signe de types mal conçus. Comme mentionné précédemment, vous devez essayer la conversion de type au bord du module, car il vous permet d'éviter le type de cascade. Si vous convertissez le plus tôt possible, aucune fonction que vous appelez plus tard n'a à faire de la vérification de type ou de la conversion de type. Cela s'applique également aux objets: si vous vous retrouvez à utiliser l'instance pour beaucoup de vérifications ou à vérifier les propriétés de l'objet, cela signifie que vous devez probablement construire les données d'une manière différente. Les mêmes règles que le type de type s'appliquent également à l'instance: vous devriez essayer de l'éviter, car il peut s'agir d'un mauvais signe de conception. Cependant, il y a une situation qui est inévitable:

var text = 'Hello types';

// 错误！不要这样做！
text = 1;

Si votre code doit gérer les types d'exceptions spécifiques, l'instance de l'autre est généralement un bon choix, car JavaScript Catch ne permet pas la distinction par type comme certaines autres langues. Dans la plupart des autres cas, vous devriez essayer d'éviter l'instance.

Conclusion

Comme nous l'avons découvert, les types faibles de JavaScript nous apportent une grande liberté, mais nous devons également être prudents. Sinon, nous nous retrouverons dans un chaos de genre sans signification. En nous assurant que notre code suit les règles de type cohérent, nous pouvons éviter beaucoup de problèmes. Il est plus facile de déduire notre code lorsque nous connaissons le type. Nous n'avons pas à créer de nombreuses vérifications de type dans notre code pour éviter les erreurs. Cela semble difficile si vous n'utilisez pas une langue fortement dactylographiée, mais cela paie beaucoup lorsque vous avez besoin de déboguer ou de maintenir votre code. Pour plus d'informations sur ce sujet, je vous recommande de consulter TypeScript. Il s'agit d'une langue de type JavaScript, mais il ajoute une sémantique de type plus fort à la langue. Il a également un compilateur qui crache une erreur lorsque vous essayez de faire des choses stupides comme le mélange et les types de correspondance.

FAQ sur les langages fortement typés en JavaScript (FAQ)

Quelle est la différence entre un langage fortement dactylographié et un langage faiblement dactylographié?

Le langage fortement dactylographié fait référence aux langues dans lesquelles les variables sont liées à un type de données spécifique. Les exemples incluent Java et C. D'un autre côté, les langages faiblement typés comme JavaScript permettent aux variables de maintenir tout type de données et de taper automatiquement les conversions si nécessaire. S'il est géré de manière incorrecte, cette flexibilité peut conduire à des résultats inattendus.

Comment appliquer une frappe solide en JavaScript?

JavaScript lui-même est un langage faiblement dactylographié, mais vous pouvez appliquer un type fort à l'aide de TypeScript, un superset typique statiquement de JavaScript. TypeScript ajoute des types statiques à JavaScript, permettant la vérification du type au moment de la compilation. Cela aide à détecter les erreurs au début du processus de développement. Le "modèle strict" est une autre méthode en JavaScript qui fait que la langue se comporte plus comme un langage fortement dactylographié en lançant des erreurs pour des actions non sécurisées.

Quels sont les avantages d'utiliser des langues fortement dactylographiées?

Les langues fortement dactylographiées offrent certains avantages. Ils peuvent aider à capter des erreurs au temps de compilation plutôt qu'à l'exécution, ce qui peut économiser beaucoup de temps de débogage. Ils rendent également le code plus auto-documentaire, car les types de données de variables indiquent clairement comment ils sont utilisés. De plus, ils peuvent rendre le code plus prévisible et plus facile à déduire car ils empêchent les conversions de type inattendues.

Puis-je utiliser JavaScript comme un langage fortement dactylographié?

Bien que JavaScript ne soit pas un langage fortement tapé par défaut, vous pouvez appliquer Strong Sactée à l'aide d'outils tels que TypeScript ou Flow. Ces outils ajoutent des types statiques à JavaScript, permettant la vérification de type au moment de la compilation. Cela aide à détecter les erreurs au début du processus de développement. Cependant, il est important de noter que ces outils ne modifient pas la nature sous-jacente du JavaScript; ils fournissent simplement une couche de sécurité de type.

Qu'est-ce que TypeScript et comment est-il lié à JavaScript?

TypeScript est un superset dactylographié JavaScript développé par Microsoft. Il ajoute des types statiques à JavaScript, permettant la vérification de type au moment de la compilation. Cela aide à détecter les erreurs au début du processus de développement. Le code TypeScript est converti en JavaScript, ce qui signifie qu'il peut exécuter n'importe où JavaScript exécute. Il est entièrement compatible avec JavaScript et peut utiliser toutes les fonctionnalités de JavaScript.

Quels sont les inconvénients de l'utilisation de langues fortement typées?

Alors que les langues fortement dactylographiées offrent de nombreux avantages, ils ont également des inconvénients. Ils peuvent être plus verbeux et nécessiter plus de code pour effectuer les mêmes tâches que les langues de type faible. Ils ont également besoin d'une étape de compilation, ce qui peut ralentir le processus de développement. De plus, ils peuvent être moins flexibles et sont plus difficiles à utiliser pour certaines tâches, telles que la gestion des données dynamiques.

Comment fonctionne le "mode strict" en JavaScript?

"modèle strict" est une fonctionnalité de JavaScript qui fait que la langue se comporte plus comme une langue fortement dactylographiée. Il lance des erreurs pour des actions dangereuses, telles que l'attribution de valeurs aux propriétés en lecture seule ou en utilisant des variables avant de les déclarer. Cela aide à détecter les erreurs au début du processus de développement. Pour activer "Mode strict", ajoutez simplement une ligne "Utilisez Strict;" en haut d'un fichier ou d'une fonction JavaScript.

Qu'est-ce que la coercition du type en JavaScript?

Le type coercition est une fonctionnalité dans JavaScript où la langue convertit automatiquement un type de données en une autre si nécessaire. Par exemple, si vous essayez d'ajouter des nombres et des chaînes, JavaScript convertira les nombres en chaînes avant d'effectuer l'ajout. Bien que cela soit pratique, cela peut également conduire à des résultats inattendus s'ils sont traités mal.

Comment éviter la coercition de type en JavaScript?

Une façon d'éviter la coercition de type dans JavaScript est d'utiliser "Mode strict", qui lance des erreurs pour les actions dangereuses. Une autre façon consiste à utiliser l'opérateur "===" au lieu de l'opérateur "==" pour la comparaison, car le premier n'effectue pas la coercition de type. De plus, vous pouvez ajouter des types statiques à JavaScript à l'aide d'outils comme TypeScript ou Flow, ce qui aide à attraper des erreurs liées au type au moment de la compilation.

Quel est l'avenir des langages fortement typés en JavaScript?

L'utilisation de langages fortement dactylographiées en JavaScript peut augmenter à l'avenir car ils offrent de nombreux avantages tels que la capture d'erreurs tôt et la rendez le code plus prévisible. Des outils tels que TypeScript et Flow deviennent de plus en plus populaires, et de nouveaux outils et fonctionnalités sont développés pour rendre JavaScript plus de type type. Cependant, la flexibilité et la dynamicité de JavaScript continueront d'être le premier choix pour de nombreux développeurs.

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!