Let's start with their similarities. Both Flow and Typescript introduce a powerful and in my opinion needed feature - a type system . Type systems can make the code a lot more easier to maintain, more readable and easier to analyse. Not to mention that refactoring code can be more reliable, because errors can be caught early.
Typescript is developed by Microsoft and found by Anders Hejlsbeg. It's based on ES6 and ES7. Typescript adds optional type annotations and decorators and compiles the code - checks and removes the annotations and outputs the generated JavaScript code.
Flow is developed and maintained by Facebook. The idea of Flow is to be a static type checker, designed to quickly find errors in JavaScript applications. Nothing more, nothing less. It's not a compiler, but a checker. It can work without any type annotations and it's very good at inferring types.
Typescript does not catch non-nullable type errors. For example:
function bar(num: number) {
if (num < 50) {
return 'great';
}
}
// works
const result: string = bar(25);
console.log(bar(13).toString());
// still compiles
console.log(bar(56).toString());
The later console.log will throw an error at runtime "Cannot read property 'toString' of undefined", because Typescript will not catch this. On the other hand, Flow will more than gladly throw an error - // error: call of method 'toString'.
// Method cannot be called on possibly null value.
This is because Flow does not infer string as the return type and the inferred type is something else.
The take away is that types are nullable in Typescript (as of version 1.8) and non-nullable in Flow (although nullable types are also possible in Flow).
Non-nullable types are coming to Typescript too in version 2 - Non-nullable types.
As mentioned above, Flow is way more better at type inference (type checking for free) than Typescript. The following code is compiled by Typescript and in runtime ends up being NaN, while Flow will catch the bug with no annotations required:
function multiply(x) {
return x * 5;
}
const result = multiply('bar');
Flow will throw the following error:
src/index.js:7
7: const result = multiply("bar");
^^^^^^^^^^^^^ function call
4: return x * 5;
^ string. This type is incompatible with
4: return x * 5;
^^^^^ number
Typescript is a superset of JavaScript and adds several language features:
All of these are all very powerful features, that JavaScript currently lacks. Flow on the other hand, don't support these features out of the box.
In Flow null is a distinct value and has it's own type, but in Typescript, null is a subtype of all types. Flow is also a bit stricter and does not consider primitive types to be subtypes of Object:
const bar: Object = 1 // OK in Typescript
const bar: Object = 1 // Error in Flow - number is incompatible with object type
Although different by design, both Flow and Typescript serve the same purpose - to help developers build large JavaScript applications with confidence and be able to sleep at night.
Xananax