This course has been updated! We now recommend you take the TypeScript Fundamentals, v3 course.
Transcript from the "Explicit Typing" Lesson
[00:00:00]
>> Mike North: If we did want to provide TypeScript within explicit indication of what type this is, we could provide what is called a type annotation. And you'll see here, after the name of the variable we have a colon and then the type of the variable. So you'll see that convention over and over and over again.
[00:00:19] You'll get used to seeing that very quickly. This can be used anywhere variables declared, anywhere a function parameters is defined. We'll see it in a bunch of places. So in some situations we run into cases where the type that something returns is not what we're interested in, and to get around that, we perform what is called casting.
[00:00:47] This is a form of explicitly converting something from one type to another. You're basically telling typed script, hey, I'm the developer I know what I'm doing. In this case, because querySelector has the potential to return metatags and image tags, and dibs, and spans, and inputs, the type that it actually returns is just element.
[00:01:10] But we know based on the argument we passed in, this is definitely going to be, it'll be either undefined or a html input element. It's going to be one or the other. We can say, treat this as an html input element. I know that's what I'm getting at.
[00:01:34]
>> Mike North: So. What we have on top here this is the advised way to do it, to use this as keyword. Down low you'll see this alternate way of casting. This as the advised way for a long time, but as soon as JSX started becoming popular and if you've been working with React at all.
[00:01:54] You may see that this could be interpreted as something else in the React world. So that's why we have this, that's why the best practice has changed to this as secured. You do still see the bottom one in some cases.
>> Mike North: So when we start working with functions, you get those type annotations just as we did when we were defining the types of variables.
[00:02:22] You see we've got argument types here, and we've got a return type. And we're saying the log in function takes in the user's name and the password, both strings, and the return type is the user. Now we can also have an arrow function style of defining a function, and it is basically the same.
[00:02:40] Just note that the arrow comes after the return type.