Skip to main content

Command Palette

Search for a command to run...

Typescript... or jsdocs ?

Updated
2 min read
Typescript... or jsdocs ?
T

A Web Developer based in Belgium, specialized in PHP & JS development

Each time I see an article (like this one) about typescript, they never quite seem to mention jsdocs. Therefore, it always feels like an unfair, one-sided comparison. Let's dive in some of the typical examples.

Type safety

This is probably the biggest argument... And while it's nice and convenient to be able to declare types directly, you can do something quite similar with jsdocs.

function add(a: number, b: number): number {
  return a + b;
}
/**
 * Add some numbers
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
function add(a, b){
  return a + b;
}

You might argue this adds quite a bit of boilerplate, but in most cases (something other than adding a and b) you would probably end up adding a docblock anyway to document the function usage, what the parameters actually do (not just their type...)... And best of all, with jsdocs, you could generate documentation from all this.

Detect errors

When jsdocs is used, you can detect errors statically in just about the same way. Just create your jsconfig.json.

{
  "compilerOptions": {
    "checkJs": true,
    "maxNodeModuleJsDepth": 1
  },
  "input": ["src"]
}

No need for typescript here...

Interfaces ?

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Bob",
  age: 30
};

Is this really better than

/**
 * @typedef {Object} Person
 * @property {String} name
 * @property {Number} age
 */

/** @type {Person} */
const person= { name: 'Bob', age: 30 };

And again... what if you need to document some other things along the way ?

Conclusion

This is not to say that Typescript is bad. I'm sure it can help teams producing quality code. For my part, I don't like leaving up to some bundler to convert my code to something I don't control. I enjoy running native js code on the browser with no conversion whatsoever.

In any case, please stop saying that there is no way to type data in js without using typescript :-)

N

While I wholeheartedly agree with you on Tailwind vs modern CSS, this is different case.

All the functionality you are using via JSDocs is enabled and implemented by TypeScript compiler (probably the one built-in into Visual Studio Code?). Using JSDocs gives you only the advantage that you don't have to transpile source files.

But, since you are already using ESBuild for minification and source-maps, you could have used TypeScript syntax, instead of JSDocs as well. Also, your jsconfig.json is derivate of tsconfig.json.

There is a nice post from Rob Eisenberg how to integrate full TypeScript compiler with ESBuild: "An ESBuild Setup for TypeScript"

Also, if you follow trends, NodeJS can now execute TypeScript files out of the box. For example: node --experimental-strip-types build/copy-files.mts. Even ESBuild can handle "simple" TypeScript files without a full TypeScript compiler.

But the point you are right about - mapping types, npm packages, etc... can become quite complicated. Specially because NMP/Node support multiple standard and non-standard JavaScript module types.

So, unlike Tailwind, TypeScript has usefull functionality that does not exist in native JavaScript. And it seems that all the industry is converging on idea that some kind of type notation should exist in JavaScript natively.

1
T

While I might just as well use Typescript since I have all the tooling in place, it would bring very little benefits over using a couple of jsdocs tags (for me, and for my use cases, anyway.. i can very well understand in larger projects or with a team that typescript makes more sense). Using typescript also forces you to follow updates or potential breaking changes... one less thing to worry about for me :-) But maybe some day I will see a decisive benefit and decide to switch, who knows :-D

N

Thomas Portelange That's fine. I am not trying to persue you to change coding style that makes you more productive. And you, clearly, do the coding well.

I'm pointing out that both Typescript and JSDoc types are powered by the same TypeScript Language Service in your code editor. Which means that even when using JavaScript with JSDoc types, you are actually using TypeScript engine under the hood. Only in a "light" mode that suits your preferences.

1
T

Nenad Vićentić ;-) I might give it a test run and see how it goes in one of my project, i'm really curious to see if that would make me "more productive" but I'm not really sure that will be the case

1
P

I have the same philosophy when it comes to bundlers and transpilers.

With the browsers developer tools being so awesome a debugging (and prototyping) environment, I feel having a 1:1 with what I write and the devtools is very strong. I know source maps can mitigate some of this, but for me it's more of a hassle than a benefit.

Anyway, great write up! I have linked to this post in my own recent post (shameless plug incoming) about documenting a callback: https://blog.birk-jensen.dk/documenting-a-callback-function-in-jsdoc.

1