Learn TypeScript in 5 min — Part 3

Welcome to the Learn TypeScript in 5 min series. This series will introduce the core knowledge and techniques of TypeScript. Let’s learn together! Previous articles are as follows:

Learn Typescript in 5 minutes — Part 1

Learn Typescript in 5 minutes -Part 2: Complex Types

Introduction

In this article, we will learn about very common topics Generics and Unions.

Composing Types

In TypeScript, you can create complex types by combining simple ones. There are two popular ways to do so: with Unions, and with Generics.

Unions

With the help of Unions, you can declare type can be of multiple values and it can accept any one of the values. For example, you can describe a boolean type as being either true or false:

type myBool = true | false;

A popular use-case for Union types is to describe the set of string or number literals that a value is allowed to be:

type windowStates = "open" | "closed" | "minimized";
type positiveNumber = 1 | 3 | 5 | 7 | 9;

Generics

Generics in TypeScript allow you to write reusable code that can work with multiple types. They allow you to define a function, class, or interface that can work with any type, without specifying the exact type until the code is used. For example:

function identity<T>(arg: T): T {
    return arg;
}

Here, T is the type parameter and it’s being used as the type of the argument and the return value. You can also use multiple type parameters by separating them with commas.

When you call this function, you specify the type that T should be replaced with by using angle brackets and providing a type. For example:

let output = identity<string>("myString"); // type of output will be 'string'
let output = identity<number>(1);  // type of output will be 'number'

You can also use Generics in classes and interfaces. For example:

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

Here, T is the type parameter that is used to specify the type of the zeroValue and add properties.

To use this class, you would need to create an instance of the class and specify the type, for example:

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

In TypeScript, you can use multiple generic types by specifying them in the <>, separated by commas. For example, a generic function that takes two arguments of different types could be defined like this:

class MyClass<T, U> {
    constructor(public arg1: T, public arg2: U) {}
}

Here, T and U are two different generic types that can be specified when the class is instantiated.

let myClass = new MyClass<string, number>("hello", 5);

Here, myClass is an instance of the MyClass class, with arg1 as string and arg2 as number.

By using multiple Generics, you can create more versatile and powerful components that can work with a variety of different types, which can make your code more flexible and maintainable.

Conclusion

In conclusion, Generics in TypeScript are a powerful tool for creating reusable and versatile components that can work with a variety of types. By using angle brackets <> to define placeholder types, you can create generic types, functions, classes, and interfaces that can be specified at a later time.

With the ability to use multiple generic types, you can create even more powerful and versatile components that can handle a variety of different types.

By mastering the use of Generics in TypeScript, you can take your code to the next level of reusability and maintainability.

Check the other parts of the TypeScript series on my medium profile.
https://medium.com/@vikaskum660.

Stay tuned for more articles like this and follow me on Linkedin and Twitter to stay updated for Part 4.