Extension JavaScript : comment utiliser le type statique de flux pour vérifier et signaler les erreurs

Ce que cet article vous apporte concerne l'extension de javascript : comment utiliser les types statiques de flux pour vérifier et signaler les erreurs. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Le langage js est très différent de Java, de la série C et des autres langages, c'est-à-dire que le langage js est un langage faiblement typé. Cette fonctionnalité du langage js peut faire penser aux gens que js est très libre et n'a aucune contrainte obligatoire. Cependant, lorsque l'on rencontre des projets à grande échelle, cette fonctionnalité de js deviendra plus gênante, car elle rendra le code de l'équipe très incontrôlable. . Cette raison est également une raison très importante pour la naissance de TypeScript.

Mais en fait, de nombreux développeurs préfèrent toujours utiliser js pour développer des projets, c'est pourquoi Facebook a développé flow pour aider le langage js à étendre la fonction de vérification de type statique et à éviter les problèmes mentionnés ci-dessus.

1. Exemple de code

flow stipule que l'ajout d'un commentaire // @flow au début du fichier qui doit être une « vérification de type statique de flux » permet à l'outil d'identifier ce dont ce fichier a besoin. doit être typé statiquement Check, sinon il sera traité comme un fichier js normal sans vérification de type statique.

Les types statiques Flow peuvent être appliqués à presque tous les objets js, y compris les classes étendues, modules, etc. es6, ainsi qu'à la syntaxe jsx.

Voici quelques exemples de types statiques de base. Pour plus de détails, veuillez consulter Annotations de types | Flux.

1.1 Les types de base

sont similaires aux types de données de base de js. , comprenant :

boolean : correspond au type Boolean de js

number : correspond au type Number de js

string : correspond au type String de js

null : correspond au js null

void : correspondant au code js normal non défini

de js

let hello = 'hello'; // 声明一个变量

hello = 2 * 2; // 重新赋值

hello = []; // 重新赋值

plus le code de l'extension de vérification de type statique de flux

// @flow

let hello: string = 'hello'; // 声明一个 string 类型的变量

hello = 2 * 2; // 报错

hello = []; // 报错

hello = 'hi'; // 重新赋值

1.2 Fonction

Code js normal

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

plus(); // NaN
plus(1); // NaN
plus(1, 2); // 3
plus('hello'); // 'helloundefined'
plus('hello', ' hi'); // 'hello hi'
plus({}, {}); // '[object Object][object Object]'

plus code étendu de vérification de type statique de flux

// @flow

// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

1.3 Peut-être, facultatif, Sémantique (littéral), mixte (mixte)

Le type Peut-être (Peut-être) est représenté par un ? devant le type, y compris le type lui-même, nul, non défini

// @flow

let hello: ?string; // 声明一个数据类型可以是 string, null, undefined 的变量

hello = null; // 赋值
hello = undefined; // 重新赋值
hello = 'hello'; // 重新赋值
hello = 1; // 报错
hello = true; // 报错

Facultatif ( Facultatif) Les types sont généralement utilisés pour les propriétés d'objet ou les paramètres de fonction. Ajoutez un ? après le nom, y compris le type lui-même, non défini

// @flow

const obj: {hello? : string}; // 属性 hello 可以是 string, undefined

obj = {}; // 赋值
obj = {hello: undefined}; // 重新赋值
obj = {hello: 'hello'}; // 重新赋值
obj = {hello: null}; // 报错
obj = {hello: 1}; // 报错
obj = {hello: true}; // 报错

// 属性 param 可以是 number, undefined
function method(param?: number) { /* ... */ }

method(); // 正常
method(undefined); // 正常
method(1.12); // 正常
method(null); // 报错
method('hello'); // 报错

Les types sémantiques (littéraux) sont généralement utilisés pour déclarer un certain ou plusieurs spécifiques. valeurs (Plusieurs valeurs sont séparées par |)

// @flow

let hello: 'hello'; // 声明一个只能赋值 'hello' 的变量

