Flow入門教程

目次

インストール

は

を使用します.

タイプの注釈

flow開発ツールプラグイン

タイプの注釈を削除する

環境API

を実行する.
Flow:JSのタイプ検査器
インストール

yarn init --yes package.json

を初期化する.

yarn add flow-bin --dev flow

をインストールします.
使用
コメント文@flowでマークする

// @flow
function sum(a: number, b: number){
     
    return a+b
}

yarn flow init flowを初期化するプロファイル

yarn flowは、flowを使用してコードをタイプチェックする

.

yarn flow stop Flow Language Supportサービスを停止する

タイプコメント
Flow公式文書タイプ:https://flow.org/en/docs/types 第三者文書:https://www.saltycrane.com/cheat-sheets/flow-type/latest

変数

//    
const a:string = 'abc'
const b:number = Infinity //NaN 100
const c:boolean = true //false
const d:null = null
const e:viod = undefined
const f:symbol = Symbol()

配列タイプ

//     number  
const arr1:Array = [1, 2, 3]
const arr2:number[] = [1, 2, 3]
//       --  
const arr3:[string, number] = ['foo', 100]

オブジェクトタイプ

const obj1:{
     foo:string, bar:number} = {
     
    foo: 'string', 
    bar: 100
}
//    
const obj2:{
     foo?:string, bar:number} = {
     
    bar: 100
}
//      
const obj3:{
     [string]:string} = {
     }
obj3.key1 = 'value1'
obj3.key2 = 'value2'

関数タイプ

//    
function sum (a:number, b:number){
     
    return a+b
}
//     
function foo():number {
     
    return 100
}
function faa():viod {
     
    //     
}
//        
function fbb(callback:(string, number) => viod){
     
    callback('abc', 100)
}

fbb(function(str, num){
     
    
})

特殊タイプ

//     
const a:'foo' = 'foo'  //a          'foo'

//    
const b:'success'|'warning'|'danger' = 'success'
const c:string|number = 'string'  //100

//  type         
type StringOrNumber = string | number
const d:StringOrNumber = 'string'  //100

//Maybe      :     ｜ null ｜ undefined
const foo:?numbet = null  //100 undefined

//     mixed   any
function passMixed (value:mixed){
     
    if(typeof(value) === 'string'){
     
        value.substr(1)
    }
    if(typeof(value) === 'number'){
     
        value * value
    }
}
function passAny (value:any){
     
    value.substr(1)
    value * value
    //    
}
//              value      
passMixed('string')
passMixed(100)
passAny('aaa')
passAny(111)

mixedとanyの違い:

anyは弱いタイプであり、そのタイプが特定されない場合は、任意のタイプとして動作することができる.

mixedは強いタイプで、そのタイプを明確にしてからしか

を使用できません.
flow開発ツールプラグイン

Flow Language Support--VCode

他のエディタ:https://flow.org/en/docs/editors

タイプコメントを削除

flow-remove-types

インストールyarn add flow-remove-types --dev

はyarn flow-remove-types -d

を使用する.

babel

インストールyarn add @babel/core @babel/cli @babel/preset-flow --dev

は

を使用します.
プロジェクトルートディレクトリにbabelプロファイルを追加します.babelrc

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

実行コマンドyarn babel src -d dist環境APIを実行する
ブラウザが提供するBOM DOMなど、nodeが提供する各種モジュール

//document getElementById              
//      HTMLElement  ，           null
const element:HTMLElement|null = document.getElementById('app')