Advanced TypeScript Concepts for React Developers with Real-World Examples

Recently it quickly became the top choice for developers working on large-scale applications who demand the very best in performance and reliability.

In this blog post, we will explore some advanced TypeScript concepts that can be used to solve real-world problems in React development. Moreover, we will study some examples and use cases that will help you to understand and implement TypeScript concepts in your own projects.

Before diving deeper into the Advanced TypeScript Concepts first understand its importance and how it helps developers to write better code.

‍

Why should you learn “Advanced TypeScript Concepts”?

There are several reasons why one should learn Advanced TypeScript Concepts. It helps you improve code quality, development productivity, collaboration, and scalability.

As TypeScript continues to grow in popularity, having a deep understanding of its advanced concepts can help you stand out from other developers in the job market. 

‍

Understanding the Advanced TypeScript Concepts with Examples

‍

1. Type Assertions

“Allow developers to define the type of a variable explicitly, overriding TypeScript's inferred type.”

Type Assertions allow developers to override the type system and specify the type of a value. This can be particularly useful when working with external libraries or when you have more knowledge about the type of a value than TypeScript does.

A real-world example of using type assertion in TypeScript is when working with data from an external API. The shape of the data returned from the API may not be known at compile time, but the developer may know the shape of the data based on the API documentation or previous experience with the API.

For example, consider an API that returns an array of objects with the following structure:

TypeScript's static typing and innovative features have revolutionized the world of JavaScript development, ushering in a new era of seamless coding experiences that offer superior type-checking, scalability, and code organization.

Copy
1
2
3
4
5
6
     interface User {
      id: number,
      name: string,
      email: string
    }
     

However, the API may return the data in a format that is not directly compatible with the “User” interface, such as an array of objects with different property names:

Copy
1
2
3
4
5
     const data = [
      { userId: 1, fullName: "John Doe", emailAddress: "john@example.com" },
      { userId: 2, fullName: "Jane Doe", emailAddress: "jane@example.com" }
    ]
     

To work with this data as if it were of the “User” interface, type assertion can be used to tell the compiler that the objects in the array should be treated as “User” objects:

Copy
1
2
3
4
5
6
7
8
     const users = data.map((obj: any) => {
      return {
        id: obj.userId,
        name: obj.fullName,
        email: obj.emailAddress
      } as User;
    });
     

In this example, the “as User” syntax is used to tell the compiler that the object being returned from the “map” function should be treated as a “User” object, even though it has different property names. This allows the data to be used as if it were of the “User” interface, without having to modify the original data or the “User” interface.

‍

Overall, type assertion in TypeScript provides developers with a way to work with data that may not be directly compatible with the expected type, but is known to be of that type at runtime. 

‍

2. String Literal Types

“Allow developers to specify a set of string values that a variable or parameter can take on.”

This allows for specific strings to be assigned as a type, rather than just using the generic string type. By doing this, errors can be prevented and code clarity is improved. String Literal Types are commonly used for things like status codes or specific values that need to be validated. Type Aliases can also be used with String Literal Types to create custom types with specific string values. 

A real-world example of using String Literal Types in TypeScript is when working with API endpoints. Instead of hardcoding endpoint URLs as strings, String Literal Types can be used to create a set of valid endpoint URLs:

Copy
1
2
3
4
5
     type Endpoint =
      | '/api/users'
      | '/api/posts'
      | '/api/comments';
     

This creates a new type “Endpoint” that can only take on one of the specified string values. This can be used to define functions that take an endpoint as a parameter:

Copy
1
2
3
4
     function fetchData(endpoint: Endpoint) {
      // ...
    }
     

Now when calling the “fetchData” function, only the defined endpoint values can be passed in as an argument:

Copy
1
2
3
     fetchData('/api/users'); // valid
    fetchData('/api/products'); // error - Argument of type '"api/products"' is not assignable to parameter of type 'Endpoint'.
     

This helps to catch errors at compile time and ensure that the correct endpoint values are used throughout the application.

String Literal Types can also be used with union types to create more complex types. For example, a “LogLevel” type could be defined with three string literal values:

Copy
1
2
     type LogLevel = 'info' | 'warning' | 'error';
     

