Runtyper - a tool for checking types when executing JavaScript code

Runtyper is a Babel plugin that performs type checking right during the execution of JavaScript code. It detects invalid operations, such as a strict string and number comparison, and throws a warning into the console. This allows you to find typing errors at an early stage, without requiring additional code annotations.

What exactly we find

At the moment, the types are checked in strict comparisons and arithmetic operations. That is, if one of the following situations happens in the code, then you will see a warning:

1 === "1" // Strict compare of different types: 1 (number) === "1" (string) [1, 2] + true // Numeric operation with non-numeric value: "[1,2]" (object) + true (boolean) 42 * null // Numeric operation with non-numeric value: 42 (number) * null ... 

JavaScript silently "swallows" such operations, although in most cases it is a typo, inattention or just a bug.

How it works

Under the hood, Runtyper uses data from an AST tree provided by a babel. The plugin wraps the comparison and arithmetic operators in a function that additionally checks the types of the arguments.

For example, it was:

 if (x === y) { ... } 

It became (simplified):

 if (strictEqual(x, y)) { ... } function strictEqual(a, b) { if (typeof a !== typeof b) { console.warn('Strict compare of different types: ' + (typeof a) + ' === ' + (typeof b)); } return a === b; } 

About static analysis

Type analysis at runtime does not exclude static analysis, for example using Flow . More likely complements it, finding those errors that are statically difficult to detect. For example, data arriving at user events or from external libraries for which there are no type annotations yet.

Here is an example from the documentation where static analysis does not find an error, but when executing the code, Runtyper will throw a warning:

 function square(n) { return n * n; // Numeric operation with non-numeric value: "Vasya" (string) * "Vasya" (string) } window.document.getElementById('username').addEventListener('change', function (event) { square(event.target.value); }); 

Of course, the disadvantage of checking at runtime is that the check itself only happens when a certain line of code is executed. If the string has never been executed, then there will be no verification. Therefore, the most correct thing is to include the plugin in the development assembly and in the staging, on which you run the tests.

But a definite plus is that you do not need to write annotations :) Just plug in the plugin and get error warnings in the console.

Summarize

You can effortlessly add to the project an additional type check at runtime. This will allow you to catch some more bugs before production. It works in the browser and in Node.js and does not require code annotations. Documentation and usage examples are on GitHub .