Type checking JavaScript in VSCode without TypeScript

TypeScript offers amazing benefits, but at the cost of requiring additional compilation steps, and learning a new syntax.

Thankfully, VSCode gives you the ability to add type checking without needing to bring TypeScript into your project. Instead it utilizes something that you may already be using in your codebase — JSDoc!

First, you’ll need to add this snippet into your VSCode settings: "javascript.implicitProjectConfig.checkJs": true

Now, if you add JSDoc strings to any of your code, VSCode will use the type definitions to verify you are using the correct types, and if not display helpful error messages.

Type checking params

Here is a basic example of using a JSDoc definition for function params:

/**
 * @param {Number} a 
 * @param {Number} b 
 */
function add(a, b) {
  return a + b;
}

If we try to running the following function we will get an error message from VSCode:

add(1, '2');
// Argument of type '"2"' is not assignable to parameter of type 'number'.

Creating reusable types

One useful tool is JSDoc’s @typedef which allows you to create reusable types that can be used across your codebase. Here is a simple example:

/**
 * @typedef {Number[]} NumberArray
 */

/**
 * @param {NumberArray} list 
 */
function addList(list) {
  return list.reduce((total, num) => total + num)
}

addList('a');
// Argument of type '"a"' is not assignable to parameter of type 'number[]'.
addList([1, 'a']);
// Type 'string' is not assignable to type 'number'.

While this doesn’t give you the full power of TypeScript, it does enable you to use one of its most useful features. Check out the JSDoc documentation for more examples of type definitions.

If you have other ideas or thoughts let me know!

A blog by Bryce Dooley — a Software Engineer, Dad, Husband, and Productivity Nerd — based out of Boston, MA.