How to do type-casting in TypeScript
So, you’d be assigning types, such as
boolean and so forth, to the variables like so.
let color: string = "blue"; let decimal: number = 6; let isSent: boolean = false;
But take the following scenario. You may need to assign the length of a string stored in a variable declared as
any to a variable declared as
number, how would you do that?
let someValue: any = "this is a string"; let strLength: number = ??;
One way is to explicitly “type-cast” the variable to the
string type and then calculate its length. In TypeScript, you can do typecast by prepending the variable with type enclosed with angle brackets. So, the previous code would be like so.
let helloWorld: any = "Hello world!"; let strLength: number = (<string>helloWorld).length;
This way, we let TypeScript know that we’re explicitly “type-casting” the variable for a certain operation and the type to which we are casting it to could be more specific than its current type.
The other way you could do this is by using the
as-syntax like so:
let helloWorld: any = "Hello world!"; let strLength: number = (helloWorld as string).length;
Both the syntax are equivalent to each other but when you use TypeScript with React, you can only use the as-style type-casting.
Now, there’s a typical situation where certain types can not be type-casted to other types. Such as
string. Take the following example.
let someValue: number = 46; let strLength: string = (someValue as string);
When you tried to do the above, TypeScript’s compiler will throw the following error as
string type can not overlap to
Conversion of type ‘number’ to type ‘string’ may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to ‘unknown’ first.
So, to fix the above code snippet, we’ll need to type-cast
unknown first and then to
string like so.
let someValue: number = 46; let strLength: string = (someValue as unknown) as string;