Add Types to Promises

[00:00:00]
>> Anjana Vakil: Another fancy thing that we get to do now in JavaScript is write asynchronous code with promises and whatnot So if you have a function called wave, and it has the function body return, the string, emoji wave, whatever, the return type of that function is unsurprisingly a string However, and perhaps this has bit us before, it certainly has me Sometimes it's easy to forget that when you have an async function and it has the exact same function body, we don't get a string back

[00:00:46]
We get a promise, something that we can await And so you will see this type, this is a built-in type because it's a JavaScript thing that TypeScript knows about: promise And then you'll see these angle brackets And we're going to talk more about them, but inside of the angle brackets is the thing that is promised, the type of the thing that is promised So where we had a synchronous function returning a string, we have an asynchronous function returning a promise to a string

[00:01:17]
This kind of thing where, you know, I forgot to await the .json on my response or whatever, definitely never happened to me in production This type of thing is going to require us to differentiate a promised string from an already there string And so, if we have a wave string that's the return value of wave, and a wave promise that is the return value without awaiting, calling this function, wave string has a length, no problem

[00:01:54]
But wave promise gives me a squiggle because property length does not exist on type promise string, and then very passive aggressively TypeScript asks me, did you forget to use await, my dear Perhaps you meant to await this value And sure enough, I did, except top level Okay, that's some settings, but anyway, point being, it is an important type that you'll see a lot of, especially in asynchronous code that's like loading data and whatnot

[00:02:30]
We have now sneakily looked at a new feature of fancy types that we hadn't seen a lot of before, although we had seen it a little bit in some type hints and some hoverings that we saw in our editor And that is those angle brackets What those are doing is essentially passing, it's we think of them as a parameter to a type So type parameter, or we, you sometimes hear like parameterized types used

[00:03:01]
Point is, a promise is not just in and of itself a useful thing, a useful type It has to be a promise to some kind of value So we could have a promise of a number, which we know needs to always, if we await it or we resolve it, have a number as its ultimate unwrapped value, or a string Likewise, but if we declare something to be a promise of a number and then we actually try to assign it to a promise of something else, TypeScript knows that

[00:03:47]
So it's not just like, is this synchronous, is this asynchronous It's not just like one promise to rule them all We can have specific subtypes of promise by passing in another type as the parameter So it's almost like we're sort of creating these types as we go The promise type itself doesn't know what kind of thing I'm going to promise as the output is going to come out

[00:04:16]
And that's why we have to specify it, and the syntax for doing so, for passing in a parameter to a certain kind of type we're about to talk about, is those angle brackets Let's copy this into the playground just so that I can prove I'm not lying And so here, the error that we get is indeed that promise is not like a promise is not a promise is not a promise, all things created equal

[00:04:50]
A promise of null, which is what you gave me, is not assignable to a variable that you told me was supposed to be a promise of a number So even though I haven't actually like pulled the values out yet, TypeScript knows what it's going to be once the promise comes back.