TypeScript tricks that allow you to scale your app endlessly
By: Roman Sedov
Tags: React, JavaScript, Angular, Typescript, Tips And Tricks

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.

tsconfig.json file

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.

Use “readonly” properties in interfaces

Prefer “readonly” types

Use “readonly” fields in a class when possible

Use “readonly” structures

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.