JavaScript-Erweiterung: So verwenden Sie den statischen Flow-Typ zum Überprüfen und Melden von Fehlern

In diesem Artikel geht es um die Erweiterung von Javascript: Wie man Flow-Statiktypen zum Überprüfen und Melden von Fehlern verwendet. Ich hoffe, dass er für Sie hilfreich ist .

Die JS-Sprache unterscheidet sich stark von Java, der C-Serie und anderen Sprachen, das heißt, die JS-Sprache ist eine schwach typisierte Sprache. Diese Funktion der js-Sprache lässt die Leute denken, dass js sehr frei ist und keine zwingenden Einschränkungen hat. Bei großen Projekten wird diese Funktion von js jedoch problematischer, da sie dazu führt, dass der Code des Teams sehr unkontrollierbar ist . Dieser Grund ist auch ein sehr wichtiger Grund für die Geburt von TypeScript.

Aber tatsächlich bevorzugen viele Entwickler immer noch die Verwendung von js zum Entwickeln von Projekten. Daher hat Facebook einen Flow entwickelt, um der js-Sprache dabei zu helfen, die statische Typprüfungsfunktion zu erweitern und die oben genannten Probleme zu vermeiden.

1. Codebeispiel

flow legt fest, dass das Hinzufügen eines // @flow-Kommentars am Anfang der Datei, die eine statische Typprüfung durchführen muss, es dem Tool ermöglicht, zu erkennen, was diese Datei benötigt statisch typisiert sein Überprüfen Sie, andernfalls wird es als normale JS-Datei ohne statische Typprüfung behandelt.

Statische Flow-Typen können auf fast alle js-Objekte angewendet werden, einschließlich erweiterter ES6-Klassen, Module usw. sowie der jsx-Syntax.

Im Folgenden finden Sie einige grundlegende statische Typbeispiele. Weitere Informationen finden Sie unter Typanmerkungen |.

1.1 Grundtypen

ähneln den Grunddatentypen von js , einschließlich:

boolean: entspricht dem booleschen Typ von js

number: entspricht dem Number-Typ von js

string: entspricht dem String-Typ von js

null: entspricht dem js null

void: entspricht undefiniertem

normalem js-Code von js

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

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

hello = []; // 重新赋值

plus erweitertem Flow-Static-Type-Checking-Code

// @flow

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

hello = 2 * 2; // 报错

hello = []; // 报错

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

1.2 Funktion

Normaler js-Code

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 erweiterter Flusscode für die statische Typprüfung

// @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 Vielleicht, Optional, Literal, Gemischt ( Gemischt)

Vielleicht wird der Typ durch ein ? vor dem Typ dargestellt, einschließlich des Typs selbst, null, undefiniert

// @flow

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

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

Optionaler Typ wird im Allgemeinen für Objekteigenschaften oder Funktionsparameter verwendet. einschließlich des Typs selbst, undefiniert

// @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'); // 报错

Semantische (literale) Typen werden im Allgemeinen verwendet, um einen bestimmten oder mehrere spezifische Werte zu deklarieren (mehrere Werte werden durch | getrennt)

// @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

Gemischter Typ bezieht sich auf jeden Datentyp

// @flow

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

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

1.4 Zusammengesetzter Typ

Array

// @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 = ['']; // 重新赋值

map

// @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',
};

Weitere statische Typen können Typanmerkungen anzeigen |.

2. Verwenden Sie das Tool

zum Installieren

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

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

Verwenden Sie

flow init                       # 初始化项目

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

3. Verwenden Sie es mit babel

Weil der Fluss statisch ist Es ist nur eine Erweiterung von js, wird von js nicht nativ unterstützt und kann daher im Allgemeinen nicht mit Babel ausgeführt werden, sodass eine statische Typprüfung durchgeführt werden kann, wenn das Programm ausgeführt wird, um den gewünschten Effekt zu erzielen .

3.1 babel-preset-flow

Installieren Sie babel-preset-flow, damit babel die Flow-Syntax beim Transkodieren von JS-Dateien erkennen kann.

npm i -D babel-preset-flow

.babelrc

{
  "presets": ["flow"]
}

Quelldatei (Flow)

// @flow

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

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

plus(1, 2); // 3

Transkodierte Datei

// 定义一个 '两个数字参数，返回值也是数字' 的函数
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

Im Allgemeinen wird das Plugin „babel-plugin-flow-runtime“ in der Entwicklungsumgebung verwendet, sodass der Datentyp während der Entwicklung in Echtzeit überprüft werden kann, genau wie bei der nativen statischen Typprüfung des laufenden Flusses. (Im Allgemeinen wird diese Funktion nicht in der Produktionsumgebung verwendet, da sie zusätzliche js-Leistung verbraucht.)

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

.babelrc

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

Quelldatei (Flow)

// @flow

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

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

plus(1, 2); // 3

Nachher Transkodierung der Datei

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

Zu diesem Zeitpunkt importiert die js-Datei das Flow-Runtime-Modul und überprüft den Datentyp der Parameter a, b und den Rückgabewert der Plus-Funktion Wenn die Datendefinition nicht erfüllt ist, wird ein Fehler gemeldet.

Das obige ist der detaillierte Inhalt vonJavaScript-Erweiterung: So verwenden Sie den statischen Flow-Typ zum Überprüfen und Melden von Fehlern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!