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.

import React, { StatelessComponent, SFC } from "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.

import React, { FunctionComponent } from "react";

interface Props {

  title: string;

}

export const Listings = ({ title }: Props) => {

  return <h2>{title}</h2>;

};

export const Listings2: FunctionComponent = ({ title }: Props) => {

  return <h2>{title}</h2>;

};

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).

// from the react type definitions file

interface FunctionComponent<P = {}> {

  (props: PropsWithChildren<P>, context?: any): ReactElement | null;

  propTypes?: WeakValidationMap<P>;

  contextTypes?: ValidationMap<any>;

  defaultProps?: Partial<P>;

  displayName?: string;

}

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.

// from the react type definitions file

type PropsWithChildren<P> = P & { children?: ReactNode };