TypeScript Syntax: Variables & Functions

[00:00:00]
>> Anjana Vakil: Enough about JavaScript Let's talk about TypeScript So we said that TypeScript has more syntax than JavaScript Let's start digging into what that is and what it looks like when we write TypeScript code as opposed to JavaScript code And there's a whole bunch of words and language terms like computer science terms and keywords that we have in TypeScript that we don't have in JavaScript that we're going to be looking at and wrapping our heads around gradually as we go

[00:00:41]
So what we're going to do now is we're going to start moving in our workflows from JavaScript to actual TypeScript code So we're going to meet some new syntax, we're going to meet some new ideas and concepts and things that don't exist in JavaScript, because again, TypeScript adds a bunch of stuff We're going to figure out how to type our code, meaning how do we specify exactly which types we want variables to have, we want functions to take in as arguments or return as return values, and how do we start using types and manipulating them, composing and putting them together, customizing them for our code that we're trying to write

[00:01:39]
How we doing Ready to start writing some TypeScript I see some thumbs up Hopefully there's some equivalent of thumbs ups in the chat or a thumbs up emoji So let's go We're going to talk about type annotations, and type annotations are how in TypeScript we type all of the values, type all the things I guess this meme is super old by now, but I'm also super old, so all of my memes will be old

[00:02:13]
Get used to it So when we talk about TypeScript, we're usually having in mind like JavaScript with specified types, and that is exactly what we're going to start articulating by using what TypeScript refers to as type annotations So unlike in JavaScript where, as we said, we have dynamic types, so a variable can take on different types throughout its lifetime

[00:02:48]
It can change throughout our program In TypeScript we have a way of making sure that a variable always has a certain type of value So for example, if I'm declaring a variable n, in JavaScript, as long as it's a let, would not care if I change that from a number to a string or something completely different But we want the language to care

[00:03:24]
So in TypeScript, we can add a type annotation to a variable declaration with a colon and then the name of a type Now in this case, we're using a primitive type, we'll talk about this later, but this is the type that we've probably also seen in JavaScript, Number And it, perhaps not surprisingly, is going to tell TypeScript, hey, this variable n, it must always be a number

[00:03:56]
And that means if I change, it's still a let, it's still a flexible variable If I change the value, but it's a number, that's OK, that's not a problem as far as TypeScript is concerned But unlike JavaScript, TypeScript does care if we try to make it a string or an object or an empty array or whatever because we told it that it was supposed to be a number

[00:04:22]
So I'm just going to copy this to the playground And so here we can see just as there's a quick and easy way to see that Unlike JavaScript on line 3, TypeScript gives us an error It says this value, which is a string, is not assignable to a variable that's supposed to always be a number And how did it know that it's supposed to always be a number from this colon number right here

[00:04:53]
And likewise, we could do the same thing with different types, like a string variable In this case, I'm also passing in, it's another primitive type in JavaScript, which also works in TypeScript, so a string And now, S is going to always and forever have to be a string value, and we will get a similar error if we try to make it null or empty object or whatever

[00:05:27]
So this is how we annotate or type variables in TypeScript Colon type name Well, colon space type name OK Now what's interesting is that we can even give a variable a type before we've given it a value So for example, with let, we don't have to initialize the variable with a beginning value We can just declare a variable, and in TypeScript, we can declare the variable and its type

[00:06:04]
And then once it becomes time to give a value to this variable, a number value will work great, but anything else will not That will raise an error So this can be a useful way to make sure, for example, if you're planning to populate a variable later, to make sure that you're not accidentally populating it with the completely wrong thing because JavaScript doesn't care, but TypeScript does

[00:06:41]
And again, same syntax OK Now, I mentioned that we are using here these names of these types These are primitive types that are common between JavaScript and TypeScript So all JavaScript is TypeScript, and so in JavaScript we have a bunch of primitive types like number, string, boolean, undefined, null, etc There's a few more, but we don't need to worry about that right now

[00:07:13]
And we can use any of these types in our TypeScript code to type our variables with the particular type that we want And so, again, we have that same syntax, but here we're starting to see like, there's lots of different types that we can put after that colon, depending on what we are trying to do in our program And so the primitive types were great as TypeScript types

