Type checking JavaScript in Visual Studio Code

I've recently been working through TypeScript in 50 Lessons, a book from Smashing Magazine that my friend Charles Roper recommended. One of the first things it teaches you is that you can enable type checking in JavaScript without actually using the TypeScript compiler, which is just awesome!

Enable type checking

You can enable type checking in individual JavaScript files by adding the // @ts-check comment as the first line of the file. You can enable it in all JavaScript files by adding "js/ts.implicitProjectConfig.checkJs": true to your user settings.

For more information, see Type checking JavaScript in the VS Code docs.

Catch errors

Let's take a look at the following code snippet. There are two problems with it:

const myName = 'Kieran';

// Uncaught TypeError: Assignment to constant variable.
myName = 'George';

/**
 * Return the sum of two numbers
 * @param {number} num1 The first number
 * @param {number} num2 The second number
 * @returns {number} The sum of the two numbers
 */
function sum(num1, num2) {
  return num1 + num2;
}

// This will return the string '12', not the number 3.
sum(1, '2');

The first problem is that we've tried to reassign a constant variable.

The second problem isn't technically an error—it's called type coercion, and it's a feature of JavaScript—but it's probably not what we want. We expect two numbers to be passed in, but we might miss that we've accidentally passed in a string.

With type checking enabled, Visual Studio Code will bring these problems to our attention:

A screenshot showing that the problems are underlined with squiggly red lines in VS Code. — Like a word processor, VS Code underlines the problems with squiggly red lines.

Hovering over the errors, we can see that VS Code tells us exactly what's wrong:

A screenshot showing that VS Code says "Cannot assign to 'myName' because it is a constant". — VS Code warns us that we can't reassign a constant variable.

A screenshot showing that VS Code says "Argument of type 'string' is not assignable to parameter of type 'number'". — VS Code warns us that we can't use a string where a number is expected.

You have to document your function using JSDoc to get the second example to work. For more information, see TypeScript without TypeScript -- JSDoc superpowers by Stefan Baumgartner (the author of TypeScript in 50 Lessons).

I'm always relucant to add more build tools to my process—I love the simplicity of being able to open a text editor and a browser and just start working—but this is a nice intro to TypeScript because it requires virtually no effort.

I'll be using this in all my vanilla JS projects from now on! 🙌