Introduction

As you might know, TypeScript gives us plenty of beautiful features that highly enhance the development experience, such as:

• Strong Static Typing support
• Support for major IDEs
• Error highlighting at compile time
• Great integration with other tooling to provide hints

Microsoft has continuously supported it back since 2012.

Edge Scenario of Strong Static Typing Support

However, even though we enjoy the Strong Static Typing support that TypeScript has, it sometimes stands in the way. Some examples of that are when:

• We want to develop something fast
• We try to integrate a 3rd party library in our application that doesn’t support TypeScript.
• We, for the moment, do not know the exact type of something, and neither can we use Generics.

So, what do we do then?

Well, most of the time, we’ll either have to:

• Declare a module for the external 3rd party library
• Cast our type so that it doesn’t upset the TypeScript Compiler anymore.

Introduction to Type Casting

As previously mentioned, Type Casting is the process where we override the type of a variable so that it satisfies the TypeScript Compiler for the time being.

While it is not recommended, it sometimes is necessary, especially when we either don’t know the type of a variable nor do we have the time to find out or replace it everywhere (Imagine huge, nested types inside other types – 3 or more levels deep with multiple properties).

Syntax

The syntax for Type Casting involves the keyword as, as in what shape we would like to “shapeshift” our other type.

const x: Array<any> = [10, 15, 20, 25, 30];

const y: Array<number> = x as Array<number>; 

In the example above, we have initially defined an array x as being of type Array<any>, but its value reflects an array of numbers.

We have also defined the constant y variable as of type Array<number> whose value will be that of x‘s but with a different type (x‘s type will be Array<number> at the time its value gets assigned to y).

The example might not make much sense in real-life scenarios, as we know that the TypeScript Compiler will not have any issues assigning x‘s value to the y variable.

If you aren’t already familiar with the any type, be sure to check out this article.

When we might use Type Casting

To help you get a better insight into when you should be type casting, I will share some snippets from some of my previous personal projects:

const focus = (evt: Event) => {
  const evtTargetElement = evt as HTMLElement;

  evtTargetElement.classlist.add('focused');
};

In the example above, we’re receiving an Event object from a DOM event that has taken place.

The .target property of said event will give us back either an EventTarget or null. In our case, however, we know that the event’s target element will not be null , and we need it as an HTMLElement so that we can add a class to its list of classes.

The way to do that, in our case, is to cast the type of the evt to be HTMLElement so that we can add a new class to it, as you might see on the 4th line of code.

Summary

So that’s mostly it for today’s article.

We have been able to define what Type Casting is, how it is used (In terms of syntax), when it might be helpful, and showcasing a scenario where I have used Type Casting in a production application.

I hope you’ve better understood the topic and have also enjoyed reading the article.

Feel free to share your thoughts on this article and whether it has helped you by leaving a comment below! 👇

Cheers!

👋 Hey, I'm Vlad Mihet

I'm Vlad Mihet, a blogger & Full-Stack Engineer who loves teaching others and helping small businesses develop and improve their technical solutions & digital presence.