Typescript’s influence is growing within the developer community. Microsoft created this programming language only a decade ago to overcome the deficiencies of JavaScript. Typescript is the superset of JavaScript that offers a class-based object-oriented programming approach that can also be static-typed like JavaScript.

The benefits of using Typescript cannot be overstated, as it can be used for creating JavaScript applications for the client and server side. One of the biggest problems this programming language solves is the ability to produce large systems based on JavaScript. However, to fully utilize the benefits of Typescript, you must know its essential features.

This article will cover Typescript’s four most important features that can empower your program performance at scale.

 

1. Generics

In JavaScript, there is no way to make methods or APIs reusable, but in Typescript, you can achieve that using Generics. It is one of the essential Typescript features to master, common to all dynamically typed programming languages.

Let’s see an example code snippet to understand Generics.

function addItem(item: string, array: string[]) {
array = […array, item];
return array;
 }

Here we have created a method to add defined types to an array. Suppose we want to create a similar function for the int type. Do we have two redo the same method?

No. Generics in Typescript allow us to reuse the code instead of writing it repeatedly. Here’s how:

function addItem<T>(item: T, array: T[]) {
array = […array, item];
 return array;
}
addItem(‘hello’, []);
addItem(true, [true, true]);

Here we use T for creating an array with any type. But what if we want to limit certain unwanted types from using T? For this function, we use the ‘extends’ keyword.

function addItem<T extends boolean | string>(item: T, array: T[]) {
array = […array, item];
return array;
}

addItem(‘hello’, []);

addItem(true, [true, true]);

addItem(new Date(), []);

// ^^^^^^^^^^

// Argument of type ‘Date’ is not assignable to parameter of type ‘string | boolean

In Typescript, Generics is a powerful concept that empowers developers to quickly build comprehensive and large-scale dynamic interfaces for their applications.

 

2. Unions

One of the most straightforward Typescript features to use is unions. They allow developers to combine multiple types into one. In large-scale applications, you often have to compose types by combining different variables.

According to Typescriptlang.org, “a union type describes a value that can be one of several types. We use the vertical bar (|) to separate each type.” Here is an example: 

function logIdentifier(id: string | number) {
 console.log(‘id’, id);
}

Unions are essential when you are working with nullable types. For instance, string type is used with undefined in the following code.

function logIdentifier(id: string | undefined) {
if(!id) {
console.error(‘no identifier found’);
} else {
   console.log(‘id’, id);
  }
}

Union is a robust Typescript feature that can provide a simpler alternative to Generics when the requirement is to express types/interfaces dynamically less. The benefit here is improved simplicity.

 

3. Tuples

Tuples are one of the essential Typescript features developers must be familiar with. A tuple type allows developers to create an array with a fixed number of elements whose types are known but not necessarily the same kind. In JavaScript, creating an array with two types of elements is difficult, but Typescript’s tuple feature makes it a lot easier.

There are two different ways to define a tuple – explicitly and implicitly.

Here is an example of an explicit tuple:

const array: [string, number] = [‘test’, 12];

An implicit tuple is defined as:

const array = [‘test’, 12] as const;

The difference between the two arrays is that the use of const in the implicit tuple makes it a read-only array. This is a preferable security feature.

You can also use label tuples like this:

function foo(x: [startIndex: number, endIndex: number]) {
 …
}

The benefit of using labels in tuples is that when you are destructuring, you don’t have to name the variables differently. They also make your code more readable and maintainable. However, remember that when you label one tuple element, you must also label the rest tuples.

 

4. Type Guards

Type guards are tools in Typescript that allow developers to narrow down the type of objects they use in the program. It implies you can go from a more general type to a more specific one. This allows Typescript developers to write better code faster.

There are multiple ways to create type guards. However, the most commonly used are user-defined type guards. They are easy to implement. All you have to do is to define a function whose return type is a type predicate. Remember that this function can only return true or false.

Here is an example of a code that uses a type of operator for the type guard function.

function isNumber(x: any): x is number {
return typeof x === “number”;
}
function add1(value: string | number) {
if (isNumber(value)) {
  return value +1;
  }
 return +value + 1;
}

Type guards are scoped, i.e., the value can be called only within the function they are used, and outside the code block, they will be unknown.

 

Conclusion 

We explored a few most critical Typescript features, but there are many more that you can use to create scalable systems. Try progressively adopting these features in your code, and you will realize how much cleaner, concise, and easier to maintain your code will become.

Talent500 is a platform for Fortune 500 companies and startups to hire talent and build remote engineering teams. Join us today and get discovered by the best companies.