@bookercodes

@bookercodes

@bookercodes

Flow is A STATIC TYPE CHECKER FOR JAVASCRIPT

@bookercodes

Flow is A STATIC TYPE CHECKER FOR JAVASCRIPT

Flow is A Javascript productivity tool

@bookercodes



function area (r) {
  return Math.PI * r * r
}
const result = area("1O")
// @flow
                  ❌ ^^^^ This type is incompatible with number.

@bookercodes



function length (value) {
  return value.length


}
const result = length(null)
// @flow

@bookercodes

^^^^^^ property cannot be accessed on potentially null value 


function length (value) {
  if (value != null) {
     return value.length
  }
  return 0
}
const result = length(null)
// @flow

@bookercodes

Contrived examples?



function length (value) {
  if (value != null) {
     return value.length
  }
  return 0
}
module.exports = length
// @flow

@bookercodes



function length (value: string): number {
  if (value != null) {
     return value.length
  }
  return 0
}
module.exports = length
// @flow

@bookercodes

Benefits of Flow type annotations

  • Autocompletion
  • Makes code more readable (self-documenting)
  • Generate documentation
  • Code is more likely to work if it compiles, making you more productive

@bookercodes

Third-party modules (like express)?

@bookercodes

const num: number = 10

@bookercodes

const num = 10

Thank you

@bookercodes

Introduction to Flow

By Alex Booker

Introduction to Flow

  • 2,225