TypeScript Type Assertion

In TypeScript, type assertion is one of the robust features. It helps us explicitly notify the compiler about the type of a value. It becomes more useful when we have more precise type information than the compiler. When we use Type assertion in our program then we can avoid type errors while still focusing on type safety using TypeScript type assertions.

TypeScript provides two ways to do Type Assertion. They are

1. Using Angular Bracket <>
2. Using as keyword

Using Angular Bracket <>

In TypeScript, we can use angular "bracket <>" to show Type Assertion.

Syntax:

Explanation:

A variable anyValue is declared with the type any which disables TypeScript’s type checking for this variable. The value assigned is a string but the compiler does not enforce this fact. Here, <string> anyValue tells TypeScript to treat anyValue as a string. TypeScript now assumes it is a string and we can access the length property. The length of the string is then assigned to strLength which is typed as a number.

Note: The above syntax is not recommended with JSX.

Using as Keyword

TypeScript provides another way to show Type Assertion by using "as" keyword.

Syntax:

Explanation:

In the above code, we create a variable named unknownValue and its type of it is any. Here, any type tells TypeScript to avoid type checking for this variable. The st length of the string is evaluated at runtime and stored in strLength which is typed as a number. We use type assertion here to safely convert unknownValue as a string to tell TypeScript to treat the value as a string. After that, we access the string length and store it in strLength which is explicitly typed as a number.

Examples of Type Assertions in TypeScript

Here, we will illustrate type assertions with some examples.

1. Type Assertion by making use of the "as" Keyword:

We will use the "as" keyword for type Assertion.

Example:

Let us understand this with an example:

Code:

Output:

string

Explanation:

In the above example, a variable named myName is declared and we set its type to any and assigned a string value "yash". Here, any disables type checking, we use type assertion as a string to inform the TypeScript compiler to treat myName as a string. The runtime behavior does not affect this assertion. Here, the typeof operator returns us a string because the actual value stored is a string.

Code:

Output:

4

Explanation:

In this example, we declare a variable named value with the type any and assign it the string yash. After that, we utilize type assertion as a string to inform the TypeScript compiler that value should be treated as a string which permits access to the length property. The result is assigned to valueLength which is of type number and then printed to the console.

2. Type Assertion with Function Return Value:

Output:

24

Explanation:

In this example, we defined a function named myValue. The type of myValue is any. After that, we utilize a type assertion as a string which informs the TypeScript compiler that the returned value should be treated as a string. It allows access to the length property. We create another variable named strLength where we store the type number and then printed the output to the console.

3. Type Assertion with Union Types:

In TypeScript, a type assertion with a union type is a way of overriding the compiler’s type checking. It permits us to tell the compiler to treat a value as a specific type without checking at runtime.

Code:

Output:

Swimming

Explanation:

We define two types named Pet and Fish. Inside Pet type, we define name and a walk method and inside fish type, we define name and a swim() method. Then we create a variable named myPet with a union type Pet | Fish which means it can be a Pet or a fish.

Now, we assign an object named myPet. It contains name and a swim() method. Therefore it matches the structure of Fish but TypeScript still treats myPet as Pet | Fish. It does not allow direct access to the swim().

We use type assertion to solve this problem which tells the TypeScript compiler to treat myPet as a Fish. Now, we can call the swim() method and print the output to the console.

4. Type Assertion of Objects:

Sometimes we may face situations where an object is defined without any properties. It will throw an error as a result.

Example 1: Adding Properties to an Empty Object in TypeScript which will throw an error

Let us look at an example to understand this.

Code:

Output:

Compilation Error: Property 'name' does not exist on type '{}'.

Explanation:

We have faced an error that is compilation error. It will throw a compilation error because the compiler assumes that the type of myEmployee is an empty object without properties. We can avoid errors by utilizing type assertions.

Example 2: Adding Properties to an Empty Object in TypeScript

Let us understand this with an example.

Code:

Output:

{ name: 'Yash', code: 1520 }

Explanation:

In the above example, we define an interface called Employee. In TypeScript, an interface is like a blueprint for an object. It ensures the object has certain properties with specific types. In this case, the name must be a string and the code must be a number. Here, a Partial is a TypeScript utility type that makes all properties of Employee optional. This allows us to create an object and populate incrementally.
The expression myEmployee as Employee is a type assertion that only affects TypeScript’s compile-time type checking. We utilize console.log(finalEmployee) statement to print the object { name: ‘Yash’, code: 1520 }.

Points to remember

• Use Type Assertions Sparingly: We should rely on the type inference of TypeScript whenever possible. We should not overuse type assertions as they can mask potential errors and reduce code maintainability.
• Prefer 'as' Syntax: We should utilize the as syntax for type assertions to avoid conflicts. It should be especially used in environments like JSX where the angle-bracket syntax can cause issues.
• Enable strict mode: By enabling strict mode in our json, we should confirm that we are working with a robust type system. It assists the TypeScript compiler to catch more errors which makes assertions a conscious choice rather than a necessity.