Mastering TypeScript: 7 Essential Tricks You Need to Know

Introduction

In today’s dynamic world of web development, TypeScript has positioned itself as a game changer. With its static typing and object-oriented programming features, TypeScript has brought increased robustness to JavaScript, allowing developers to write more secure, efficient, and error-free code.

In this blog post, we will explore seven tricks to maximize your productivity and harness the full power of TypeScript.

Trick 1: Use Union Types for Increased Flexibility

Union types allow us to work with values that could be several types.

function formatInput(input: string | number) {
 return input.toString();
}

Here, input could be either a string or a number, and TypeScript will ensure you use it correctly.

Trick 2: Leverage Type Aliases

Type aliases enable you to create new names for types. They’re especially handy when working with complex union or intersection types.

type StringOrNumber = string | number;

Now, we can use StringOrNumber wherever we would use string | number.

Trick 3: Take Advantage of Optional Chaining

The optional chaining operator (?.) allows you to access deeply nested property paths without having to check if each reference in the chain is null or undefined.

let x = obj?.prop?.subProp;

If obj, prop, or subProp is null or undefined, the expression short-circuits and returns undefined.

Trick 4: Use Nullish Coalescing

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

let x = value ?? defaultValue;

This is much safer than using ||, which checks for any falsy value (like ’’, 0, NaN, false).

Trick 5: Understand Type Guards

Type guards allow us to narrow down the type of an object within a conditional block. TypeScript is smart enough to know that inside the if block, the type of value must be string.

if (typeof value === ‘string’) {
 console.log(value.substr(1));
}

Trick 6: Embrace Template Literal Types

TypeScript 4.1 introduces template literal types, which are essentially string literals with embedded expressions. This allows you to form new types by concatenating existing types.

type World = “world”;
type Greeting = `hello ${World}`;

Here, Greeting is the type ”hello world”.

Trick 7: Use Mapped Types

Mapped types allow you to create new types based on old ones by mapping over property types.

type ReadOnly<T> = {
 readonly [P in keyof T]: T[P];
};

Now, ReadOnly<MyType> is the read-only version of MyType.

Conclusion

The TypeScript language is full of powerful features and clever tricks that can help you write cleaner, safer code. By mastering these tips and tricks, you will find yourself writing more efficient and error-free TypeScript. Remember, TypeScript is a tool, and like all tools, it becomes significantly more powerful when you fully understand how to use it. Happy coding!