Check out a free preview of the full TypeScript 5+ Fundamentals, v4 course

The "Any & Type Casting" Lesson is part of the full, TypeScript 5+ Fundamentals, v4 course featured in this preview video. Here's what you'd learn in this lesson:

Mike discusses typecasting in TypeScript and explains how to cast values to different types using techniques such as assigning a value to a different type, using the "as" keyword, or casting to the "any" type. TypeScript will object to casting incompatible types and suggest using the "any" type as an intermediate step when necessary.


Transcript from the "Any & Type Casting" Lesson

>> So we talked a little bit about type casting. So you can see here, we have the frontEndMastersFounding: Date. This is approximately right at least on the corporate paperwork, it's right, 2012?
>> So the actual company was incorporated in 2008.
>> Wow.
>> And I went full-time in Frontend Masters in 2014, but before then, it was a kind of one-off event.

So it's a little bit complicated.
>> It's a little complicated. This was a date I found somewhere, so I used that one.
>> Probably, a ChatGPT or something.
>> Kind of it.
>> [LAUGH]
>> Kind of it, so it just did math.random and converted that into something I just found the oldest article I could find on the Internet.

So you can see date one, we used that. Date one ends up being a date, just through assignment. There is, we can call this inference. It's hardly inference here, cuz we know exactly what type the value is here. Date two, let's say we wanted some degree of flexibility for some reason.

We can cast this to an any, right? We looked at as any, we looked at as 79 before, as const. These are all varieties of casting. Sometimes, TypeScript will object to you doing certain types of casts, and we saw that above when we tried to do null as 79.

So as long as these types are compatible, reasonably compatible, types group will let you perform this cast. That's why when we had the question, it's actually a good question, when we had, can we cast 10 to a type of 79, 10 and 79 are both numbers. Conceptually, it almost makes sense.

I mean, we know if we're treating these as literal types, they're not the same. Maybe one day, TypeScript will object to that. Here's an example that TypeScript will object to, and I'm gonna back this stuff up here. So we have a string, and we're trying to cast that to a date.

There is just no intersection between string and date. They're so incompatible. TypeScript, it's almost like it's asking us, are you really sure you wanna do this? These are very different. You're not gonna be able to pass this value around safely as a date. And if we really wanted to tell TypeScript we know what we're doing, we'd first cast it to an any.

So you can cast it to a top type back down to a date. You might do this in tests, where you're trying to create erroneous value. And make sure that when it flows through your code, it's caught at runtime, the way that you would expect unexpected values to be caught, but this is funky code, to be sure.

And this is why it's dangerous to do casting here where TypeScript is perfectly happy to let us use a method that's only available on dates, certainly not on strings. And at runtime, this will, of course, blow up. It's cannot call to ISO string on type string, you'll get some error like that.

Cody in chat asks, is there a reason to cast to any versus unknown? Unknown as another top type, which we'll talk about in the intermediate course. All you need to know is that it's a top type. For this technique, that's the only thing that matters. There is no benefit to using one over the other, you just must use a top type.

You can always cast to a top type and then back down, and there are some benefits to using unknown which we'll explain later. But it's not gonna come through here, they're both equal. They're both equivalent, cuz eventually, it's coming back down to a date anyway.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now