This can be used to define a logging function that only accepts one of the specified “LogLevel” values:

Copy
1
2
3
4
     function log(message: string, level: LogLevel) {
      console[level](message);
    }
     

‍

3. Numeric Literal Types

"These types allow developers to specify exact numeric values that a variable can take.”

Numeric literal types can be used as type annotations for function parameters, return types, and object properties, making them useful in a variety of scenarios. For example, they can be particularly helpful when working with APIs that expect specific numeric values. Further, developers can create union types using numeric literal types to accept multiple possible values for a variable.

For example, suppose you are building a program to calculate the distance between two cities. You might use a numeric literal type to define the distance between those cities, which would be represented as a number with a specific value, such as,

Copy
1
2
     const distanceBetweenCities:  number = 156.4;
     

Here, the numeric literal type is a floating-point number, which represents the distance between the two cities in miles. This value is assigned to the variable “distanceBetweenCities” using the “const” keyword to ensure that it cannot be modified later in the program.

Another example could be defining the minimum and maximum age for a user registration form:

Copy
1
2
3
     const minimumAge: number = 18;
    const maximumAge: number = 99;
     

Here, the numeric literal types are integer values that represent the minimum and maximum age for users to register on a website. These values are assigned to the variables “minimumAge” and “maximumAge” using the “const” keyword.

By using numeric literal types, you can ensure that the values assigned to variables or constants are specific and cannot be changed during program execution, making your code more robust and reliable.

‍

4. Boolean Literal Types

"‍By creating a boolean literal type developers can only have two possible values- true or false.” 

It can limit options available to a certain variable or function parameter. This ensures that the code is more readable and can prevent common programming errors. Boolean literal types can also be combined with other advanced TypeScript concepts such as union and intersection types. This allows for even greater flexibility when defining specific types in your codebase. 

Here is an example,

Copy
1
2
3
4
5
6
7
8
9
10
     type MyBooleanType = true | false;
    
    function printBooleanValue(value: MyBooleanType) {
      console.log(`The value is ${value}`);
    }
    
    printBooleanValue(true); // The value is true
    printBooleanValue(false); // The value is false
    printBooleanValue(1); // Error: Argument of type '1' is not assignable to parameter of type 'MyBooleanType'
     

In this example, we define a type “MyBooleanType” using the union operator “|”. This type can only accept the boolean values “true” or “false”. Then we define a function “printBooleanValue” that takes a parameter of type “MyBooleanType” and logs the value to the console.

When we call the function with the boolean values “true” or “false”, it works as expected. But if we try to pass any other value like “1”, it will throw an error at compile-time because it's not a valid value for the “MyBooleanType”.

Boolean literal types can be useful in many scenarios, such as defining constants or configuration values that are either “true” or “false”

‍

5. Union Types

“The type provides the ability to create a type that can hold multiple types of values.”

This type is particularly useful when a variable or parameter needs to accept more than one type of value. Additionally, union types can also be used as return types to allow for flexibility in the output.

Union types are denoted by the pipe symbol (|) between the possible types. While they can greatly improve code flexibility and readability, it's important to note that using too many union types can make code harder to maintain and understand. Therefore, when using union types, it is best practice to use them sparingly and only when necessary for maximum effectiveness.

Here is how you can use union type,

Copy
1
2
3
4
5
6
7
8
     function printValue(value: string | number) {
      console.log(`The value is ${value}`);
    }
    
    printValue("hello"); // The value is hello
    printValue(42); // The value is 42
    printValue(true); // Error: Argument of type 'true' is not assignable to parameter of type 'string | number'
     

In this example, we define a function “printValue” that takes a parameter of type “string” or “number”. We use the union operator “|” to define a union type that accepts both string and number types.

When we call the function with a string or number value, it works as expected. But if we try to pass a value of a different type like “true”, it will throw an error at compile-time because it's not a valid value for the union type.

Union types can be useful in many scenarios, such as when you have a function that can accept multiple types of input, or when you want to define a variable that can hold values of different types based on some condition. 

