So before we start converting components in our app, I wanted to go over the basic primitive types that we're going to be seeing a lot in an isolated place. So you understood how TypeScript worked at a base level, and then we can sort of move into the components. So a big difference between something like PHP and TypeScript is that in TypeScript you can enforce the type of a variable. You can say this variable has to be a string, it has to be a number, it has to be a Boolean,

You can say this variable has to be a string, it has to be a number, it has to be a Boolean, and it can't be anything else. I'm gonna throw an error. If we try to do anything else in PHP, we don't really have that. So if we said things equal, okay, and then we said things equals one, that's okay. PHP doesn't care. We can't specify the type of things, right? So in TypeScript you can actually do that.

of things, right? So in TypeScript you can actually do that. You can say Const first name, and you can specify this has to be a string. So we can say Bob, and then you say cons, age. This has to be a number and the number is 40. Cons. Retired has to be a Boolean, and this is false. And now if I said, uh, even if these were lets, instead of cons, if I tried to say first name equals one, it's gonna yell at me, it's a number.

of cons, if I tried to say first name equals one, it's gonna yell at me, it's a number. You can't assign that to a string. So you can be as strict as you want here. Now a good rule of thumb is I wouldn't actually do this unless you absolutely need to be that type, right? I wouldn't actually write this type out in TypeScript. This is more for the example. If you do this, it still infers that it's a string. TypeScript has pretty good inference

If you do this, it still infers that it's a string. TypeScript has pretty good inference and even if you try to then reassign this here, it'll still bark at you unless you specify that it can be a string or a number. So for the purposes of this demo, we are gonna be strongly typing everything, but you can rely on inference a lot in TypeScript. And I would only add types when it feels necessary or when you want to establish a contract for that type.

And I would only add types when it feels necessary or when you want to establish a contract for that type. What about a raise? If we have const friends and we specified that this is an array of strings, you could say Linda, Jean Louise, Tina, right? So now we've got an array of strings for friends. And if you try to add something like a one in here, it'll tell you that's not a string, that's not allowed. Again, if you remove this inference will work just fine.

it'll tell you that's not a string, that's not allowed. Again, if you remove this inference will work just fine. It'll specify that it's an array of strings, but if you want to ensure that it's an array of strings, you can specify it that way. You can also use arrays like this. This is also valid, but I prefer the bracket syntax myself. I like the the square brackets. Let's talk about objects. If you know the properties of your object,

I like the the square brackets. Let's talk about objects. If you know the properties of your object, you can specify the type very easily. You can say constant job. And it has a title property that has to be a string, and it has a description property that also has to be a string. And then you can set it here and you can say title, and you get some nice auto complete because it knows what properties it's looking for.

and you get some nice auto complete because it knows what properties it's looking for. You can say Burger chef, and then we could say description, say Cooks, burgers. Great. And now if you try to add anything else here, it'll yell at you because it says we don't know about that type. But what happens when you know something is an object, but you don't know anything but the shape of the object? You know what the key type is

but you don't know anything but the shape of the object? You know what the key type is and you know what the value type is, but you don't know what the actual keys or values might be. Well, you can specify it as a record and you can say the key has to be a string and the value has to be a string. And now this is fine. And if you add another property here, this is also fine because it's a a, a string and a string.

And if you add another property here, this is also fine because it's a a, a string and a string. But if you do this, it'll yell at you because number is not assignable to string. You're saying the key has to be a string and the value has to be a string. Great. Now what if you have an array of objects? Well, you can literally just make it an array and now you can specify this array and you're good to go. So now it knows it's supposed to be an array

and now you can specify this array and you're good to go. So now it knows it's supposed to be an array of these objects. TypeScript is pretty cool. Now the last thing I wanna talk about are functions and generics. Okay, let's define a function in JavaScript. It's gonna be very simple. Const first item equals, and we're going to have an array of items,

Const first item equals, and we're going to have an array of items, and we are going to return the first item easy enough. So you pass it an array of something. You just returned the first item from the array. Now you can see that we have red here. Parameters, item implicitly has any type, we haven't specified the type. Our Ts config says we cannot have an implicitly any type, something that is implicitly any meaning like mixed.

Our Ts config says we cannot have an implicitly any type, something that is implicitly any meaning like mixed. We don't know what that actually is. So we can specify that it's any, you can say anything in this array, that's fine. And so we can say cons item equals first item, and we say 1, 2, 3, and we can see what it is and it says any which isn't that useful. We actually know it's gonna be a number. So we could do this. We could say we specify numbers, right?

We actually know it's gonna be a number. So we could do this. We could say we specify numbers, right? And so now we know that what we're getting returned is a number. It's smart enough to figure that out. But what if we wanna make this more flexible? What if we wanted to say, Joe? Well now this is not a very flexible function and this is where generics come in. Now we're already slightly familiar with generics in PHP.

and this is where generics come in. Now we're already slightly familiar with generics in PHP. We kind of have them if we go into the collection. This if a generic, you're specifying the key, you're specifying the value and the value. And then you can sort of use them as placeholders for other method. Method returns throughout, say the collection class for Laravel. TypeScript has first class generic support.

for Laravel. TypeScript has first class generic support. So you can make this function way more flexible very easily. So we're gonna define a placeholder here, which is gonna be T. And this is just a placeholder for future use. We're gonna say that we are going to get T as an array. So whatever, whatever comes through now is filling that placeholder, whatever the values are of that. And we're going to actually return T.

that placeholder, whatever the values are of that. And we're going to actually return T. So we're establishing a placeholder. We're saying we're gonna get an array of that placeholder and we're, and the return type is going to be whatever type that placeholder is. So implicitly that means that now we get string and if I do a one, we get number. And if I say true, we get Boolean and we can even mix this. So now we can either get a number

And if I say true, we get Boolean and we can even mix this. So now we can either get a number or a Boolean depending on what comes through. This is fine. This is inference. So it's inferring that placeholder from the contents of the array, which is pretty cool. It's a pretty cool trick that TypeScript has. If you want to be really specific about it and you wanna say, actually, I want to establish that Boolean should be the thing that's returned now.

and you wanna say, actually, I want to establish that Boolean should be the thing that's returned now. Uh, it'll say number is not a sign. So this is now an invalid member of the array, but these are all fine. And now you know that Boolean is gonna come back. So that's functions and generics in TypeScript. Let's keep going.