5 TypeScript Tricks Every Developer Should Know

Introduction

TypeScript is a powerful programming language that offers several features to enhance productivity and maintainability in the development process. This blog post will explore five TypeScript tricks that every developer should know.

1. Optional Chaining

Optional chaining is a feature that allows you to safely access the properties of an object without worrying about potential null or undefined values. It is denoted by a question mark (?) placed before the dot operator.

For example, consider the following TypeScript code:

const user = { name: 'John', address: { city: 'New York' } };

If we want to access the city property of the address object, we can use optional chaining as follows:

const city = user?.address?.city;

This will prevent runtime errors if the address or city property is undefined or null.

2. Type Assertions

Type assertions allow you to specify a value type when TypeScript cannot infer it automatically. It is denoted by the angle bracket syntax or the ‘as’ keyword.

For example, consider the following TypeScript code:

const message = 'Hello World';

If we want to treat the message variable as a string, we can use type assertions as follows:

const length = (message as string).length;

This will ensure that TypeScript treats the message variable as a string and provides IntelliSense for string-specific methods like length.

3. Nullish Coalescing

Nullish coalescing is a feature that allows you to provide a default value when a variable is null or undefined. It is denoted by the double question mark (??) operator.

For example, consider the following TypeScript code:

const count = null ?? 0;

If the count variable is null or undefined, it will be assigned 0. Otherwise, it will retain its original value.

4. Mapped Types

Mapped types allow you to create new classes based on existing types by transforming each property. This can be useful for creating read-only or optional properties.

For example, consider the following TypeScript code:

interface User { name: string; age: number; }

If we want to create a read-only version of the User interface, we can use mapped types as follows:

type ReadOnlyUser = { readonly [K in keyof User]: User[K]; };

This will create a new style with all User interface properties marked as read-only.

5. Conditional Types

Conditional types allow you to create classes that depend on a condition. This can be useful for building flexible and reusable type definitions.

For example, consider the following TypeScript code:

type IsString = T extends string ? true : false;

If we want to check if a type is a string, we can use conditional types as follows:

type Result = IsString<'Hello World'>; // Result is true

This will be true if the provided type is a string and false otherwise.

Conclusion

These five TypeScript tricks can significantly enhance productivity and make your code more robust. By leveraging optional chaining, type assertions, bullish coalescing, mapped types, and conditional types, you can write cleaner and safer TypeScript code.