Les outils JavaScript Flow et TypeScript sont similaires à bien des égards. Cependant, ils diffèrent en ce qui concerne leurs fonctionnalités et leurs capacités en tant que vérificateurs statiques.
Découvrez comment Flow et TypeScript se comparent et quel est le meilleur vérificateur statique pour votre prochain projet.
Qu'est-ce que le flux ?
Flow est un outil de vérification de type statique pour JavaScript, créé par Facebook pour identifier au préalable les erreurs de code de compilation et d'exécution. Pour ce faire, il surveille les valeurs transmises par votre code et l'évolution de leurs types de données au fil du temps. Ce système de contrôle statique améliore la fiabilité et la lisibilité. Cela permet également de réduire l'apparition de bogues dans votre code JavaScript.
Qu'est-ce que TypeScript ?
TypeScript n'est pas seulement un vérificateur de type, comme Flow, mais un langage de programmation fortement typé. Microsoft a créé le langage en le construisant au-dessus de JavaScript.
Par convention, vous devez créer des fichiers TypeScript avec une extension de fichier .ts. Vous pouvez compiler un fichier TypeScript en code JavaScript, donc partout où JavaScript s'exécute, TypeScript peut également s'exécuter.
Configuration du flux pour votre application JavaScript
Vous pouvez intégrer Flow dans n'importe quel framework JavaScript que vous décidez d'utiliser pour votre projet. Vous devrez avoir configuré un compilateur JavaScript comme Babel pour gérer tous les types de flux dans votre code et le compiler en JavaScript vanille.
Pour installer Flow dans votre projet, exécutez la commande suivante :
ajouter du fil --dev flux-bin
Ensuite, vous devez installer l'interface de ligne de commande Flow globalement. Cette CLI fournit plusieurs commandes pour créer des applications de flux.
Sur macOS, utilisez Brassage maison pour installer Flow CLI :
brasser installer flux-cli
Vous aurez besoin de savoir comment utiliser Windows PowerShell pour installer Flow sur une machine Windows.
Pour installer Flow CLI sous Windows, exécutez ce script dans votre terminal PowerShell :
iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Les projets de flux nécessitent un .flowconfig fichier pour toutes les configurations nécessaires de l'outil.
Exécutez cette commande pour créer un fichier de configuration Flow dans un projet nouveau ou existant :
init de flux d'exécution npm
Sachez que des frameworks spécifiques peuvent livrer des projets avec un fichier de configuration Flow par défaut.
La dernière chose à faire est d'ajouter le script Flow à votre package.json déposer:
"scénarios": {
"couler": "couler"
},
Vous avez maintenant configuré avec succès Flow pour qu'il s'exécute dans votre application JavaScript.
Configuration de TypeScript dans votre projet
Exécutez la commande suivante pour installer TypeScript dans votre projet :
npm installer manuscrit --save-dev
Vous devez également installer le compilateur pour compiler le code TypeScript en JavaScript vanille. Vous devrez peut-être également configurer la configuration TypeScript pour un meilleur flux de travail expérience.
Installez le compilateur TypeScript globalement avec cette commande :
npm installer -g texte dactylographié
Pour initialiser un tsconfig.json config, saisissez la commande suivante dans votre terminal :
tsc --init
Les instructions ci-dessus vous permettront de commencer à utiliser TypeScript dans votre projet.
Construire avec le flux
Pour écrire du code Flow dans un fichier JavaScript, déclarez la syntaxe Flow en haut du code avant toute expression ou instruction :
// @couler
Vous pouvez définir des types de données de variable et de fonction à l'aide d'annotations. Flow générera alors une erreur si le type anticipé n'est pas satisfait.
Par exemple:
// @couler
laissez foo: nombre = "Bonjour";
Flow générera une erreur ici car le type de valeur attendu de fou est un nombre, pas une chaîne.
Courir flux d'exécution npm pour voir la sortie d'erreur dans le terminal :
L'activation de l'extension Flow dans n'importe quel éditeur de texte de votre choix affichera les erreurs dans votre éditeur au fur et à mesure que vous codez.
Flow utilise également l'inférence de type pour déterminer quelle devrait être la valeur attendue d'une expression.
Par exemple:
// @couler
fonctionfaire quelque chose(valeur) {
valeur de retour * "Bonjour";
};
laisser résultat = fairequelquechose(6);
Vous ne pouvez pas exécuter d'opérations arithmétiques entre le nombre six et la chaîne Bonjour.
La sortie de flux d'exécution npm sera une erreur:
Développer avec TypeScript
La syntaxe de type de TypeScript est très similaire à celle de Flow. Vous pouvez définir des types de variable et de fonction avec une annotation de type comme vous le feriez dans Flow.
TypeScript est livré avec plusieurs autres fonctionnalités similaires à Flow, comme l'inférence de type.
Prenons l'exemple de code TypeScript :
// Tapuscrit.ts
tapez Résultat = "passer" | "échouer"
fonctionvérifier(résultat: Résultat) {
si (résultat "passer") {
console.log("Passé")
} autre {
console.log("Échoué")
}
}
Tu peux courir tsc Typescript.ts pour compiler ce code en JavaScript plain vanilla.
Ce serait le même code TypeScript compilé en JavaScript vanille :
fonctionvérifier(résultat) {
si (résultat "passer") {
console.log("Passé")
} autre {
console.log("Échoué")
}
}
Avantages et inconvénients de TypeScript et Flow
Vous savez maintenant comment commencer à utiliser les deux outils dans votre projet JavaScript. Vous devez connaître les avantages et les inconvénients de l'utilisation de chacun.
L'intégration
Le processus de configuration pour utiliser Flow est un peu plus complexe que TypeScript. Vous devrez configurer un compilateur JavaScript comme Babel ou flow-remove-types pour supprimer les types de flux de votre code. TypeScript inclut un compilateur pour convertir le code TypeScript en JavaScript, ce qui facilite l'intégration.
TypeScript a de bien meilleurs outils et la plupart des frameworks JavaScript le prennent en charge par défaut. Les IDE les plus populaires offrent une prise en charge de première classe pour TypeScript. Flow est également pris en charge mais nécessite un plug-in spécial.
Communauté
Contrairement à Flow, les frameworks JavaScript comme React, React Native, Vue et Angular prennent en charge TypeScript prêt à l'emploi.
Cette adoption généralisée et cette large communauté se traduisent par de meilleures ressources d'apprentissage, des mises à jour et une prise en charge des outils.
La flexibilité
Flow agit comme un vérificateur de type qui fonctionne pour vous avertir d'un code potentiellement mauvais. TypeScript vous empêche d'écrire du mauvais code et dispose d'un système de type strict. TypeScript prend également en charge l'encapsulation d'objets, qui permet de garder un code complexe gérable. Flow n'a pas cette fonctionnalité.
Prestations de service
TypeScript fournit tous les services du langage JavaScript, comme la refactorisation du code et l'auto-complétion. Flow est un vérificateur de type statique qui fournit une compréhension et une analyse approfondies de votre code écrit.
Flow peut travailler jusqu'aux modules et bibliothèques importés de votre projet et discerner comment ils affectent votre code. Par exemple, il peut détecter et lancer un avertissement lorsqu'une bibliothèque requise dans votre projet est manquante ou lorsque vous essayez d'accéder à une définition qui n'existe pas.
Quel vérificateur statique devriez-vous utiliser ?
Il existe de nombreux arguments valables pour utiliser chaque outil car chacun a des fonctionnalités différentes. Certains peuvent être prioritaires pour un développeur et peu prioritaires pour l'autre. Les deux outils fonctionnent bien à leurs propres égards et offrent des avantages pour leur utilisation.
Vous devez examiner les exigences de votre projet et prendre une décision éclairée en fonction de celles-ci.
