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.
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 |.
ä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'; // 重新赋值
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); // 3Vielleicht 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); // okGemischter Typ bezieht sich auf jeden Datentyp
// @flow let hello: mixed; // 声明一个 mixed 类型的变量 hello = 'hello'; // 赋值 hello = 'hi'; // 重新赋值 hello = 12; // 重新赋值 hello = undefined; // 重新赋值 hello = null; // 重新赋值
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 |.
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 # 检查指定文件
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 .
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); // 3Transkodierte Datei
// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a, b) {
return a + b;
}
plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错
plus(1, 2); // 3Im 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); // 3Nachher 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); // 3Zu 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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
