Because our javascript is a weakly typed language, so sometimes compilation, or reconstruction will encounter a variety of problems, so we will simply talk about the Flow type detection tool today!

Weak type problems

  • Problems are discovered during the run phase
  • obj.foo()\
// This will not generate an error, but only at runtime

Copy the code
  • It might change what the function does
  • return a+b; \}\ console.log(sum(100,100)) //200\ console.log(sum(100,'100')) //100100\ // This changes the function functionCopy the code
  • Incorrect use of an object indexer
  • Obj [true] = 100\ console.log(obj['true']) //Copy the code

The advantage of strong typing

  • Mistakes are exposed earlier
  • The code is smarter, the code is more accurate
  • Refactorings are more robust, such as changing the name of a method, and strong types that are referenced elsewhere will report errors, making it easier to modify refactorings
  • Reduce invariant type judgments

\

Flow type checker

use

  • yarn init
  • yarn add flow
  • yarn flow init
  • Add //@flow to the header inside the file
  • yarn flow

Flow removes annotations

  • Yarn add flow-remove-types –dev // Install it first
  • yarn flow-remove-types . -d dist //. Dist is the output directory

Or use Babel

  • yarn add @babel/core @babel/cli @babel/preset-flow
  • Then create a new.babelrc file and write {“presets”:[“@babel/preset-flow”]}
  • yarn babel . -d dist

Development tool plug-ins

Flow Language Support makes it easier to prompt us as we write code

\

Flow can also automatically infer types, preferably by adding annotations yourself

Type annotations

  function square(n:number){
      return n*n
  }
 let num:number = 100
 ​
 function foo() :void{}Copy the code

Flow primitive type

 const a:string = 'foo'
 const b:number = 2333
 const c:boolean = false
 const d:null = null
 const e:void = undefined
 const f:symbol = Symbol(a)Copy the code

Flow array type

 const arr1: Array<number> = [1.2.3]
 const arr2: number[] = [1.2]
 ​
 // These fixed parameters and types are called tuples
 const foo:[string,number] = ['foo'.33]
Copy the code

Flow object type

  • Specifies the key name and the type of the key value
  • ? This parameter is optional
  • You can also specify the type of key with []
 const obj1: { foo:string, bar:number} = {foo:'string'.bar:100}
 constobj2: {foo? :string,bar:number} = {bar:100}
 const obj3:{[string]:string} ={}
Copy the code

Function types

  • If you pass in a function, you can set the parameter type of the function and the return value type
 function foo(callback:(string,number)=>void){
     callback('string'.100)}Copy the code

Special type

  • Literal type
  • Generally cooperate with joint declaration
 const a:'foo'= 'foo'
 const type: 'success' | 'warning' | 'error' = 'success'
 type StringOrBoolean = string | boolean
 const b:StringOrBoolean = 'string'
 ​
 constgender:? number =undefined
 / / equivalent to
 const gender: number | null |undefined
Copy the code

Mixed$Any

  • Can accept any type of argument
  • An error is not reported when any is a weak type definition
  • Mixed is a strongly typed definition and an error is reported if it is not the same
 / / complains
 function foo(value:mixed){
     a*a
     value.substr(1)}// No error will be reported
 function foo(value:any){
     a*a
     value.substr(1)}Copy the code

\

Type summary

You can find more details on this website

Flow Type Cheat Sheet​www.saltycrane.com/cheat-sheets/flow-type/latest/

Finally, give it a thumbs up if it helps! Collection oh ~

If you like the blogger, remember to pay attention to the wave!!