For example, a function that calculates the area of a shape might accept a “number” if the shape is a circle, or an object with “width” and “height” properties if the shape is a rectangle:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
     type Circle = { radius: number };
    type Rectangle = { width: number; height: number };
    type Shape = Circle | Rectangle;
    
    function calculateArea(shape: Shape) {
      if ("radius" in shape) {
        return Math.PI * shape.radius ** 2;
      } else {
        return shape.width * shape.height;
      }
    }
    
    console.log(calculateArea({ radius: 5 })); // 78.53981633974483
    console.log(calculateArea({ width: 10, height: 5 })); // 50
     

Here, we define types for a “Circle”, a “Rectangle”, and a “Shape” that is a union of the two. Then, we define a function “calculateArea” that accepts a “Shape” parameter and uses an “if” statement to check whether the shape is a “Circle” or a “Rectangle”. This way, we can calculate the area of different shapes using a single function.

‍

6. Intersection Types

“The type allows you to merge two or more types into a single type that possesses all of the features of the individual types involved.”

This means that you can create more precise and specific types in your code by combining existing ones. Intersection Types are represented using the "&" symbol. 

While working with Intersection Types, you can access all properties and methods from both types involved in the intersection. This makes them particularly useful when dealing with complex data structures or when trying to create reusable, modular code. 

For example, let's say you are building a system for managing appointments, and you have two types of users: “Doctor” and “Patient”. Both types of users have some common properties like “name” and “email”, but they also have some unique properties, Doctor has a “specialization” property while a Patient has a “healthCondition” property.

You can use intersection types to create a single type that has all the properties of both “Doctor” and “Patient”, like this:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
     interface User {
      name: string;
      email: string;
    }
    interface Doctor extends User {
      specialization: string;
    }
    
    interface Patient extends User {
      healthCondition: string;
    }
    
    type DoctorPatient = Doctor & Patient;
    
     

Now, you can use the DoctorPatient type to create objects that have all the properties of both “Doctor” and “Patient”. 

For example:

