There are a few approaches you can take, some at an individual level and some at a project level, where you will need to get your whole team on board.
// @ts-check to the top, and TypeScript will analyse the contents, letting you know with red squiggly lines where things seem out of place. Here, you can see the difference in our original code snippet:
Immediately, you can see that TypeScript has more to offer. It's just waiting for you to give it permission.
Enabling TypeScript checking via a comment is a good way to get a taste of what it offers. The drawbacks are that it only analyses files individually and only when you remember to add the comment. Also, if the rest of your team isn't currently interested in TypeScript, leaving TypeScript-specific comments in files might not go down well.
Enable this setting for the workspace and VS Code will use TypeScript to type-check all the open files in the project. Enable the setting at the user level and VS Code will use TypeScript to check all your projects as you work on them.
With Check JS activated in your editor, you can work to reduce issues that the TypeScript compiler discovers without worrying about adding config to your application. Also, if it turns out that the TypeScript compiler raises a bunch of issues, they are only visible in your editor and won't break your build.
If you and your team try using TypeScript like this and find it beneficial, you might consider taking the next step and introducing TypeScript directly into your project.
Start by installing TypeScript as a development dependency.
Create a tsconfig.json file. I find it easiest to use the TypeScript executable to start this off. Run this command:
Important settings include
checkJS setting is the equivalent of enabling Check JS in your VS Code settings.
Notably, having a tsconfig.json file with these settings overrides the VS Code settings and enables TypeScript checking in other editors.
I have also included the setting
Add a script to your package.json to run the type checker:
Now you can run
npm run type-check and see the results.
As you haven't been using TypeScript in this project, you will probably have some things to fix. First, if you are working with Node.js then you will need to add TypeScript types for Node.js. This is as easy as running:
Definitely Typed is a community effort to provide types for modules that don't provide their own, and it is very comprehensive. If Definitely Typed has a type for your module, you can install it in your project from the
As an optional addition, you can add types for packages you use that don't provide types themselves from Definitely Typed. If you don't install the types, TypeScript will consider imports from packages as an
any type is TypeScript's catch-all type. It lets the program compile but doesn't give you any further information about the objects you are using. When you add or define types for these packages, TypeScript can then help with autocomplete and highlighting potential issues. I'd recommend installing the types for your dependencies as you come to work on the parts of the source code that use them.
If the types provided aren't correct, there's a great post on Microsoft's TypeScript blog on how to fix them.
Next, you might find TypeScript is reporting some errors in your code. This is what we want!
Any issue raised is a potential runtime bug in your application that TypeScript has now detected. You can see these errors in your editor or when you run the
type-check script. Fixing these errors will improve the reliability of your application. Now TypeScript is part of your project, no further issues like this should slip through.
How you achieve this depends on your existing testing and build process. One option is to run the type-checking process as part of your test suite.
Letting TypeScript analyse your code, either in your editor or as part of your project, gives you, and other tools like SonarLint or SonarQube, more insight into how types flow around your application. It can help you write cleaner, more intentional code and lead to more reliable applications.