Using @ts-check in regular JavaScript project

Been diving deep into typescript recently so I figured I'd write some of the things that i find easy to play around with while exploring more about typescript. @ts-check is a good starting point.

What is @ts-check and why you should use it in your regular JavaScript files?

If you're using vs code as your editor you can get the benefit of type checking & error reporting even though your project is not written in typescript.

ts-check is a great feature we can take advantage of when working with regular JavaScript project because this tool will automatically analyze our files and help us catch mistakes during development. When we add ts-check to our files, typescript is activated on top of our JavaScript file and it will help look for errors and then notify us if there are issues within our code.

The easiest way to add ts-check to our code is by simply adding //@ts-check on the first line of our file.

// @ts-check

Here's an example of how it works: The code example below is not using ts-check and it is deliberately littered with errors.

let number = 1

const change = () => {
    number = 'test'
    addNumber()
}

for (let i = 0; i < number; i++) {
    nunber += i
}

number.map(num => console.log(num))

There's a lot of obvious error in the code above but our code editor is not showing it to us. It may be easy to go line by line and spot these errors in this small code example but imagine if we're working within a large codebase and we're under pressure to deliver a task, its normal to overlook simple error like this. Lots of time will be wasted because we will only discover much of these errors during runtime.

Modify the same code above a little bit by adding @ts-check:

// @ts-check
let number = 1

const change = () => {
    number = 'test' // Type 'string' is not assignable to type 'number'
    addNumber() // Cannot find name 'addNumber'.
}

for (let i = 0; i < number; i++) {
    nunber += i // Cannot find name 'nunber'. Did you mean 'number'?
}

number.map(num => console.log(num)) // Property 'map' does not exist on type 'number'.

By just adding @ts-check on the first line as shown above, our code editor will highlight every single line of code that contains an error without us having to run the code beforehand.

The good thing about this is that it will not just highlight which line is problematic. If we hover over the highlighted line, we'll get an explanation about the error so we can see what actually causes the problem.

The advantage of using @ts-check:

• It help us check variety of errors such as normal typo, missing properties, invalid usage of method and many others.
• It saves us a lot of time from scratching our heads looking for errors in our code.
• It makes our code more robust by making sure we're not writing code that aren't making sense.
• We don't need to migrate our project to typescript to benefit from this.

Using ts-check is a good way to start if you're not currently using typescript but planning to use it in the future. Its a great little tool that we can use without having to change any settings.

Checkout this link for more info on how to integrate ts-check in your project:
https://code.visualstudio.com/docs/nodejs/working-with-javascript#_type-checking-javascript