Écrire un meilleur javascript avec le flux-js tutoriel-php.cn

Writing Better JavaScript with Flow

Flow: STATIC TYPE CHECKER Pour améliorer la qualité du code JavaScript

Flow, lancé par Facebook, est un vérificateur de type statique pour JavaScript, conçu pour détecter efficacement les erreurs de type dans le code JavaScript, généralement sans modifier le code, minimisant ainsi la charge de travail des programmeurs.

Avantages de base:

Vérification du type facultatif: Vous pouvez vérifier sélectivement les fichiers spécifiques, ajoutez simplement un /*@flow*/ commentaire en haut du fichier pour activer la vérification du type Flow.
Type Inférence et annotation: Le flux prend en charge explicitement les types de types à travers les annotations, et prend également en charge l'inférence de type via le contexte du code, qui est flexible et efficace.
Traitement de valeur nul stricte: Le flux n'ignorera pas la valeur null, empêchant efficacement les accidents de l'application causés par les valeurs null, qui sont différentes des autres types de systèmes.
Prise en charge de la définition de la bibliothèque: Fichiers de définition de la bibliothèque (libdefs), le flux peut éviter les erreurs de type lors de l'utilisation de bibliothèques tierces. Le fichier libdef contient une déclaration de fonction ou de méthode fournie par le code tiers.

L'enquèse des erreurs JavaScript communes

Avez-vous déjà passé beaucoup de temps à suivre les bogues dans votre code et avez finalement constaté que l'erreur était simple et évitable? Par exemple, l'ordre des paramètres de fonction est mauvais, ou le mauvais type de données est passé? Le système de type faible et les caractéristiques de conversion de type implicite de JavaScript conduisent souvent à des erreurs qui n'existent pas dans les langages typés statiquement. Le flux est un outil puissant pour résoudre de tels problèmes.

30 mars 2017: L'article a été mis à jour pour refléter les modifications de la bibliothèque Flow.

Installation et configuration

Flow prend en charge Mac OS X, Linux (64 bits) et Windows (64 bits). La façon la plus simple de l'installer est via NPM:

npm install --save-dev flow-bin

Copier après la connexion

et ajoutez la section package.json du fichier du projet scripts:

"scripts": {
  "flow": "flow"
}

Copier après la connexion

Ensuite, créez un fichier .flowconfig dans le répertoire racine du projet (vous pouvez utiliser npm run flow init pour créer un fichier de configuration vide).

Exécutez la vérification du flux

Vous pouvez utiliser la commande npm run flow check pour vérifier le code du projet, mais ce n'est pas le moyen le plus efficace, car il recouvre l'intégralité du projet à chaque fois. Il est recommandé d'utiliser un serveur de flux, qui vérifiera progressivement le code et ne vérifiera que les pièces modifiées. Démarrez le serveur: npm run flow; Arrêtez le serveur: npm run flow stop.

Contrôle de type facultatif et inférence de type

La vérification du type de flux est facultative. Vous pouvez sélectionner le fichier que vous souhaitez vérifier et ajouter un commentaire /*@flow*/ en haut du fichier.

Le flux effectue principalement la vérification du type de deux manières:

Type Annotation: Spécifiez explicitement le type attendu dans le code.
Inférence du type: Le flux infère le type basé sur le contexte de l'utilisation de la variable.

Le type d'inférence réduit la charge de travail de la modification du code, tandis que les annotations de type fournissent une vérification de type plus précise.

Traitement de la valeur nul et type Annotation

Le flux

est différent des autres systèmes de type, et il n'ignore pas la valeur null, ce qui aide à prévenir les erreurs causées par la valeur null.

L'annotation de type

utilise le préfixe Colon :, qui peut être utilisé pour les paramètres de fonction, les valeurs de retour et les déclarations variables.

Exemple de type Annotation pour les fonctions, les tableaux, les classes et les littéraux d'objets:

Fonction: function add(x : number, y : number) : number { ... }
Array: var foo : Array<number> = [1, 2, 3];</number>
Catégorie: class Bar { x: string; y: string | number; ... }
objet littéral: var obj : { a: string, b: number, ... } = { ... };
Type nullable: var foo : ?string = null;

Définition de la bibliothèque (libdefs)

Pour éviter les erreurs de type lorsque vous utilisez des bibliothèques tierces, vous pouvez utiliser des fichiers de définition de bibliothèque (libdefs). Vous pouvez utiliser l'outil flow-typed pour installer des libdefs prédéfinis ou créer vous-même des libdefs personnalisés.

supprimer les annotations de type

Utilisez l'outil flow-remove-types pour supprimer les annotations de type du code à exécuter dans le navigateur.

Résumé

Flow est un puissant vérificateur de type statique qui vous aide à écrire plus robuste et plus facile à maintenir le code JavaScript. Sa vérification de type facultative, son inférence de type et son traitement de valeur nulle stricte en font un outil efficace pour améliorer la qualité du code JavaScript.

FAQ

Voici quelques FAQ sur la rédaction d'un meilleur code JavaScript en utilisant Flow:

Qu'est-ce que le flux et pourquoi dois-je l'utiliser? Flow est un vérificateur de type statique JavaScript développé par Facebook, qui aide à détecter les erreurs avant l'exécution du code, améliorant la robustesse du code et la maintenabilité.
Comment installer et définir le flux dans le projet JavaScript? Installez le flux global avec npm install -g flow-bin, puis initialisez le projet avec flow init et ajoutez /*@flow*/ commentaires au fichier qui nécessite la vérification de type.
Comment vérifier les types dans le code JavaScript à l'aide du flux? Type Vérification en ajoutant des annotations de type aux variables, aux paramètres de fonction et aux valeurs de retour, puis exécutez la commande flow.
Les avantages d'autres types de vérificateurs tels que le flux et le dactylographie? Le système de type Flow est plus flexible et s'intègre mieux au code JavaScript existant, mais les outils de TypeScript et la prise en charge de la communauté sont plus complets.
Comment gérer les valeurs null et undefined dans le flux? Le flux ne permet pas de valeurs qui peuvent être null ou undefined lorsqu'ils ne sont pas vérifiés. if (value != null)
peut-il être utilisé avec React et d'autres bibliothèques JavaScript? Oui, Flow a une prise en charge intégrée pour React et peut prendre en charge d'autres bibliothèques via ou des libdefs personnalisés. flow-typed
Comment migrer un projet JavaScript existant à circuler? Vous pouvez migrer progressivement, activer d'abord le flux dans certains fichiers, puis ajouter progressivement des annotations de type.