Typing Function Components with Children

skube — Thu, 17 Nov 2022 18:15:56 +0000

Typing Function Components while using children has changed since React 18+.

Previous to React 18, FC included children.

Now, the types for FC do not include children.

// @types/react
type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
  (props: P, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P> | undefined;
  contextTypes?: ValidationMap<any> | undefined;
  defaultProps?: Partial<P> | undefined;
  displayName?: string | undefined;
}

Instead, one can use PropsWithChilden as a shortcut to specifying children type for your Function.

// @types/react
type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };

Examples

import { FC, PropsWithChildren, ReactNode } from 'react';

// Arrow function: explicitly typing children
type PropsA = {
  children: ReactNode;
};
export const A = ({ children }: PropsA): JSX.Element => <>{children}</>;

// Arrow function (shortcut)
type PropsB = FC<PropsWithChildren<Record<string, unknown>>>;
export const B: PropsB = ({ children }) => <>{children}</>;

// Named function (explicitly)
type PropsC = {
  children: ReactNode;
};
export function C({ children }: PropsC): JSX.Element {
  return <>{children}</>;
}

// Named function (shortcut)
export function D({
  children,
}: PropsWithChildren<Record<string, unknown>>): JSX.Element {
  return <>{children}</>;
}

A 'simple' TypeScript example

skube — Sun, 22 Sep 2019 17:22:20 +0000

When learning TypeScript it can seem verbose and confusing—if applied to the extreme. Take for instance a simple add function...

In JavaScript:

function add(x, y) { 
  return x + y;
};

// or as function expression
let add = function (x, y) {
  return x + y;
};

// or with ES6 fat-arrow
let add = (x, y) => x + y;

In TypeScript, one could define types in several ways:

function add(x: number, y: number): number { 
  return x + y;
};


// or as function expression (type inferred on the _left_ operand)
let add = function (x: number, y: number): number {
  return x + y;
};

// or as function expression (type inferred on the _right_ operand)
let add: (x: number, y: number) => number = function (x, y) {
  return x + y;
};

// or as function expression (explicitly and somewhat redundantly)
let add: (x: number, y: number) => number = function (x: number, y: number): number {
  return x + y;
};


// or with ES6 fat-arrow (inference on left)
let add = (x: number, y: number): number => x + y;

// or with ES6 fat-arrow (inference on right)
let add: (x: number, y: number) => number = (x, y) => x + y;

// or with ES6 fat-arrow (😳)
let add: (x: number, y: number) => number = (x: number, y: number): number => x + y;

Yikes! And that's with a really simple, pure function!

But really, we could narrow the types (by using const) and also let TS infer as much as possible:

function add(x: number, y: number) { 
  return x + y;
};
// Inferred type is function add(x: number, y: number): number


const add = (x: number, y: number) => x + y;
// Inferred type is let add: (x: number, y: number) => number

All the same type safety, but with minimal verbosity! FTW.

DEV Community: skube

Typing Function Components with Children

Examples

A 'simple' TypeScript example