How to Define React TypeScript Props

[00:00 - 00:26] As we continue to build the client portion, we'll continue to have the browser on the right hand side since we'll very rarely have the need to actually go to the terminal. With that being said, as long as we are actually building our code, we'll safely assume that our Webpack server is running only until we explicitly state that we want to exit it or restart it and if we ever need to install any new packages, we'll head to the terminal to do so.

[00:27 - 00:35] We've mentioned this before but to reiterate, there are two main types of components in React. One being class components and the other being functional components.

[00:36 - 00:51] Functional components in React are functions that can accept props and return JSX. In our listings component here, we can see that listings doesn't receive props but returns JSX, which makes it a valid functional component.

[00:52 - 01:03] With that said, let's attempt to have this component now receive some props. We'll assume that this tiny house listings title should be information given to this component from the parents.

[01:04 - 01:20] The parent in this context is the root index file. In the index file where listings is being rendered, we'll pass in a new prop labeled title and give the prop a string value of tiny house listings.

[01:21 - 01:32] Notice how TypeScript throws an error when we save our file? It essentially complained since we haven't typed a file and stated that the listings component expects either props or the title prop.

[01:33 - 01:49] In our listings components, we'll specify that props is being passed down and the title field from props is being used in the header tag. Going back to the index file, we can see that the linting error here is gone since the component now expects some props.

[01:50 - 02:05] So this should work, we get an error in the listings component that says that the props argument has an implicit any type. So we could be explicit and type defined props with a particular type just like we type defined any function arguments.

[02:06 - 02:14] We've set it to the generic any type which tells the compiler the type our props is now explicitly defined which removes the error we just saw. So our app now works.

[02:15 - 02:24] However, any isn't really useful. So let's type defined props as an object that expects a title field of type string.

[02:25 - 02:31] Our application now works and it's more explicitly defined. Assume a component has a large number of props.

[02:32 - 02:41] Specifying the type of props right where the argument is being defined can make things a little hard to read. So we can describe the shape of our props data as an interface above the components.

[02:42 - 02:53] We'll call this interface props. With the interface defined, we're now able to specify the type of our props with this newly created interface.

[02:54 - 03:02] Everything works as intended now. We can also go ahead and also destruct the title prop directly from the props argument.

[03:03 - 03:16] Now when we hover over the declaration of the listings components, we can see the definition is a function that accepts props and returns a JSX element. In essence, the simplest TypeScript definition of a functional component.

[03:17 - 03:22] Our UI still behaves the same since our component renders the same text despite it coming from props.