TypeScript tricks that allow you to scale your app endlessly

We use TypeScript because it helps develop our apps safer and faster.

TypeScript by default has many simplifications. They help JavaScript developers to start using it easier but they waste a lot of time in the long term.

We collected a set of rules for more strict TypeScript. You just get used to it once and save much time working with your code in the future.

any

There is a simple rule that returns much profit in the long term.

Do not use “any”. Ever.

There is simply no case where you cannot describe a type instead of using “any”. If you have such a situation, it can be a problem in architecture, legacy or something else.

Use generics, unknown or overloads and do not worry about unexpected problems with data structures. Such problems are hard and expensive to debug.

strict

TypeScript has a “strict” mode that is unfortunately disabled by default. This mode enables a set of rules for safe and comfortable TypeScript. If you do not know about this mode, read the following article.

With “strict” mode you forget about errors like undefined is not a function or cannot read property X of null. Your types are accurate and correct.

And what should I do?

If you start a new project, enable “strict” and be happy.

If you have a project without “strict” mode and you want to enable it, you can meet a lot of compilations. It is very hard to write a strict code without alerts of the compiler. So it’s likely you have a lot of problematic places. Migrating the whole project to “strict” gets annoying pretty quickly.

It is recommended to cut this big task into pieces. The “strict” mode consists of a set of 6 rules. You can enable one of them and fix all errors. The next time, you enable the second one, fix errors and continue work and so on. One day you get a “strict” mode.

readonly

The next important rule for us as developers in TypeScript is using readonly everywhere.

It is a bad practice to mutate structures while working with them. For example, Angular does not like this way: there are some issues with ChangeDetection and updates of your view when you mutate data.

But you can prevent all attempts to mutate data easily. Just make a habit of writing readonly word.

And how should I do it?

There are many places in your app where you can replace unsafe types to readonly options.

as const

In TypeScript v.3.4 we got const-assertions

It is a more strict instrument than “readonly” types because it seals instance to the most precise type and you can be sure that nobody and nothing will change it.

Using as const you also get exact types in the tips of your IDE.

Utility Types

TypeScript has a set of types that are shortcut transformations of other types.

Please, explore the official utility types doc and use them in your app. It saves a lot of time.

Narrow down your types

TypeScript has many instruments to narrow down types. It is cool because we can support strict typing in our project in a wide variety of cases.

Look at the following sample. It is a simple case but it can help to understand the difference between checking a type and narrowing it down.

You can narrow down types in several ways:

• typeof operator from JavaScript to check primitive types
• instanceof operator from JavaScript to check inherited entities
• is T declaration from TypeScript allows checking complex types and interfaces. But you should be very careful using this feature because you make the correct type check your responsibility, not TypeScript's.

Some use cases:

Conclusion

I think these techniques are the most important for our team for safe and strict TS development. Of course, they cannot solve all problems but if you start using them once, they will save you from unexpected tricky mistakes in large projects all the time.

This article is the second chapter of the big Angular interactive handbook about advanced Angular. Continue to explore Angular here: angular.institute