Copy
1
2
3
4
5
6
     const doctorPatient: DoctorPatient = {
      name: 'John Doe',
      email: 'john.doe@example.com',
      specialization: 'Cardiology',
      healthCondition: 'Hypertension'
     

In this example, “doctorPatient” is an object that has all the properties of both “Doctor” and “Patient”, because it is of type “DoctorPatient”. This makes it easy to work with objects that have multiple sets of properties in a single type, without having to duplicate code.

‍

Advanced TypeScript Typing Techniques

‍

1. Conditional Types

Conditional types allow for conditional type inference based on the structure of a type. They can be used to create more precise and flexible types. 

For example,

Copy
1
type Extract<T, U> = T extends U ? T : never

 It creates a type that extracts a subset of a union type based on a condition.

‍

2. Mapped Types

They allow for the creation of new types based on the properties of an existing type. They can be used to transform an existing type or to create new types based on an existing type. 

For example, 

Copy
1
type Readonly<T> = { readonly \[P in keyof T\]: T\[P\] }

It creates a new type that makes all properties of an object read-only.

Mapped types can also be used in conjunction with conditional types to create more complex types that depend on runtime values. This makes them a powerful tool for creating generic and reusable code in TypeScript. 

‍

3. Type Aliases

They allow for the creation of a new name for a type. They can be used to simplify complex type definitions or to create more descriptive names for types. 

For example, 

Copy
1
type UserID = string | number

 It creates a new type alias UserID that can be either a string or a number.

Type Aliases also offer flexibility when used in combination with Union Types and Intersection Types to create more precise types.

‍

4. Generics: 

Generics allow for the creation of reusable code that can work with multiple types. They can be used to create functions, classes, and interfaces that can work with any type. 

For example, 

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

It is a generic function that takes a single argument of type T and returns it.

‍

5. Interfaces:

Interfaces define a contract for an object's structure. They can be used to enforce that an object has certain properties and methods.

For example,

Copy
1
 interface Person { name: string, age: number }

Defines an interface for a Person object with a name property of type string and an age property of type number.

‍

6. Type inference: 

Type inference allows for the type of a variable or expression to be automatically inferred by TypeScript. It can be used to reduce the amount of explicit type annotations needed in code. 

For example, 

Copy
1
let age = 25

It infers the type of the age variable to be a number.

‍

Advanced TypeScript Features

‍

1. Decorators

TypeScript decorators enable you to add metadata to classes and functions, altering their behavior while preserving their fundamental functionality. Decorators are a potent tool for achieving sophisticated functionality while keeping your code concise. They're frequently utilized for tasks like logging, validation, and authentication.

Moreover, decorators can be layered on top of each other to achieve even more intricate behavior. However, to take advantage of this advanced TypeScript capability, it's necessary to comprehend the syntax and implementation of decorators.

‍

2. Mixins

With Mixins , you can merge multiple classes into one to avoid code duplication, add functionality, and reuse code.  To create mixins, TypeScript provides an intersection type that allows you to merge two or more types into a single type.

Mixins can be applied to classes using the "implements" keyword, resulting in adaptable and reusable code that can be easily customized to suit various applications

‍

3. Type Guards

Type guards allow you to narrow down the type of a variable within a block of code using “typeof”, “instanceof”, or custom functions. This helps catch errors early and prevent runtime errors.

Also, it improves code readability and makes it easier for other developers to understand your code. By clearly defining the types of objects and variables within your code, you can avoid confusion and ensure that your code is both efficient and effective. 

‍

Best Practices for Advanced TypeScript

When working with advanced TypeScript concepts, it's important to follow best practices to ensure clean and efficient code. 

Common Mistakes to Avoid

While implementing advanced TypeScript concepts, it's important to not only understand how to use these TypeScript features but also how to use them correctly. Here are some common mistakes to avoid.

• Type assertions should only be used when you are certain of the type of a variable or expression. Using them incorrectly can lead to runtime errors and unexpected behavior.

• Type aliases can make your code more readable and maintainable, but overusing them can lead to confusion. Use them sparingly and only when they add value.

• Be cautious when using advanced features like conditional types or mapped types, as they can quickly become complex and hard to understand. Make sure you fully understand their behavior before using them in production code.

• Always test your code thoroughly and make sure it behaves as expected before deploying it to production. This includes testing for edge cases and potential errors that may arise from using advanced TypeScript features.

‍

Tips for Writing Scalable Code

While writing advanced TypeScript code, the following key tips can help you to ensure scalability and maintainability. 

1. Use interfaces and type aliases to make your code more readable and easier to manage.
2. It's important to avoid using any type as much as possible, as it defeats the purpose of using TypeScript in the first place.
3. Use type assertions with caution, only when you're confident about the types involved. 
4. Making use of generics can help you write reusable code that works with different data types. 

By following these best practices and avoiding common mistakes, you can take full advantage of the power of TypeScript while minimizing the risk of errors or confusion in your code.

‍

Advanced TypeScript in Action 

TypeScript provides several advanced features that can help in writing complex and dynamic code. Let's summarize all of them.

Type assertions provide a way to override TypeScript's type checking, allowing developers to provide more flexibility in their code. Aliases are useful in creating custom-type aliases for complex types, making coding easier and more readable.

Union and intersection types allow combining multiple types into one, resulting in more precise typing. Conditional types create flexible and dynamic typing based on runtime values, allowing for different behavior depending on the data being processed. 

Advanced generics such as higher-kinded types, recursive types, and mapped types can be applied to solve complex programming problems efficiently.

‍

Let’s illustrate these concepts, using a real-world example of a game engine in TypeScript. 

The engine uses type assertions to handle different input methods for various platforms. Alias is used to define custom types for game objects like characters, enemies, and power-ups. Intersection and union types are used to combine multiple interfaces into one when defining game levels.

Conditional types are used to handle various scenarios like rendering different states of an object based on its state at runtime.

Finally, advanced generics are used to define abstract data structures like trees that can work with any data type efficiently. These examples demonstrate how advanced TypeScript concepts can be used effectively in real-world applications.

‍

Well, now it's implementation time! Experience seamless development with DhiWise React Builder

Mastering advanced TypeScript concepts can be a game-changer for your app development. The advanced techniques allow you to write more efficient code and reduce the likelihood of errors. 

Well, now it's time to take your development skills to new heights by implementing these concepts into your React TypeScript project.

And here DhiWise React Builder can help you with the effortless yet accurate implementation of your project idea. To find out how DhiWise React Builder can help you to build React TypeScript projects efficiently- Read this article .

Keep improving your TypeScript skills, and happy coding!