hello = 'hello'; // 赋值
hello = 'hi'; // 报错
hello = 12; // 报错
hello = undefined; // 报错
hello = null; // 报错

function method(param: 1 | 'hi' | boolean): void { /* ... */ }

method(); // 报错，缺少参数
method(1); // ok
method(1.2); // 报错，类型不对
method('hi'); // ok
method('hello'); // 报错，类型不对
method(true); // ok
method(false); // ok

Le type mixte fait référence à tout type de données

// @flow

let hello: mixed; // 声明一个 mixed 类型的变量

hello = 'hello'; // 赋值
hello = 'hi'; // 重新赋值
hello = 12; // 重新赋值
hello = undefined; // 重新赋值
hello = null; // 重新赋值

1.4 Type composite

Tableau

// @flow

let arr1: Array<boolean> = [true, false, true]; // 声明一个元素是 boolean 的数组
arr1 = [true, 1]; // 报错，1 不是 boolean 值
arr1 = ['']; // 报错，'' 不是 boolean 值

let arr2: Array<string> = ["A", "B", "C"]; // 声明一个元素是 string 的数组

let arr3: Array<mixed> = [1, true, "three"] // 声明一个元素是任意类型的数组
arr1 = [true, 1]; // 重新赋值 
arr1 = ['']; // 重新赋值

carte

// @flow

// 声明一个 map 类型，其有一个名为 foo，类型 boolean 的子元素
let obj1: { foo: boolean } = { foo: true };
obj1 = {}; // 报错，缺少 foo 这个属性值
obj1 = {foo: 1}; // 报错，属性值 foo 的类型必须是 boolean
obj1 = {foo: false, bar: 'hello'}; // 重新赋值

// 声明一个 map 类型，其有名为 foo, bar, baz，类型 number, boolean, string 的子元素
let obj2: {
  foo: number,
  bar: boolean,
  baz: string,
} = {
  foo: 1,
  bar: true,
  baz: 'three',
};

Pour des types plus statiques, vous pouvez afficher le flux d'annotations de type.

2. Utilisez l'outil

pour. installer

# 全局安装
npm i -g flow-bin

# 本地安装
npm i -D flow-bin

Utiliser

flow init                       # 初始化项目

flow check path/to/dir          # 检查这个目录下所有的文件
flow check path/to/js/file      # 检查指定文件

3. Utilisez-le avec babel

Comme le type statique de flux n'est qu'une extension de js, il n'est pas supporté nativement par js et ne peut pas être exécuté directement. Par conséquent, généralement flow Ils sont tous utilisés avec babel, afin que la vérification de type statique puisse être effectuée lorsque le programme est en cours d'exécution pour obtenir l'effet souhaité.

3.1 babel-preset-flow

Installez babel-preset-flow afin que babel puisse reconnaître la syntaxe du flux lors du transcodage des fichiers js.

npm i -D babel-preset-flow

.babelrc

{
  "presets": ["flow"]
}

Fichier source (flux)

// @flow

// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

Fichier transcodé

// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a, b) {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

3.2 babel -plugin- flow-runtime

Généralement, le plug-in babel-plugin-flow-runtime est utilisé dans l'environnement de développement, afin que le type de données puisse être vérifié en temps réel pendant le développement, tout comme le flux statique natif en cours d'exécution tapez Vérifiez la même chose. (Cette fonction n'est généralement pas utilisée dans un environnement de production car elle consommera des performances js supplémentaires)

npm i -D babel-plugin-flow-runtime flow-runtime

.babelrc

{
  "presets": ["flow"],
  "plugins": ["flow-runtime"]
}

Fichier source (flux)

// @flow

// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

Fichier transcodé

import t from 'flow-runtime';


// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a, b) {
  return a + b;
}

t.annotate(plus, t.function(t.param('a', t.number()), t.param('b', t.number()), t.return(t.number())));
plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

À ce moment, le fichier js sera importé dans le module flow-runtime pour vérifier le type de données des paramètres a, b et la valeur de retour de la fonction plus If. il ne correspond pas à la définition des données, une erreur sera signalée.

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!