Typescript Without Compilation

Hi, in this post I will show how to use Typescript with static typings without needing a build step. I have also implemented this in my project SwordCSS.

Installation

We still need to install and configure Typescript though.

$ npm install -D typescript

tsconfig.json:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "CommonJS",
    "target": "ESNext",
    "sourceMap": false,
    "declaration": false,
    "checkJs": true,
    "allowJs": true
  }
}

You can change the options however you want, but make sure the last four compilerOptions are the same.

JSDoc

Now, let me give you an introduction to JSDoc. JSDoc is a format for commenting on and annotating Javascript code. Here is how you would use it with Typescript:

//@ts-check
/*
 * @function
 * @param {string} param1
 * @param {number} param2
*/
function doingSomething(param1, param2) {
	doSomething(param1, param2)
}

Or at least that is how you would use it with functions. There are some other things you can do, and you can look at what is supported with JSDoc + Typescript.

IMPORTANT You must have //@ts-check at the top of your file for it to be type checked.

shadowtime2000

If you are looking at this you probably wonder who I am; teenage open source maintainer