Flow (1) — JavaScript static type checker

catalog

• Flow overview
• Flow VS. TypeScript
• Flow installation

• Flow usage

  • 1. Use comments at the beginning of the file
  • 2. Use type annotation in code
  • 3. In package.json Added in,
  • 4. Initialize flow
  • 5. Execute the flow command to check
  • 6. Close the flow command

• Flow compilation

  • 1. The official website provides flow remove types

    • NPM environment
    • Yarn environment
  • 2.Babel

• Flow development tool plug in

  • Vscode flow language support
  • Other editors
• How to use flow syntax

Flow overview

W3cschool flow official reference document

FlowyesJavaScriptThe static type checker is implemented by static type inference. yes2014Year by yearFaceBookLaunched a tool, using it can make up forJavaScriptWeak type brings some disadvantages. It can be said to beJavaScriptIt provides a more perfect type system. stayReactandVueIn all the projectsFlowThe use of.

JavaScriptIt is a dynamic type checking language. The code checks whether the type is correct during execution,C#andJavaAre static type checking, check whether the type is correct when compiling the code. useflowYou can make itJavaScriptLikeC#andJavaThe same development experience.

Mark the type of each variable or parameter by adding comments to the code, and thenFlowAccording to these annotations, you can check the code exception, so as to check the type exception in the development phase.

• The colon of a parameter is called a type annotation, which is passed when it is publishedBabelThe annotation is eliminated, so the production environment will not be affected.
• It is not required that all variables and parameters should be annotatedanyType.

function sum (a: number, b: number) {
    return n * n
}

sum(100, 50)
Sum ('100 ', 50) // can detect exceptions

Flow VS. TypeScript

FlowAndTypeScriptThey’re all static type checkers,TypeScriptThey are more powerful, but they are allJavaScriptSupersets based onJavaScriptIn the end, they all need to be compiled intoJSfunction. Generally, large projects need static type checking to ensure code maintainability and readability,Vue2.0The source code introducedflow，flowYou can make your code use dynamic type checking with minimal changes, whileVue3.0Already used inTypeScriptDeveloped.

Flow installation

npm flow-bin

npm init -y

npm i flow-bin --dev

Can be innode_modulesOf.binSee in the directoryflowWe can execute it on the command lineflow, which is used to check the type exception in the code in the project.

Flow usage

1. Use comments at the beginning of the file

@flowIt’s a good sign, like thisflowTo check this file.

2. Use type annotation in code

PS: I see it hereVSCodeThere’s going to be something in itjsSyntax check of, need to close manually

Settings – >javascript valida->ClosingJavaScriptverification

2. In package.json Added in,

"scripts": {
    "flow": "flow"
}

If it isyarnDirect operationyarn flowIt can be set or notscriptsdirectnpx flowfunction

3. Initialize flow

Run the following statement to generate another one in the same level directory.flowconfigConfiguration file for

npm run flow init

# > [email protected] flow E:\professer\TypeScript
# > flow "init"

4. Execute the flow command to check

npm run flow

# > [email protected] flow E:\professer\TypeScript
# > flow

# Launching Flow server for E:\professer\TypeScript
# Spawned flow server (pid=5816)
# Logs will go to C:\Users\AppData\Local\Temp\flow\EzCzBprofesserzBlagouzBTypeScript.log
# Monitor logs will go to C:\Users\AppData\Local\Temp\flow\EzCzBprofesserzBlagouzBTypeScript.monitor_logNo errors!

5. Close the flow command

npm run flow stop

# > [email protected] flow E:\professer\TypeScript
# > flow "stop"

# Trying to connect to server for `E:\professer\TypeScript`
# Told server for `E:\professer\TypeScript` to die. Waiting for confirmation...
# Successfully killed server for `E:\professer\TypeScript`

Flow compilation

becauseflowThe type annotation for is notjavascriptIt can’t run directly because of its standard syntax. We need to translate the code into the original code that the browser can executeJavaScriptLanguage running. So we can remove the annotation we added after coding.

1. The official website provides flow remove types

npm flow-remove-types

NPM environment

1) Installation

npm i flow-remove-types --dev

2) package.jsonModify configuration in

#After compiling in SRC directory, transfer to dist directory
"scripts": {
    "flow": "flow",
    "flowRemove": "flow-remove-types src/ -d dist/"
}

3) Operation

npm run flowRemove

You can see in thedistDirectory with the compiledjsfile

Yarn environment

1) Installation

yarn add flow-remove-types

2) Operation

#The first is the specified directory, and - D is followed by the output directory
yarn flow-remove-types src -d dist/

2. Babel

1) Installation

yarnEnvironmental Science

#We can use the Babel command to compile @ Babel / cli
#@ Babel / perset flow contains the plug-in for our flow type checking
yarn add @babel/core @babel/cli @babel/perset-flow

npmEnvironmental Science

npm i @babel/core @babel/cli @babel/perset-flow --dev

2) Add profile

Peer directory add.babelrcFile, add configuration

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

3) Use

yarnEnvironmental Science

yarn babel src -d dist

npmEnvironmental Science

staypackage.jsonAdd in

"scripts": {
    "babel": "babel src/ -d dist/"
}

functionbabel

npm run babel

Flow development tool plug in

The exception is not displayed in the terminal, but directly displayed in the development tool.

Vscode flow language support

You can see and modify it directly in the code

Other editors

flow-editors

How to use flow syntax

Flow (2) — simple syntax usage