Quick Tip: Setup Typescript type-checking with your Pure Javascript

#javascript #typescript #jsdoc #beginners

Today's Developer Experience (DX) Tip:

a.
install Typescript globally on your devbox

npm i -g typescript

b.
install these in your package.json as devDependencies

npm i -D eslint eslint-plugin-jsdoc

c.
create a tsconfig.json file in the root of your project or monorepo

cd MYROOTPROJ
tsc --init

("tsc" stands for TypeScript Compiler)

d.
Open the newly generated tsconfig.json and UNCOMMENT these two lines...

  "allowJs": true,  // allow javascript files to be compiled
  "checkJs": true, // report errors in .js files

(By doing this you'll never need to use... // @ts-check)

e.
Type your function definitions with JSDoc syntax.
Make sure the top comment line starts with: /**

Now you have all the Typescript services, while keeping your code pure JavaScript.
The best of both worlds.

Example (see the squigglies):

How to register your own custom JSDoc tags in your project. Go here...
https://dev.to/functional_js/add-jsdoc-to-your-javascript-code-2lb0

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.