Now that TypeScript has been widely adopted, it’s time to get serious and go to the end of the idea: fully statically typed code.
typescript-strictly-typed enables configurations for strictly typed TypeScript, ESLint or TSLint, and optionally Angular. But let’s explain first.
Also, I know that there are other kinds of errors than the ones which can be solved by static types, but it’s not the subject of this post either.
Code in the nothingness: ~50% (it’s just to give an idea, it’s not real metrics).
Level 1: TypeScript default mode
Instead, it will infer types as much as possible. Today’s TypeScript is very smart: let’s say it can infer ~80% of types.
But TypeScript is not a seer:
TypeScript can infer the type of the second parameter, thanks to the default value. But the first one will be
Code in the nothingness: ~20%.
Level 2: TypeScript strict mode
While not the default, the officially recommended way to work with TypeScript is in strict mode.
Strict mode activates 2 main compiler options:
Now, TypeScript will ask to tell when a value can be
strictNullChecks), and when inference is not possible it will ask the type (
Note that TypeScript does not ask to add an explicit type for the second parameter: it’s still inferred. It’s why it’s “no implicit
So going strict does not require a huge extra effort, it’s just about adding types in ~20% of the code.
Strict mode is enabled when creating:
- a TypeScript project (
- an Angular app in strict mode (
ng new --strict)
- a React app (
create-react-app --template typescript)
- a Vue app (
vue createwith TypeScript option)
Code in the nothingness: seems to be 0%. But there is a catch:
strict mode is not that strict.
Level 3: any is evil
The above code will compile, even in strict mode: explicit
anys are still accepted by TypeScript.
All our code is now typed! Code in the nothingness: 0%.
But disabling all
anys requires a little further knowledge of TypeScript than the basics.
Since TypeScript 3.0, when we really don’t know the type of a value, the right type is
any, which allows coding in the nothingness,
unknown will make TypeScript remind us that the value is unknown and force us to check it.
Some other times, a type is known but variable: it’s called generics.
Bonus level: return types
While TypeScript will always infer the functions’ return type, it will do so based on the code. So we suppose, with extra confidence, that our code is doing what it is supposed to do.
Anyway, telling the type of functions’ parameters and return value should be the required minimal documentation.
Framework level: Angular strict
Some frameworks can add their own compilation step on top of TypeScript compilation. It’s the case of Angular, and so it has its own additional strict compiler options:
To promote these good practices, I’ve created a lib which enables configurations for strictly typed TypeScript, ESLint or TSLint, and optionally Angular.
npx typescript-strictly-typed in your project. Done!
By the same author
- Angular schematics extension for Visual Studio Code : graphic interface for Angular CLI commands
- @ngx-pwa/local-storage: Angular library for local storage
- Popular Angular posts on Medium
- Follow me on Twitter
- Angular onsite trainings (based in Paris, so the website is in French, but my English bio is here and I’m open to travel)
My open source contributions are done on free time. So if your company earns money with them, it would be nice to consider becoming a sponsor.