This video is available to students only

An Intro to React Functional Components With TypeScript

In this lesson, we'll investigate the FunctionComponent interface type React provides and address the type checking capabilities it provides when assigned to functional components.

Functional Components & TypeScript#

šŸ“ This lesson's quiz can be found - here.
šŸ—’ļø Solutions for this lesson's quiz can be found - here.

Though TypeScript infers that the <Listings> component is a function that renders JSX (i.e. a functional component), we can take an additional step to specify an explicit type of the function component itself.

React offers specific unique types we can use if we want to enforce additional type definitions for functional components.

Previously, functional components were recognized to be stateless presentational components since functional components could never keep track of its own state. As a result, we would be able to define a functional component with the SFC type or the StatelessComponent type which still exists today and can be exported from the type definitions of react.

Though they exist, React has deprecated the StatelessComponent and SFC types. This is because functional components can now keep track of its own state with the emergence of React Hooks.

The FunctionComponent type (or the shorthand version FC) is encouraged if we intend to take advantage of additional typings of our functional components.

To visualize the difference the FunctionComponent type brings, we'll replicate the <Listings> component with another component we'll label <Listings2>. We'll define the type of the <Listings2> component as the FunctionComponent interface type.

We'll see a TypeScript error emerge from the <Listings2> component where it states that the title property is missing as part of the Props type of the component.

If we take a look at the FunctionComponent interface type, we'll get a clearer understanding of why this error occurs. The FunctionComponent type is an interface that accepts a couple of properties. The first and only required property is a function that accepts props and returns a ReactElement (or null).

In VSCode, the CMD + Click shortcut allows you to navigate and inspect the type definitions of interfaces and type aliases being used.

The FunctionComponent is a generic that accepts a type variable denoted with the letter P that has a default value of an empty object type. Though the FunctionComponent interface doesn't require the P type variable to be defined, it passes the P type variable to the PropsWithChildren type used for the props argument of the first function property.

When we take a look at the PropsWithChildren type in our React type definitions file, we can see that PropsWithChildren is a type alias that accepts a type variable (P) and combines the P type variable with a new object type that has a children property. The capability of combining multiple types into one is a TypeScript capability known as intersection types.

Start a new discussion. All notification go to the author.