Add flow type checking to vue2.0 projects. Currently, projects are written in js. When projects become larger and larger, due to the weak type of js, later maintenance will become more and more difficult than strongly typed languages such as ts (typescript). To solve this problem, it was decided to use flow to add type checking.
Flow Understand
flow is a javascript static type checker published by Fackbook. You can check some bugs in js, eg: problems that occur in automatic type conversion.Flow official website
First, install flow
npm i flow-bin --save-dev
Then add the script in
"scripts": {
"flow": "flow check"
}
Run the command in the project root directory to generate the file.flowconfig
npm run flow init
Open the .flowconfig file and you can see the content is roughly as follows
.*/node_modules/.* .*/test/.* .*/build/.* [include] [libs] [lints] [options] module.file_ext=.vue module.file_ext=.js [strict]
In [ignore], we can add the file to be ignored.
module.file_ext=.vue configuration allows flow to detect vue single file components
- [ignore]: Flow checks all files in the project directory by default, but there are many files that we do not want to check, just like files in directories such as node_modules, build, etc., so we need to write these directories in the ignore configuration.
- [include]: The so-called project directory is actually the .flowconfig directory, not the real project directory. If we create a .flowconfig in a directory in this project, then the directory where the .flowconfig is located will also become a Flow project. Then, if we want to check files or directories other than the current Flow project, we need to write them in the include configuration item.
- [libs]: In a project, we may use many custom types, such as recording the structure of the object. It may be used in each file. We extract it into a global type or data structure, which can be used in any file. For management convenience, we define global types in one or more simple directories to manage them uniformly. What is stored here may be a defined data structure, and what is stored may be based on the data type corresponding to a certain class in the project. We write these files or directories in the libs configuration item, which is important for us to use Flow.
- [options]: Here are some configurations for the Flow project. The configuration items are in the form of key=value, and one is written per line. All configurations are found in the official documentation
- [lints]: The official website does not mention the lints-related configuration
Then, add comments at the top of the script tag content of the .js file or .vue file that requires flow for type detection
// @flow
There will be no type detection on the file without this comment
At this point, we can run npm run flow for code to type checking and get the check report.
Since type annotations are not part of our ES specification, we need to convert the code using flow into normal js code, which can be used with babel-preset-flow orbabel-plugin-transform-flow-strip-typesto remove it.
Install flow-related flow plug-ins:
babel-cli: babel-cli scaffolding
babel-preset-flow: Used to remove type declarations in the code before compilation
babel-plugin-transform-flow-strip-types Same as above, and choose one
npm install --save-dev babel-cli babel-preset-flow
After installation, add the following content to the .babelrc file in the root directory of the project (create if not)
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2",
"flow"
],
"plugins": [
//"babel-plugin-transform-flow-strip-types"
]
}
If you want to see the error of flow type checking in real time in your code, you need to install the eslint plugin
npm i eslint-plugin-flowtype-errors --save-dev
Then add the configuration in the .eslintrc file:
{
plugins: [
'flowtype-errors'
],
rules: {
"flowtype-errors/show-errors": 2
}
}
PS: When performing type declaration in vscode, an error may be reported that "type declaration can only be used in .ts files". At this time, find the setting, search, and disable it.
Reference article:Writing Components with Flow
This is the end of this article about using flow for type detection in Vue project. For more related Vue flow type detection content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!