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.

Comments

[DevHyperCoder]

why would someone write JSDocs while they have TypeScript? why would you not want a build step? if it is a script issue, then you can use concurrently

[shadowtime2000]

People may not want a build step because they don't want complexity which may be unnecessary for their project but they still want to statically type it.

[Nishchal Gautam]

I was expecting a browser based compilation step, this post was disappointing