Get types by Writing Hybrid JavaScript

introduction

We all know the frustration caused by not having typed JavaScript, it's also one of the main reasons why people tend to switch to typescript to gain access to live code error prediction and of course types.

The problem with typescript is that you have to compile your code, add a tsconfig.json file, fix non typed modules, and integrate a lot of code to your JavaScript to make the compiler happy.

But wait, there is a solution!

JsDoc

To start gaining access to types without typescript, you have to use jsdoc

JsDoc is originally built to allow you to document your JavaScript code using comments, but you can use it to type your code.

JsDoc syntax

You start a JsDoc comment with /**, each new line starts with * and it ends with */

/**
 * 
 * 
 * 
 */

// OR

/** */

If you are in vscode it will automatically detect that you are writing a JsDoc comment and add * to each new line.

JsDoc Tags

JsDoc uses tags to type your code, we will focus on two of them but feel free to check on the 65 others in JsDoc Docs.

A tag contains a @, the tag name, and the arguments.

To type a function parameter, use the @param tag followed by a TypeScript type in brackets and the name of the parameter:

/**
 *
 * @param {string} name
 */
function say_hello(name){
    console.log("hello" + name);
}

And 🎉 you get autocompletion and types:

You can also use it with complex types, for example in a discord bot:

import Discord from "discord.js";

/**
 *
 * @param {Discord.Client<boolean>} client
 * @param {Discord.Message} message
 */
async function ban (client, message) {

}

To type a variable, use the @type tag:

/** @type {string} */
let name;

Custom types

You can also use custom types using typescript interfaces:

/** @type {{
 *  name: "string";
 *  age: number;
 *  interests: {
 *     [key: string]: number;
 *  }
 * }} */
let user;

using declaration files

Writing types like this works great, but you will soon realize that there is a lot of repetition when you are using the same custom type and that your code is cluttered.

The solution is to use TypeScript declaration files.

Just create a file in your project ending in .d.ts and declare your types in it using typescript types

// types.d.ts
declare type User = {
  name: string;
  age: number;
  interests: {
    [key: string]: number;
  };
};

Once that's done, you will be able to reference the User type directly:

/** @type {User} */
let user;

Comments

[Jon Randy 🎖️]

We all know the frustration caused by not having typed JavaScript

I don't know it, and have never known it. Maybe you should just accept the way JS works and work with it instead of fighting against it? It's just a different way of doing things - a different mindset - with it's own pros and cons... just like strongly typed languages have their own pros and cons. The place the JS ecosystem has gotten to because of the fact that so many people just want a crutch for their desire to use a typed language is just ludicrous.... so much overhead and tooling. Things used to be way simpler

[rafalou38]

For me, doing a big project without type is like trying to go home in the complete darkness with just a city map: You hit every wall (error) and you always have to look at the docs to find the function you are looking for when you could just let the type tell you what are its functions, and it's arguments. Even better, in some well JsDoc documented libraries you get a description of the function, an example, a deprecated warning and much more info directly in your editor.
To get the same info you would have needed to go search the docs leaving your code.

[Jon Randy 🎖️]

You can have intellisense without types or TypeScript

[rafalou38]

Yes and that's pretty handy but when you try to split your code in a function your loose those types and your parameters become any and your frustrated because the types you had before are lost and you are back in the darkness.

You are not using your editor at its full potential.

[Jon Randy 🎖️]

Each to their own I guess - I've been writing JS for 18+ years and never had an issue with the lack of strict types. As I said - it's just a mindset. I actually find development with straight JS much faster, and it's flexibility allows for more creative solutions

[Maciek Grzybek]

Interesting approach, although it feels a little bit too hacky. But whatever works for you :)
P.S. Will VS Code complain when you pass wrong type of argument?

[rafalou38]

Will VS Code complain when you pass wrong type of argument?

Not at all it is just a comment as opposed to typescript if the syntax or the type is wrong it will just be ignored and fallback to the type any