[00:07:47]
Now, interestingly, in TypeScript, we can also have what's called a literal type And this is where we're telling TypeScript it has to be this literal value Now, this is a little bit of a sneak preview, that pipe operator, we're going to talk about what that does, but for now, let's understand it as an or like in JavaScript, sort of And this is saying, OK, the state variable, which doesn't have a value yet, it has to have either the literal value alive or the literal value dead

[00:08:29]
Like those are the only possible states So, if I assign it alive, no problem If I assign it dead, no problem But if I assign it any other string that is not the literal string alive or the literal string dead, like, for example, thriving No, does not exist, not a state of nature And so sometimes this can be useful for example, when you know that a value has to be even more specific than one of these primitive types like, for example, a set of error messages that you might get or a set of valid values, valid numbers that can't be floats and need to be integers or what have you

[00:09:21]
So we can use literal types to be even more strenuous and constricting the values of our variables Now, so far we've just been talking about how to annotate or add types to variables, but the same basic principle of this colon type name can also be used to add types to function parameters Where here, for example, we're going to add A and B, and normally it would just be add A comma B

[00:09:55]
But now we can tell TypeScript specifically that the inputs to this function need to be numbers And we do that by adding the same syntax for the type annotation to each of the parameters that are essentially variables that we get to work with then later within the body of the function And similarly, we can tell TypeScript what a function should return by annotating with that same syntax, colon type name after the parentheses around the parameters

[00:10:42]
So, within the function signature, we can add types for both the inputs and the output of the function So, for example, our pesky little plus operator We might want to constrain in this function to make sure that we're either adding a number and a number and getting a number Or we could define a different function, and the same syntax works with arrow functions here

[00:11:09]
We could define another function that's like similar, same function body, but totally different use where we're actually trying to concatenate strings and say, hey, and this time we're doing the exact same annotation, I mean different types, but similar syntax But this is an example of using it in an arrow function, same difference We can type our parameters and say both of them need to be strings, and we can type the return value and say that needs to be a string too

[00:11:50]
And so now we can copy this into the playground Now, if I try to do other things than what I have told TypeScript I want to do in here Like, for example, if I try to add one and one I finally get an error instead of type coercion And so here, the error that we get is going to say, hey, you passed in the argument, string of one But the parameter has type number

[00:12:25]
So that doesn't work And similarly for our cat function Just to show that the syntax works regardless of how you're defining these functions Same deal We're going to now be able to stop JavaScript from doing things like making this a string of 4 or something Do we have any questions so far on these colons and type names A little unclear on how the literal types work

[00:13:01]
Is that something you have to define and then it's made of the composition of primitive types or like what defines what a literal type is Good question So the literal type is literally the actual value, so if I say let 5 be a number and I assign it 5 Cool, then later I can assign 5 to 6, and that's also cool But maybe we don't want that

[00:13:47]
Maybe we want this to always be this particular number And that's where if instead of the type that represents all possible number values, number If we pass in an actual literal type Here And I try to assign it to something else It's going to see that string of 4 here Or I guess it can be a number as well As the type itself So now, so instead of saying, OK, number here is telling me that 5 can be any number

[00:14:41]
When I say 4 is the type of 4 is the actual number 4 And then I try to assign any other number or something else to it I will get what happened here I will get an error And so that's why, we're distinguishing between a primitive type which can include a lot of values and a literal type which is literally just that one value And what we saw earlier with the kind of or thing that we were talking about is something we're going to understand more deeply later

[00:15:12]
Is it conceptually similar to a boolean where it's like, is it the specific objects or not or I'm just trying to understand when you would use that versus other log Yeah, no, it's a good question We can look at a couple of examples later in the where we're going to have things like, for example, you might want to say, let the element ID that I'm looking for, the, I don't know, my element

[00:15:44]
Let's say, and then later, if my coworker or somewhere else in the codebase tries to set the element ID to like your element And that would break my code because there is no such ID in my DOM, in my HTML A literal type can help catch that kind of thing That's just one use case, but there are a few other places where it'll pop up as useful