/

How to Check Types in JavaScript without Using TypeScript

How to Check Types in JavaScript without Using TypeScript

tags: [“JavaScript”, “TypeScript”, “type checking”, “VS Code”, “JSDoc”]

If you’re familiar with TypeScript, you know that it’s a language introduced by Microsoft that adds types to JavaScript. While TypeScript can be beneficial, especially for larger projects, it may not always be the best choice for beginners or for those who prefer to stick to the fundamentals of the Web Platform. However, there are times when having types in JavaScript can be helpful.

Fortunately, there is a way to add types to JavaScript without using TypeScript, and it involves using VS Code. In this tutorial, we’ll explore how you can check types in JavaScript code with the help of VS Code.

To get started, you’ll need to have TypeScript installed on your machine. If you haven’t already installed it, you can do so by running the following command in your terminal:

1
npm install -g typescript

Once you have TypeScript installed, you’ll need to add a tsconfig.json file to the root of your project. Assuming you have your JavaScript files in a src folder, the minimum configuration you need in the tsconfig.json file is as follows:

1
2
3
4
5
6
7
8
9
10
{
 "compilerOptions": {
 "outFile": "../../built/local/tsc.js",
 "checkJs": true,
 "allowJs": true
 },
 "include": [
 "src/*"
 ]
}

In this configuration, we enable the checkJs and allowJs options to allow type checking in JavaScript files. You can also exclude specific folders from the type checking process by adding the exclude option in the tsconfig.json file. For example, you can exclude the node_modules folder like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
{
 "compilerOptions": {
 "outFile": "../../built/local/tsc.js",
 "checkJs": true,
 "allowJs": true
 },
 "include": [
 "src/*"
 ],
 "exclude": [
 "node_modules"
 ]
}

With this setup, VS Code will now be able to point out type errors in your JavaScript code, automatically and without any additional configuration.

For example, let’s say you have a function called multiply that takes a number and multiplies it by a given value. You can define a default value for the second parameter using ES6 syntax:

1
2
3
const multiply = (aNumber, times = 2) => {
 return aNumber * times;
}

With this default value, you can call the multiply function with just one argument:

1
multiply(20);

or you can pass two arguments to multiply the number by a different value:

1
multiply(20, 10);

However, if you try to pass a string as the second argument, for example, multiply(20, 'hey'), VS Code will notify you of the type error:

Argument of type ‘“hey”’ is not assignable to parameter of type ‘number’

In addition to checking types for parameters with default values, you can also use JSDoc comments to add type hints for parameters without default values. JSDoc is a documentation generator that can also be used to provide type information in JavaScript.

Here’s an example of how you can use JSDoc comments to specify the type of a parameter:

1
2
3
4
5
6
/**
 * @param {number} aNumber
 */
const multiply = (aNumber, times = 2) => {
 return aNumber * times;
}

If you try to call this function with a string as the argument, such as multiply('ho!'), VS Code will again alert you to the type error:

Argument of type ‘“ho!”’ is not assignable to parameter of type ‘number’

In addition to number, you can specify other types with JSDoc comments, such as null, undefined, boolean, string, Array, and Object. Here’s an example:

1
2
3
4
5
6
7
8
9
10
11
/**
 * @param {null} aNull
 * @param {undefined} anUndefined
 * @param {boolean} aBoolean
 * @param {string} aString
 * @param {Array} anArray
 * @param {Object} anObject
 */
const multiply = (aNull, anUndefined, aBoolean, aString, anArray, anObject) => {
 console.log(aNull, anUndefined, aBoolean, aString, anArray, anObject);
}

While adding annotations in comments may not be as ideal as having the code itself provide type information, this approach can still be useful. If you prefer a more comprehensive type checking solution, TypeScript remains a powerful option.