JSDoc in TS and JS
Tags: typescript, javascript, webdev, discuss
Published: 2023-09-18 01:08:37

Two days ago, I wrote a post about JSDoc.
The post was about using JSDoc for type checking, and it received over 60 comments, including my own replies.
{% embed https://dev.to/artxe2/throw-away-the-script-from-typescript-mn5 %}
Some of the comments were critical of JSDoc's type checking capabilities, while others defended JSDoc's ability to provide complete type checking.
I was curious about the repetition of the same question and answer, and I realized that we were talking about different JSDoc.

![TS JSDoc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69e3phr5oasxsxevxk0k.gif)

In TypeScript, JSDoc is a pure comment.
Although it provides some information when we hover over the code, it does not support type checking at all.
But it's different in JavaScript.

![JS JSDoc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd6k1mu1dduq6tkk4mec.gif)

By adding a few settings to `tsconfig.json`, TypeScript can read JSDoc in JavaScript and support the same level of type checking as TypeScript.
This is in stark contrast to the incompetent JSDoc of TypeScript.
Also, even in cases where JSDoc is written but not used with TypeScript, such as in an eslint project, JSDoc is simply a comment.
I agree to some extent that JSDoc can be aesthetically horrible, and it is hard to argue against that.
However, I hope that the misunderstanding that JSDoc does not support adequate type checking will be cleared up, and I will leave an example below of how TypeScript and JSDoc can be used to perform the same type checking.

Thank you.

[TypeScript DeepReadonly](https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgArQM4HsTIN4BQyyMwUGYAcnALYQBcyFUoA5gNxHIA2cF1dRszadicVg2QgArjQBG0UcgQALYNwAmUCCAD8jdORwBtALqcAvgQKhIsRCgBitdQE98XAA5xt4DAcwTcy5WKDgQDW9fMAx9D2JibzsQOG4AoxAzJWIaOGTU9OxM4OILS2sEHAoSF25XRmcaN2QAXnjkKJ0YxmMuYjwSMn5aSQAiACksFRBRgBoePioRxlGAESwIOeRxSQAWAAZkC1m+-EHyJcFkCfDN+d5hq7WNrZ3GAGYADiOT4lNf5ChcKRHxdfztRJ5aApNLIXoJBIDUgXARjVBQqAwgDiYQi8DAKmgWwelzG6zu2wkjAA7Idjqd+udHmiMdjcRoaFgCUT7otUStya8qcgAGzfekI-6nXL5WHwhFnZHMlYAWVZqRxwPxhKgxL5y2uAGUmgShZJqQBWH4MxVDUmq9XcTURTnc3W85VGk0qM00gBM1slAKsZWsYFcnhQqwgEE8ACUIHANDg6gAeAAqAD5WsgE0mU65U4RiMYANLIUDIADWEFcWBgyHTpkYpwA9K3kABJDAVsDbDosE3AABuEF0jcJuFyNd7yG0+ZAdVO6bLpmQEAAHpAIj2ABQyeTQZAAHyYYBYIFYJ6YrnkWG4AEpkOO88nF4WV6XTNm2x3u7Pwm2KAwncetewgGhYgnHRkGnFBuSAkC50TN86m2CJkAQ4BIBobYewAdwgbhuFORhPzXTdtw0HsAEFgLgQtQBgI8aOzF8UILVM6JA1No1jV9ONYzMfwRdsuz7YAe2wOhkC5HVZLkAArCAEDAeY4NnedUPcPhkEI4jSOQPj4w498M1XTNLEzCoqj7eAmjqP1GGMgSzMaNxszaYsOlBPwelOJE7X5a5JmmPVPWeCk3mQA5A0RJl7RC25wsSyLfWQL44qlYggQiTo-IhHzZX8hVbRRA1RnRWVnQ0bUeQWCLBXmaLaTihFAvKp4quhDV2VdHUUuCtLmuFMU2uQbKEhlHq5RtDqIrVar2Tq90GtS41sJ9EbzStCUFXm1LFpmmr+vqkkho201tv9cbJpDTgCHstwADp8piHMsmQMSsCrR7alcP1Xt8962k+sToCgLAoGsJ66iB6IMGMfZTGenYcwARnYL6Ox+v6HIB+GwSRlG0baTHsfXYCoesb7fth1xCb8V7pAwFRd286KDgBJVEoAckmDBYxUXmAXOg1efJXmCAsB8HvBqnofpwG3owZnWfZrhOf2bmgvFgWhZFrgxauCWNilmWHsqEBqnp95nJjEyFzTdy6k8mp8fYIA)

[JSDoc DeepReadonly](https://www.typescriptlang.org/play?filetype=js#code/PQKhCgAIUgBAXAngBwKYBNUDNIAVUBOAzgPYB2UMsyBJaBSkA3kfAQJZkDmAvpFu2LwAcgEMAtqkpwadQoxZtOvSABtRrMZOnVa9BWQCu4gEaE+orlOgy98xM3zFyAbQC6fFwGMAFu1XoBKhkbpTA4OCgEDYIKBjYkABiEv6IOrL6DkxOpGTufMiiQWTwROl2DFlM0pCQhfCEZKKqAFx4hLnuNZDiog0ETa3tznmhNjx8XASiZOiFxaVhEVFwSGjMyeKpfCDhXuSs-CmqDgC8zFB1RcGlbS6XtUz8gpoSqG0ARABSJD5kHwAaNQaERvT4AERIqEBkEs70gABYAAyQHgAh7MZ5CLTw74zaFA9SvSQQqEwuFtADMAA5Uejam56ZApjM5tcSkQ2tVarV6o1mncMY8scTcbg+vzVABxaazLB9HyEGFE0EkyAfSEE2FWNoAdhRaKFmIE2LB6vF-UGMtZ4hI8EVBGVIJxpK1FMgADZaYaeZBGRjepaBZB7r7hSbRZ8ALISgbNa1yhVKwnOs0fADKW3t5J1kF1AFY6UanhHVbiY0HpbL0Lb7cngZH1Zn2Nmge7dQAmIu+-21HjgHgAbmWYB0DXEyHUDUgABUx3FMDgmAAlVCidDkE4AHm5MFqLgA0pBOJAANaoRAkHAztxtbq1GeHtyQVAADwasyIkAAFEZTIRIAAH0gVgOG4ICQMQUwSFUABKe8eQAfkgVd103RAt0fA83AAPkgBDajaLDnzfD90C-ABBAhpgwzgsAAiicIIpCULXDcyG3KiaK3cFUFQZBUPYzicJE-CbDDHk2l4-jBPQzCnyY8YcL4aSBLY9ClkiMBVjiZhVNkjiMM2VJlOgPYDngI4thOLtzm5K4Fk5EMMRLF4y0+H4-idRsNTJNtc2RbseVc001TxMgtRVF11U1HN4RpILe2Zat5huJz7N5WNBkFCSQp8i1JQTdB5TrR0Ux82L-PhfUgt9PL3PNLL42rWsHW8hrfLdXMvVqv0mVqQNJRysN6uij4K0K6sSra8qOubVttWqwsfRGkUOomuMqxtO0ZobOasx8OK9S7FaGSZfshwieVrMQAA6VKOUgc53EHSBgGASASFPcBrtSDt7vZUonpDNxXvel9qJIAgruOO6HtKFwkTcW64WBgBGMGPq+n7Yf++GiER5HUfODG3o+whaGhyIse+36TgBxz7sMIgfG-ez3WRJlS2igByH4iH4nweaZKKzR5zUeYHWDh2piHKZxm68cBogmZZtnLg5pEubc3n+cF4XLlFtVxahSWeGlkcqDWVA9L4tS0MMrdjJOUzdnAfYyEOOnEEpYHvcHIA)

[JSDoc function overloads](https://www.typescriptlang.org/play?filetype=js#code/PQKhCgAIUgBB7AbgUwE4Bt4EMAmUawAOWqWAtpAN4B2ArmQEZoC+kALgJZnIDOb5hfHFTI2tVNR5UAIljbJm+YKAjQ4SNJlxCiJclTqMWkMjuKkKNek1Ss8a3RYPXjATx0ixEqZVnzF0MpgZnqWhjasZADyqAAqXLz8ZISQIU5WRraQANo4ALpp+hkROa4FDp7ikjJyCkrgAGa01ADGnPDUJlgA1sh+yAAU0XEJfAIANJA4k64AlFRQkBwNkAM4kACEALxbkM04yA0c1MjrAGRnkK6bO3vUB0cnOPOUi5CQlRKQJwDukP0DVyTYbxbhjZKTZ4AbkWrGQ6B4yAW73en06v3+tSGMVBiQEsxh70UihaHT4UwAjJBdmQen0sRSAEwAZgALABWABsAHYABwE8CkyRsKaM6ldXoA9mTaWQdkCoXknDM8W0yUMybMglAA)

[JSDoc discriminated unions](https://www.typescriptlang.org/play?filetype=js#code/PQKhAIAEBcE8AcCmATRAzcBvTAocFwBrASwDtkAucAIgGNiAnWgG0WrwIYENliBXAM5VSfALYAjRAw7gAvrPABhRi0T5gOHKAgwEKdFlz5wRMpRoCAjny4M2M8AOKoAMolIBzaAAthYydLG8uAAyta2aiAaWmBQcEioGJjKTKzgAD6h4XYKId5cSOqa2lDwtlyiWHkFiAoC+YVROGh8pLTQxAD2pOAeiNAAgnZcABT1NQCUWHiOAO7E0LTe4GMNiAB0JORTRibgtFwCanQqrNQUM3vgdtB8DD0Aslw+6wAKAJLG40jr3LyC+AgACZLvtDscrDY7OdQSYbncet8Nk5XO4vMtYiCTLIcLIgA)