flowタイプチェック

学習の目的

晦渋なバグを低減し、コードをより期待されるようにする

軽量級のjsタイプの検査で、スピーディーに使える

インストール
1.設置が必要ですbabel転じてflow文法

1. yarn add --dev @babel/core @babel/cli @babel/preset-flow

2.      .babelrc       

{
  "presets": ["@babel/preset-flow"]
}

2.据え付けflow

yarn add --dev flow-bin

3.フラッシュバックサービスを開始する

flow

//    flow stop

4.初期化項目

flow init

5.タイプ検出を実行する必要があるjsファイルの先頭に追加する// @flow

// @flow

function foo(x: ?number): string {
  if (x) {
    return x;
  }
  return "default string";
}

部分文法
7のデータタイプの検出に対応しています.Boolean、NUll、Undefined、Number、String・、Object大文字と小文字に注意する

//   1
// @flow

function check(x: number, y: string, z: boolean) {
//...
}

method(1, "test", true)

//   2

// @flow
function method(x: Number, y: String, z: Boolean) {
  // ...
}

method(new Number(1), new String("test"), new Boolean(true))

以上の判例は大文字と小文字のnumberが元のタイプで、大文字のNumberはJavaScriptの構造関数で、対象のタイプです.
オプションのタイプ

// @flow
function acceptsMaybeString(value: ?string) {
  // ...
}

acceptsMaybeString("bar");     // Works!
acceptsMaybeString(undefined); // Works!
acceptsMaybeString(null);      // Works!
acceptsMaybeString();          // Works!

オプションのオブジェクト属性

{ propertyName?: string } 
//  ts  

オプションの関数パラメータ

// @flow
function func(value?: string) {
  // ...
}
// @flow
function acceptsObject(value: { foo?: string }) {
  // ...
}
acceptsObject({ foo: "bar" }); // Works!
acceptsObject({ foo: undefined }); // Works!
acceptsObject({ foo: null }); // Error!
acceptsObject({}); // Works!

テキストの種類

function foo(value: 2) {}

foo(2); // Work!
foo(3); // Error!
foo('2'); // Error!

ハイブリッドタイプ

// @flow
function stringify(value: mixed) {
  // $ExpectError
  return "" + value; // Error!
}

stringify("foo");

また配列の種類があります.Symbol;インターフェースタイプ:Array;任意のタイプ:interfaceタイプコメント
どんな状況でもタイプを詳しく書く必要があるわけではないです.
たとえば

/* @flow */
function add(num1, num2) {
  return num1 + num2;
}
var x = add(3, '0');
console.log(x);

この場合、any検査にも役立ちます.
第三者倉庫
flowconfigで増加します.

[libs]
interfaces/

インターフェースの定義はインターフェースの下に書いてください.

// flow    interfaces      js  

//   Underscore

declare class Underscore {
  findWhere(list: Array, properties: {}): T;
}

declare var _: Underscore;

//           
// underscore_example.js:11:10,10: unknown global name: _

flowconfigその他の配置
[include]検査が必要なディレクトリまたはファイルを指定します.

[include]
../externalFile.js
../externalDir/
../otherProject/*.js
../otherProject/**/coolStuff/

[ignore]ファイルまたはフォルダを無視する

.*/__tests__/.*
.*/src/\(foo\|bar\)/.*
.*\.ignore\.js

注意[ignore]は[include]の後で、同時にincludeとignoreの同一のパスがあると、ignoreになります.
参考:
【1】https://zhenyong.github.io/fl...
【公式サイト】https://flow.org/en/docs/