Types in Javascript

When we are talking about types in Javascript, we have actually two main topics:

1. Type checking: Check if an incoming value has an expected type.
2. Type declaration: Knowing which parameter type an API/Method expects.

1. Type Checking

Type checking can happen at two different times. During coding and during runtime.

For type checks during coding many tools exist. TypeScript, FlowJS, ESLint and JSHint give feedback directly in your IDE (e.g. Visual Studio Code, IntelliJ IDEA, …) or in the console when running a command. This part is covered and often discussed. Further Infos: https://code.visualstudio.com/docs/nodejs/working-with-javascript

But what happens if the type of a variable isn’t the expected one?
E.g. the response value from a server request:

The code says, “user” looks like the given interface User, but can we trust that? No. The server might respond with something totally different.

So we need to check the values during runtime and TypeScript isn’t checking that! There is a way to enable runtime type checks with FlowJS, but it’s actually easy to implement that your self in plain Javascript. This is a very important part and leads often to undiscovered bugs. So lets have a look:

Runtime Type Checking

To apply some type checks during runtime lets implement a function that throws a TypeError in case of an unexpected type value.

In our function expectType we differ between two types of values:

1. Primitive values like strings, numbers, booleans, …
2. Objects (non-primitive values)

For non-primitive types we can check if the given object is an instance of the given Constructor (sometimes a class like “User”).

E.g. the usage looks then like that:

This is just a very basic implementation, but it gives you an idea how to easily check types during runtime in Javascript.

There are some things that are not covered with this example:
- How to check if a class instance has valid properties?
- How to handle optional value that might be null or undefined
- Arrays, Dates and other in-built non-primitive values need a special checking

… to extend the expectType function to cover this issues shouldn’t be too complicated.

2. Type Declaration

The second topic is about explaining other developers how to use your provided methods and APIs. As written above, TypeScript is a very good option for that. But if you want to get rid of the compile step, ESDoc might be a good option: https://esdoc.org/

ESDoc allows you to declare types for your variables and parameters. Most modern IDEs like Visual Studio Code are recognising those declarations and give you a nice auto-completion feature while coding.

Auto-Completion and Hints in Visual Studio Code

Here is an example how code with type declarations in ESDoc can look like:

Once added to your code, your IDE should show the auto-completion and hints correctly.

If you are interested check out my YouTube channel Pain Thru Javascript:
https://www.youtube.com/channel/UC5RaUohNt4pGJ8_jj0LiKrg

❤ Thanks! I hope that helps :)