How to turn on TypeScript strict mode in specific files
source link: https://blog.allegro.tech/2021/09/How-to-turn-on-TypeScript-strict-mode-in-specific-files.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to turn on TypeScript strict mode in specific files
- allegro.tech blog
- Kamil Krysiak Jarosław Glegoła
- How to turn on TypeScript strict mode in specific files
Imagine you have to migrate your JavaScript project to TypeScript. It’s fairly simple to convert one file from JS to TS, but if you want to take type checking to the next level (going for TypeScript’s strict mode) it is not that easy. The only solution you have is turning on strict mode for the whole project which may result in thousands of errors. For most projects that are not strict yet, it would take quite a bit of time and effort to fix all the strict errors at once.
Turning strict-mode on in development only?
You could think of turning on strict mode during development, catching strict errors that way, and then turning it off before pushing your changes, but this approach has a few downsides.
- You’ve got to remember to change
tsconfig.jsonevery time you make changes — without automation, this could get tedious. - It won’t work in your CI pipeline
- It will show errors in files you don’t want to make strict yet
Ok, so what can we do to improve this workflow?
Introducing typescript-strict-plugin
typescript-strict-plugin eliminates all the above problems by allowing you to specify exactly what files you want to be strictly checked. You can do that by simply putting a single comment at the top of the file and typescript will strictly check it. Now every member of your team will have strict errors shown to them in the editor of their choosing (yes, this plugin works with webstorm, vscode, vim, and more).
Unfortunately, typescript plugins do not work at compilation time, they work only in IDEs. Another nice feature that comes in the package is a compile-time tool that allows you to connect the strict plugin to your CI pipeline, or a pre-commit hook. It checks marked files with strict mode and prints to the console all strict errors found. If a single strict error is found, the tool exits with an error, so you can be sure that all specified files are really strict (strict, strict, strict… ahh).
How to use it?
Install the typescript-strict-plugin package
with npm:
npm i -D typescript-strict-plugin
or yarn:
yarn add -D typescript-strict-plugin
Add the plugin to your tsconfig.json
{
"compilerOptions": {
//...
"strict": false,
"plugins": [
{
"name": "typescript-strict-plugin"
}
]
}
}
Mark strict files with //@ts-strict comment
Before:
const name: string = null; // no error here
After:
// @ts-strict
...
const name: string = null; // TS2322: Type ‘null’ is not assignable to type ‘string’.
You can also directly specify directories you want to be strict. In the following example, every file in src and test
directories will be strictly checked.
{
"compilerOptions": {
//...
"strict": false,
"plugins": [
{
"name": "typescript-strict-plugin",
"path": ["./src", "./test"]
}
]
}
}
Add tsc-strict to your type checking package.json scripts
// package.json
{
"scripts": {
"typecheck": "tsc && tsc-strict"
}
}
Otherwise, the plugin will not work outside your IDE.
Note: tsc-strict script uses TypeScript’s tsc under the hood, so the full type checking time in this scenario would double.
Conclusion
typescript-strict-plugin can improve your app’s reliability and type safety. And all that without any disadvantages except for
compilation time and a few comments.
If you’re interested in how this works under the hood, we are working on a separate post on making your own TS plugin, so stay tuned!
Recommend
-
8
Angular CLI Strict ModeIn Angular, we strongly believe in consistency and best practices. For example, we
-
13
What is strict mode? Strict mode was introduced in ECMAScript5 also known as ES5 in 2009. Adding strict mode to JavaScript code allows your code to be checked more strictly. Allows programmer to write m...
-
9
@johnpalmgrenJohn PalmgrenHello you wonderful people. I'm currently doing a webdev Bootcamp and I'll be sharing insights and tutorials here.
-
3
Episode transcript Ryan Burgess Welcome to a brand new episode of the front end happier podcast. In the past, we've talked about TypeScript, we've definitely touched on it. But in this episode, we're g...
-
7
Use Bash Strict Mode (Unless You Love Debugging) Let's start with the punchline. Your bash scripts will be more robust, reliable and maintainable if you start them like this: #!/bin/bash
-
4
Strict ModeStrictMode is a tool for highlighting potential problems in an application. Like Fragment, StrictMode does not render any visible UI. It activates additional checks and warnings for i...
-
11
SyntaxError: Use of const in strict mode? I am trying to login on facebook.com with selenium-webdriver. var webdriver = require('selenium-webdriver'), By = require('selenium-webdriver').By, until = require('sel...
-
8
Hello React developers, you've probably heard of strict mode. But what the hell is it, exactly? In short term, React.StrictMode is a useful component for highlighting potential problems in an application. Just like
-
6
In JavaScript, the language provides a feature known as 'strict mode', introduced in ECMAScript 5 (ES5), that helps developers avoid common JavaScript pitfalls. In this article, we will dive into what strict mod...
-
7
How to Control Strict Mode Wolfram Kriesing - October 16, 2023 #nodejs #javascript #strict mode I was surprised to see that the worker threads run in non-strict mode by def...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK