Sometimes, in TypeScript, something will have an type, where TypeScript can't discern the specific type something should be. At its most basic, this can occur when a variable is simply given the type . For example: unknown unknown let text:unknown = "String Goes Here"; Although we can see that the type of content above is a , it has been given the type , so TypeScript doesn't know what type it is. As such, when we try to run methods on this that are string specific, they won't work. Let's say we wanted to get the length of this string, for example: string unknown let text:unknown = "string";
let value = text.length; How Casting Works in TypeScript The code above will actually throw an error, which is . To solve this problem, we need to use TypeScript casting. To cast something in TypeScript, we use the keywords. For this example, we need to cast the variable to a string, so TypeScript will let us use : Object is of type 'unknown'. as text length let text:unknown = "string";
let value = (text as string).length; Now, TypeScript will case the type to , and we can use . The way this code is written is unlikely to happen in the real world, but it could occur if you receive an API response of an unknown type and have to conform it to a type. string length Another common place this happens is with . For example, it's pretty common to select an input and expect to be able to find the value via the property: selectors value let input = document.querySelector('input');
let inputValue = input.value; In TypeScript, this throws an error, since . TypeScript has a number of predefined types for query selector outputs, but we can't write either, since the input is possibly . As such, we have to cast the input to to get the value: Object is possibly 'null'. let input:HTMLInputElement = ... null HTMLInputElement let input = document.querySelector('input') as HTMLInputElement;
let inputValue = input.value; Conclusion I hope you've enjoyed this tutorial. TypeScript casting is necessary for some situations, especially when using . It's a useful way to enforce certain type restrictions on outputs from APIs, or variables with types. querySelector unknown

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Use Type Casting in Typescript

How to Use Type Casting in Typescript

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Use Type Casting in Typescript

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES