JavaScript 拡張機能: フローの静的型を使用してエラーをチェックして報告する方法

この記事は JavaScript の拡張機能に関するもので、フローの静的型を使用してエラーを確認する方法について説明しています。必要な方は参考にしていただければ幸いです。 。

js 言語は Java、C シリーズ、その他の言語とは大きく異なります。つまり、js 言語は弱い型付けの言語です。 js 言語のこの機能により、js は非常に自由で強制的な制約がないと思われるかもしれませんが、大規模なプロジェクトに遭遇すると、チームのコードが非常に制御不能になるため、この js の機能はさらに厄介になります。この理由は、TypeScript が誕生した非常に重要な理由でもあります。

しかし実際には、多くの開発者は依然として js を使用してプロジェクトを開発することを好んでいるため、Facebook は js 言語による静的型チェック機能を拡張し、上記の問題を回避できるフローを開発しました。

1. コード例

flow では、「フロー静的型チェック」が必要なファイルの先頭に // @flow コメントを追加することで、ツールがこのファイルに必要なものを識別できるようにすることが規定されています。静的に型付けされるようにチェックしてください。それ以外の場合は、静的型チェックなしで通常の js ファイルとして扱われます。

flow 静的型付けは、jsx 構文だけでなく、es6 拡張クラス、モジュールなどを含むほぼすべての js オブジェクトに適用できます。

以下は、基本的な静的型の例です。詳細については、「型の注釈 | フロー」を参照してください。

1.1 基本的な型

は、js の基本的なデータ型に似ています。

boolean: js の Boolean 型に対応します

number: js の Number 型に対応します

string: js の String 型に対応します

null: js null

void: js の未定義に対応

通常の js コード

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

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

hello = []; // 重新赋值

プラス フロー静的型チェック拡張コード

// @flow

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

hello = 2 * 2; // 报错

hello = []; // 报错

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

1.2 関数

通常の JS コード

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 フロー静的型チェック拡張コード

// @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 たぶん (おそらく)、オプション (オプション)、セマンティック (リテラル) 、混合 (混合)

Maybe (おそらく) 型は、型自体、null、および未定義を含む、型の前にある ? で表されます。

// @flow

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

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

Optional (オプション) 型は、通常、オブジェクトのプロパティまたは関数パラメータに使用されます。名前の後に ? を追加します (型自体も含む)。 unknown

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

セマンティック (リテラル) 型は、通常、特定の値 (複数の値) を宣言するために使用されます。は | で区切られています)

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

混合型は任意のデータ型を指します

// @flow

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

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

1.4 複合型

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

マップ

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

より多くの静的型については、タイプ アノテーション フローを参照してください。

2. ツールを使用します

インストール

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

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

Use

flow init                       # 初始化项目

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

3. babel で使用する

フローの静的型は js の拡張にすぎないため、js ではネイティブにサポートされておらず、直接実行することはできません。そのため、フローは通常 babel で使用されます。これにより、プログラムの実行中に静的型チェックを実行して、目的の効果を実現できます。

3.1 babel-preset-flow

babel-preset-flow をインストールすると、babel が js ファイルをトランスコードするときにフロー構文を認識できるようになります。

npm i -D babel-preset-flow

.babelrc

{
  "presets": ["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

トランスコードされたファイル

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

通常、babel-plugin-flow-runtime プラグインは開発環境で使用されるため、ネイティブ実行フローの静的型チェックと同様に、開発中にデータ型をリアルタイムでチェックできます。 (通常、この関数は追加の js パフォーマンスを消費するため、運用環境では使用されません)

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

.babelrc

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

ソース ファイル (フロー)

// @flow

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

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

plus(1, 2); // 3

トランスコード後、ファイル

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

この時点で、jsファイルはフローランタイムモジュールをインポートし、パラメータa、b、およびplus関数の戻り値のデータ型チェックを実行します。データ定義を行うとエラーが報告されます。

以上がJavaScript 拡張機能: フローの静的型を使用してエラーをチェックして報告する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。