DEV Community

M. Andrew Darts
M. Andrew Darts

Posted on • Updated on

So, your friends hate Typescript. Using Typescript without using Typescript.

It's fine. You like to know what is going on in your codebase. Your friends, on the other hand, are more like cowboys. Enough trying to convince them to replace that .js with a .ts. Let's try a new approach. Let's use the power of Typescript in Javascript.

First we install Typescript.

npm i --save-dev typescript
Enter fullscreen mode Exit fullscreen mode

Now we need a config file for the Typescript compiler, luckily they give you a command to create an initial config file.

npx typescript --init
Enter fullscreen mode Exit fullscreen mode

This will by default create a .tsconfig.json
Quickly! change that filename to .jsconfig.json before any of your friends see it.

Before we start digging into the syntax for using TS in JS we need to update this .jsconfig file.

{
...
   "checkJs": true, /* Report errors in .js files. */
...
}
Enter fullscreen mode Exit fullscreen mode

We Can See The Light!

Now we can use the Typescript compiler will parse our .js files. This will give all the power of type checking. Heads up, you will not be able to use standard Typescript definitions. You will need to use specific comments, doc blocks. Here is a quick example of a function that takes in 2 strings and returns another string.

/**
 * This returns the full name.
 *
 * @param {string} first
 * @param {string} last
 * @returns string
 */
function getFullName(first, last) {
    return `${first} ${last}`;
}
Enter fullscreen mode Exit fullscreen mode

Now we have type checking! You can see below we are getting an error in our editor.

Alt Text


Cheat Sheet

Typing a single variable.

/**
 * @type string
 */
const yarn = "yarn";
Enter fullscreen mode Exit fullscreen mode

Typing an object

/**
 * @type {{ a: string }}
 */
const thing = {a: 'thing'};
Enter fullscreen mode Exit fullscreen mode

Types from a module or library

/**
 * @type {import("axios").AxiosResponse<any> }
 */
let response;
Enter fullscreen mode Exit fullscreen mode

Define an alias to be used

/**
 * @typedef {Object} User
 * @property {number} id
 * @property {string} name
 * @property {string} email
 */

/**
 * @type {User}
 */
let user;
Enter fullscreen mode Exit fullscreen mode

Toggle checking

These should be placed at the top of the file.

// @ts-check
// @ts-nocheck
Enter fullscreen mode Exit fullscreen mode

This will ignore the next line of code.

// @ts-ignore
Enter fullscreen mode Exit fullscreen mode

I found this to be extremely useful. I love Typescript but understand devs who don't want to go all in. I feel this is a good middle ground to get started with little overhead. This also enforces documenting your code. The fact that you have to use doc blocks for this could be the extra push you and your team needs to add descriptions for further documentation.

Here is the Typescript docs on this topic https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html

Thanks for the read!

Top comments (7)

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • Edited

Thanks. This might come in handy when I want to run node ./script.js, but I want to skip the compilation step for TypeScript, nor do I want to rely on ts-node.

For example, when I want to create a CLI script ("bin" field in package.json).

Furthermore, as I use Node 10, I cannot use import as well, only require, but this shouldn't be a problem, is it?

Collapse
 
mandrewdarts profile image
M. Andrew Darts • Edited

Definitely, that would be a good use case!

Using require shouldn't be a problem.

I love using this approach when I want to avoid a build step altogether.

I really appreciate you taking the time to check this out.

Collapse
 
michaeljota profile image
Michael De Abreu

Great article. BTW, jsconfig.json files are just tsconfig.json files with checkJs: true by default, so there is no need for that. :P.

Collapse
 
mandrewdarts profile image
M. Andrew Darts

Didn't know that, Pro tip!
Thanks 🤘

Collapse
 
hersman profile image
Hersh

Good article. I noticed a small grammatical error. "Now we can use the Typescript compiler will parse our .js files." should be "Now we can use the Typescript compiler to parse our .js files.".

Collapse
 
mandrewdarts profile image
M. Andrew Darts

Thanks! Updating now 🤘

Collapse
 
vovchisko profile image
Vladimir Ishenko

Meanwhile in real world JSDoc only missing mapped types. And for good, I guess ;)