Let’s dive right in to getting VS Code setup. If you’d like a deeper explanation of why you might want to go this path instead of writing Typescript, scroll to the end. To get started, make sure you have the latest VS Code installed, then enable these settings. It’s the power of the combined CheckJS and JSDoc support that lets us leverage these abilities.

Ok, let’s write some code! We’ll setup a basic ES6 class and extended class to show how we can create some class properties and function arguments. It’ll also give us a chance to explore documenting destructured parameters for our function parameters.

Let’s jump into some of the errors! First off, it won’t let us create a new object without the proper destructured argument parameters. The TS hint provides insight to the required and optional fields along with their types.

Once we fix that pesky problem, you’ll notice it won’t let us set the original class’s boolean flag to a number. Again, strict typing to the rescue!

Additionally, it won’t let us mix up our default values with our property types!

Even if we fix that, VSCode and Typescript are smart enough to stop you from overriding class methods and changing the type behavior.

These are just a few examples, but hopefully it gives you an idea of some of the benefits you can get from this setup. It does take a bit of guess work on some of the more complex JSDoc structures, but VS Code is there to guide you along the way. I’ll discuss below some of my personal opinions on the subject.