Typing system in TypeScript and Flow

So far, I’ve been used Flow as a static type checker for frontend application which is constructed with React. I believe using Flow lets the application be very safe, I mean Flow could reduce bugs what I unexpected. And personally, I created swagger-to-flowtype CLI to export type aliases for Flow from type definitions on swagger file. I think I was a totally heavy user of Flow.

Even so, as a developer, I think I should try to use TypeScript since it appears frequently on my feed. As a result, I could know a difference between TypeScript and Flow.

What is TypeScript

Before talking about typing system, I would like to note what I investigated about TypeScript as it is.

As you know, TypeScript is a typed superset of JavaScript which is developed and maintained by Microsoft. It is aligned with ECMAScript proposals, so developers who are familiar with ECMAScript can start TypeScript smoothly. In my case, just writing TypeScript was so comfortable, I could start to write small codes without reading the documentation.

And as there are many editors which are supporting TypeScript strongly, you can write TypeScript in your favorite editors such as VSCode, vim, emacs and so on.

It would be better to talk about DefinitelyType. DefinitelyType lets TypeScript integrate with npm world easily, it holds type definitions for more than 4000 npm packages so far. I realized that the ecosystem around TypeScript is growing quickly.

Who is using

As far as I know, many companies have been starting to use TypeScript instead of using JavaScript as it is. In Google, TypeScript is an official language and several libraries are already written in TypeScript. Of course, Microsoft is a leading company which is using TypeScript. In Slack, they are also using TypeScript for their Electron app. You can see how they are porting Slack Desktop’s Codebase to TypeScript in this article. I guess Electron app is one of biggest place where TypeScript is used. An engineer in Lyft posted an article titled “TypeScript at Lyft” to introduce how they are using TypeScript as well.

By the way, who is using Flow?

Sorry, I don’t know companies which are using Flow in production except for Facebook and my company. Please let me know if you know companies or projects which are using Flow. I am wondering why I could not find out articles introduce a usage Flow despite the ecosystem of it is so huge.

Brief comparison with Flow

Here is a table what I briefly investigated a difference between TypeScript and Flow.

As you can see, TypeScript is getting a popularity on GitHub and Stack Overflow rather than Flow. In fact, TypeScript community is moving forward so quickly, they have released a new version at least once a month. There is a noticeable difference of a number of questions in Stack Overflow.

What I learned much from this investigation is a typing system difference between TypeScript and Flow. TypeScript is based on Structural typing system, on another hand, Flow is based on mix typing system which contains Nominal typing and Structural typing.

What’s nominal type system

Checking types against name

Nominal type system requires explicit declarations to determine two variables are equal to typing. So a case that both structures are same but names are different should be determined as not equal.

Let’s say, here are two classes each contains the same method do.

class Foo { do() {/* DO!! */} }
class Bar { do() {/* DO!! */} }
const foo: Foo = new Bar(); // ERROR!!

If you assign Bar instance to foo value which is typed as Foo, you will see an error from type system since Bar is not Foo from naming perspective.

OOP languages such as C++ and Java tend to use Nominal type system since there’s a demand that distinguishes two values even if both contain same structure.

What’s structural type system

Checking types against structure

In structural type system, the example code should work since the structure is same, it means both classes contain do method.

class Foo { do() {/* DO!! */} }
class Bar { do() {/* DO!! */} }
const foo: Foo = new Bar(); // WORK!!

FP languages such as Haskell, Elm and OCaml tend to use Structural type system.

A typing system difference between TS and Flow

As documented, Flow is based on Mix typing ( nominal and structural ). This decision came from current JavaScript usage. Presently JavaScript language tends to be used as both OOP ( Using Class syntax ) and FP ( Function is the first citizen ), so then Flow team decided mixing type should be helpful for typing JavaScript.

Technically, When comparing functions and objects, Flow uses structural typing. When comparing Classes, Flow uses nominal typing.

TypeScript is based on structural typing. This decision also came from considering current JavaScript usage but TypeScript team thought just structural typing is suitable since there are many libraries which are using function expressions and object literal, these expressions can be represented naturally by using structural typing instead of nominal one.

Conclusion

Basically, As TypeScript is a language and Flow is a static type checker, these should have a difference. Even so, typing system difference is interesting for me and it is important to know how these work deeply. I am not sure if there is a case that I want to distinguish same structural classes by referring the name of these such as nominal typing in practice. So I may need to dive into more complicated use cases to know a practical usage of nominal typing.