Typescript - Type Assertion

TypeScript is a superset of JavaScript that adds optional static types to the language. One of the features of TypeScript is type assertion, which is a way of telling the compiler the type of a variable or expression when it cannot infer it by itself. In this article, I will explain what type assertion is, why it is useful, and how to use it in your TypeScript code.

Type assertion is similar to type casting in other languages, such as C# or Java, where you can convert a value of one type to another type. However, unlike type casting, type assertion does not change the value or the runtime behavior of the value. It only affects the type checking and the code completion by the TypeScript compiler and the editor.

Type assertion can be useful in situations where you know more about the type of a value than what TypeScript can infer. For example, you might be working with a library that returns a value of type any, but you know that the value is actually of a specific type. Or, you might have a variable that has a union type, but you want to access a property or a method that is only available on one of the types. Or, you might have an object that has some optional properties, but you want to assert that they are present and not undefined.

There are two ways to write type assertions in TypeScript: using the angle-bracket syntax or the as syntax. The angle-bracket syntax looks like this:

let value: any = "Hello, world";
let length: number = (<string>value).length; // OK
        

The as syntax looks like this:

let value: any = "Hello, world";
let length: number = (value as string).length; // OK
        

Both syntaxes have the same effect, but the as syntax is preferred because it is more compatible with JSX, which is a syntax extension for React. The angle-bracket syntax can conflict with the JSX tags, so it is not recommended to use it in JSX files.

When using type assertion, you should be careful not to overuse it or misuse it. Type assertion can override the type checking by the compiler, which can lead to errors or bugs that are hard to detect. You should only use type assertion when you are sure about the type of a value, and when there is no other way to express it to the compiler. Otherwise, you might lose the benefits of TypeScript’s type system and end up with JavaScript-like code that is not type-safe.

Here are some examples of when to use and when not to use type assertion:

• Use type assertion when you are working with a library that returns a value of type any, but you know the actual type of the value. For example:

// Assume that myJSLib is a JavaScript library that returns a value of type any
let value: any = myJSLib.getValue();
let length: number = (value as string).length; // OK, if you are sure that value is a string
        

• Do not use type assertion when you are not sure about the type of a value, or when the type of a value can change at runtime. For example:

// Assume that myJSLib is a JavaScript library that returns a value of type any
let value: any = myJSLib.getValue();
let length: number = (value as string).length; // Not OK, if value can be something other than a string
        

• Use type assertion when you have a variable that has a union type, but you want to access a property or a method that is only available on one of the types. For example:

// Assume that value can be either a string or a number
let value: string | number = "Hello, world";
let length: number = (value as string).length; // OK, if you are sure that value is a string
        

• Do not use type assertion when you have a variable that has a union type, and you want to access a property or a method that is common to all the types. For example:

// Assume that value can be either a string or a number
let value: string | number = "Hello, world";
let toString: string = (value as string).toString(); // Not OK, because value already has a toString method
        

• Use type assertion when you have an object that has some optional properties, but you want to assert that they are present and not undefined. For example:

interface Person {
  name: string;
  age?: number;
}

let person: Person = {
  name: "Alice",
  age: 25,
};

let age: number = (person.age as number); // OK, if you are sure that person.age is not undefined
        

• Do not use type assertion when you have an object that has some optional properties, and you want to check if they are present and not undefined. For example:

interface Person {
  name: string;
  age?: number;
}

let person: Person = {
  name: "Alice",
};

if (person.age as number) {
  // Not OK, because this will always be true, even if person.age is undefined
  console.log("Person has an age");
}
        

Type assertion is a powerful feature of TypeScript that allows you to express the type of a value when the compiler cannot infer it by itself. However, it also comes with some risks and limitations, so you should use it with caution and only when necessary. Type assertion can help you write more expressive and type-safe code, but it can also introduce errors and bugs if used incorrectly. I hope this article helped you understand type assertion and how to use it in your TypeScript code. If you have any questions or feedback, please feel free to leave a comment below. Thank you for reading!