Code Quality With Flow

a. Introduction to Flow and type safety

Introduce the idea of static type checking and show how it improves the code quality and developer experience. Write an example code covered with the typings, list all primitives and explain when flow infers the types.

b. Setup with Babel & ESLint

The goal here is to show participants how to add Flow and ESLint to a new project or an existing codebase. We present different ways of using flow in the project, first as a global CLI with flow-remove-types and finally as a local dependency with types stripped from the bundle by Babel.

c. Configuring Flow

Explain basic flow configuration, .flowconfig file syntax and dive deeper into each of its sections. We’ll teach you how to ignore specific directories and the cons associated with that. At the end, we’ll show how to add typings for some libraries using `flow-typed`.

d. Incremental adoption

Adding Flowtype to existing codebases. We’ll introduce the concept of incremental adoption and show the way to gradually develop a well-typed codebase.

e. Basic type annotations

In this section we’ll cover all basic types, we’ll go through literal types, mixed and any types, maybe types, arrays, classes and tuples. After that, we’ll focus on highlighting the difference between weak and strong typings and show the different ways of typing Objects and Functions.

f. Advanced types and utilities

The advanced ways of using flow that includes using generic, union and intersection types will be presented to the audience. Every participant will gain the ability to perform a typecasting and suppress flow compiler errors with comments.

g. React specific typings

Typing Components and Higher-Order Components with flow. We’ll show how to support event handlers and reference functions. At the end, we’ll show how to type React’s children and explain the type difference between Element and Component.

‍