Check out a free preview of the full React and TypeScript course:
The "Common Types" Lesson is part of the full, React and TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Steve discusses the common prop types found in TypeScript including primitives, defining arrays, objects, IDs, keys, methods, and optional props. How to create a custom type is also covered in this segment.

Get Unlimited Access Now

Transcript from the "Common Types" Lesson

[00:00:01]
>> We saw string here, that's great, we might also wanna see what some of the other common ones are. So what are some of the other common types that we might seek to use in a react application? And what kinda build on this as the day goes on.

[00:00:19] So commonly used props, we can see we've got this counter props, right? We saw the name as a string incident could be a string, count could be a number, all the primitives in JavaScript are available to us in TypeScript as well. If you wanna do an array, there's a few different ways to tell it was stick with this one which is you have, whatever type it is.

[00:00:43] And you'd use the brackets scale that we see in arrays. And what's interesting is, with all the dynamic programming languages, one of the first examples are, and check it out. You can put anything you want in an array, you're gonna write a string and then a number, and then something else, right?

[00:01:00] Generally speaking, if you whatever map over an array, that's not super helpful. So you could say that an array can have either strings and numbers in it. You can just say that it has an array of anything or arrays that are certain object or shape along those lines.

[00:01:12] But generally speaking, we can say that, hey, not only is this an array, what is an array that should only consist of strings? That way if somebody accidentally tries to put undefined in that array or no, or a primitive that we weren't expecting. TypeScript will catch that for us and be, whoa, I don't think this is what you wanted to do and that's helpful as well.

[00:01:31] The other thing we can see is before we set the name was a string, any string, right? Because, there's lots of names but there are cases where we kind of want one of a few different statuses, right? We want not just any string, but maybe we're making a button for our component library and that button should either be a primary button, a secondary button or destructive button.

[00:01:51] Right or disable button what have you, right? In that case, you might also define which one of these statuses along with. Now, yeah, status is a string, but it's only one of three strings in existence, if you're not using that string, you're not passing it in. So for objects, generally speaking, you look kind of that another object is just an empty object that's just as long as there's some kind of object, we can work with it.

[00:02:16] But a lot of cases you might want to define the shape of an object, right, cool. We're gonna pass in a prop that's an item, it should have an ID, that's a string and a title, that's a string. One of the interesting things about TypeScript as opposed to some other typed languages is TypeScript uses what's called structural typing.

[00:02:32] Which is, as long as it's an object that conforms to the shape that we're expecting, we should be good to go, you don't have to necessarily define every single type. TypeScript will mostly try to figure it out because JavaScript itself allows you to do pretty dynamic programming. TypeScript tries to look at the structure of stuff rather than the name or anything along those lines.

[00:02:53] So an item is just simply a JavaScript object in this case that has an ID and a title. Items plural, will be an array and in which case we can define the shape of it. This was looking like this makes you sad, that's probably a good feeling that you should nurture and respect because we could theoretically pull that out into its own type, right?

[00:03:15] TypeScript doesn't enforce it, everything has a type associated with it. You wanted to find is just an object and has a type ID and a title, cool, but you could also pull that item out into its own type. So now a single item is of the type item, and items floral is an array of items, you can begin to kinda refactor your code if things get a little crazy.

[00:03:35] All right, some other ones that we might see along the way, which is. Listen, this item might have any kinda keys, but those keys have to be strings and the value should be an item. Or if we wanna say that the key is a number and the value is a string, we can define all those things as well.

[00:03:52] This is another syntax for doing it that I don't use. Alright, and terms of methods and stuff along those lines, you can kinda see towards the bottom, there was a common one that you might say, which is what are your mistakes? What types of those arguments, which is a little bit different than JavaScript.

[00:04:11] I know you define three arguments can give me zero, you can give me eight, I don't really care. Typescript's a little bit more, listen, if you said, we're gonna pass in an ID and it's gonna be a number, that's what I wanna see. And if it returns undefined, a lot of times we say that it returns void, if it doesn't return anything, or if we intentionally return undefined will say void.

[00:04:31] So stuff like event handlers and stuff that don't return anything, they just execute. So those would return void, and you can also see that react comes with a whole bunch of TypeScript definitions for common things that you might see. So if you look at this bottom one here, we've got React.MouseEvent with this HTML button element because just to make sure that you're earning your salary.

[00:04:52] We all know that events are not the same, some of them have a target with a value and stuff along those, every keyboard events have different properties and mouse events, so on and so forth. So in order for TypeScript to help you a lot of times it needs to know what event you're intending this to be.

[00:05:08] So, doesn't have a key code or what not, depending on the type of event. So we will come with a lot of the definitions necessary, so if you know this is onclick handler on a button, you can be, okay, cool. It's gonna be a mouse event from HTML button, right?

[00:05:23] And then TypeScript, all right, cool, I know what's on that event. Let me autocomplete let me make sure you don't misspell event.target or something along those lines because TypeScript you're trying to solve save you from two things. One is, logical mistakes but let's be really honest with ourselves most of bugs in my code are, I misspelled something and then I don't know what I misspelled.

[00:05:49] And then I lose the better part of my morning and possibly the first half of my afternoon to find out that I misspelled an action type in Redux. Maybe you're better than me, I don't know, that's my life, that's how it works, all right? If there's a return value, and we wanna define it, we just saw ones that we won't have a type that had a method or something along those lines.

[00:06:11] If we wanna just define what a function does in line, we can say okay a and b should be numbers and the return type here is a number you see after that colon. One of the things we're gonna see and I want you to kinda look out for it as we write some code together a little bit.

[00:06:25] Is that if a and b are a number and you're returning a+b, you can even omit the return type, because TypeScript would be, if you give me two numbers and you return them added together. I'm smart I can figure out that a number plus a number is a number.

[00:06:43] You'll only need to tell TypeScript about the types if it can't figure it out itself for some reason, most of the time, if it can figure it out, you can omit tons of this stuff. It'll be the same way when we saw that original name tag was, this is a function that takes no arguments returns a JSX element.

[00:07:00] Why, cuz he returned some JSX and it figured all that out for you. Optional props, which we'll see in a little bit If you just put a question mark, and so we have required prop, which is a boolean, then we have optional prop. Optional prop is one that we could have or could not have.

[00:07:16] Now, the interesting thing about that is TypeScript is also gonna try to save you from yourself, right. In so far, if you say that a property is optional in a react component, and then you try to use it, TypeScript is gonna get a little annoyed with you. And it's gonna say basically, hey, that could be undefined and you didn't check yet, right.

[00:07:36] And so it is going to insist that you check if something is undefined before you use it in the react component. There are other all sorts of stuff, we'll get into some of it in a little bit. But that is enough that you need to know to be dangerous to build some react components.