How a type system improves your JavaScript code

So you do not have time to turn around, and the month is already striving for its completion. Few days remain until the launch of a new stream at the JavaScript Developer course. By tradition, before launching the course, we are sharing with you a translation of useful material.

Vanilla JavaScript is not typed by nature. You can even call it "smart", because it is able to figure out what is a number and what is a string.

This makes it easy to run javascript code in the browser or when running Node.js. However, it is vulnerable to numerous runtime errors that can spoil your user experience.
')


If what happened next has ever happened to you, you will only win if you use the type system.

• After receiving a list of data, you discover that a specific field does not exist in one of the records. This causes the application to crash if this case is not caught and not handled explicitly.
• The instance of the class you imported does not have the method you are trying to call.
• Your IDE does not know which methods and properties are available for modules and libraries, so it cannot effectively offer auto-completion.

Flow, TypeScript or ReasonML

Let's say you have an existing code base that you want to make more reliable and stable. Taking into account existing typing errors, you can try to use Flow or TypeScript for this (they have quite a similar syntax).

On the other hand, the use of each of these bulky tools is difficult. You upload yourself with work related to creating types and interfaces for code that were not previously developed.

Nevertheless, Flow and TypeScript do not provide 100% security when adding typing in the code.
For this reason, ideal typing security is achieved through inference and makes annotation variables and function signatures simpler.

Simple and clearly contrived examples

Consider the following code:

let add = (a, b) => a + b; 

In normal JavaScript, these arguments can be numbers or strings. In TypeScript or Flow, these arguments can be annotated as:

 let add = (a: number, b: number) => a + b 

Now we apparently set exactly two int values. Not two float or two strings, other operators are used for their addition operations.

And now let's take a look at a slightly modified example in Reason:

 let add = (a: string, b: number) => a + b add('some string', 5) // outputs: "some string5" 

This feature works! And this may seem surprising. How does Reason understand this?

 let add = (a, b) => a + b; add("some string", 5); /* This has type: string but somewhere wanted: int */ 

This feature had implementation flaws. Reason has different operators for adding int, float, and string.

The purpose of this simple example is to show that it is entirely possible to have extra “errors” of types, even if it does not drop the application.

In the Reason program, developers do not have to deal with production bugs, which are caused by incompatible types or null values.

Developer Experience

One of the most enjoyable features in TypeScript is that you see suggestions for improvement or auto-completion in the code editor.

This is one of the areas where TypeScript has an advantage over Reason, since a TypeScript program does not have to be compiled perfectly to offer autocomplete. Reason will force you to correct all errors in syntax and types, before offering you a useful fix.

This is how it works in VSCode, but I know a lot of Reason developers who use vim. Here we will not delve into the comparison.

Despite the fact that I am a big fan of Reason, I also wrote applications on TypeScript or Flow. The HYIP wave around TypeScript gives a good incentive to select it, because of this, it has a lot of support from the community.

On the other hand, Reason is harder to use because fewer articles and documentation are available for it. I hope this will improve with its development.

If Reason interests you, you can find its documentation here . Subscribe to such personalities as @jordwalke , @jaredforsyth and @sgrove on Twitter. They can tell a lot about the Reason / OCaml ecosystem.

If you want to know how Reason works with GraphQL, refer to my other article “Reason with GraphQL, the Future of Type-Safe Web Applications” .

We are waiting for feedback on the material and according to the established tradition we invite all readers to the open day , which our teacher, Alexander Korzhikov , will hold on March 25.