Understanding Flow static type checking

1. Why do you need to introduce type checking?

　　As a weakly typed language, JS has a well-known black point that it is easy to write very hidden and hidden code, which does not seem to report errors at compile time or even runtime, but all kinds of strange and difficult things may happen. Fixed bug. Type checking is the current development trend of dynamically typed languages. TypeScript, a strongly typed superset of JS, has gained considerable popularity, attracting a large number of developers' interest in learning, and most developers plan to continue to understand or use it.

　　The so-called type checking is to find bugs (caused by type errors) as early as possible during compilation, without affecting the code running (no need to dynamically check the type at runtime), so that writing js has a similar experience to writing strongly typed languages ​​such as Java. it can:

　　1. Make large projects maintainable

　　2. Increase the readability of the code

　　3. There is usually better IDE support

2. What is Flow?

　　Flow is a JavaScript static type checking tool produced by Facebook. Unlike Typescript, it can be partially introduced without completely refactoring the entire project, so for a project of a certain scale, the migration cost is smaller, Also more feasible. In addition, Flow can provide real-time incremental feedback, improving operational efficiency by running the Flow server without having to run type checks from scratch every time a project is changed.

　　Both Flow and Typescript are excellent solutions for adding type checking to Javascript. A simple comparison of the two is as follows:

　　The two have a lot of similarities in code syntax, except for the support of some data types, please refer to the Flow documentation for details. The comparison between Flow and Typescript can be briefly summarized as follows: For new projects, you can consider using TypeScript or Flow, and for projects of a certain scale, it is recommended to use Flow for gradual migration at a small cost to introduce type checking.

3. The role of Flow

　　A simple demo is as follows.

　　Run the Flow command flow, and the result of this demo is shown in the following figure:

　　For js files that need to use Flow for type checking, add the @Flow annotation at the beginning to introduce Flow. As you can see from the demo, Flow can help find errors caused by unreasonable type operations, including operator operations, function parameter types, and return value types. Flow also supports type language-related operations such as custom type declarations, generic declarations, etc.

　　/* @flow */It is important to add this comment to the file to tell Flow that the file needs to be type checked.

4. What are the benefits of type checking tools for teams?

　　By introducing Flow into a real business project of a Vue stack, we roughly get these benefits:

1. Almost eliminated bugs caused by function data types
2. No additional comments about variables, parameters, and return types are required, allowing the reader to understand the necessary additional information
3. Significantly reduce type errors caused by improper use of third-party libraries
4. Can be integrated in CI system
5. The toolchain configuration cost is relatively low, and only a small amount of work is required to achieve these effects

　　Questions readers may need to consider about type checking tools are answered in the table below.