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
.
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 };
This page is a preview of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL