How do I write React Functional Component + TypeScript's function overloading?

Question

I know how to write React Functional Component and TypeScript + function overloading.

But when these two are combined together, I am confused!

Here is a minimum code example to illustrate what I want to do:

import React, { FunctionComponent } from 'react';

type PropType1 = { type: 'type1'; name: string };
type PropType2 = { type: 'type2'; age: number };

// How do I properly hook FunctionComponent + PropType1 + PropType2?
// It's called FunctionComponent right?

function Example({ type, name, age }) {
  if (name === undefined) {
    return (
      <div>
        {type}, {age}
      </div>
    );
  } else {
    return (
      <div>
        {type}, {name}
      </div>
    );
  }
}


export default Example

This example's usage should look like this:

<Example type="type1" name="Joseph"/>
// => <div> type1, Joseph </div>

<Example type="type2" age={18}/>
// => <div> type2, 18 </div>

<Example type="type3" name="Joseph" age={18}/>
// => Compile Error!

How do I properly hook FunctionComponent + PropType1 + PropType2?

And, it's called FunctionComponent right?

Ivan · Accepted Answer · 2019-05-20 04:36:31Z

2

You can try Union Types and check the props type in component.

import React, { FunctionComponent } from 'react';

type PropType1 = { type: 'type1'; name: string };
type PropType2 = { type: 'type2'; age: number };

function Example(props: PropType1 | PropType2) {
  if (props.type === 'type1') {
    return (
      <div>
        {props.type}, {props.name}
      </div>
    );
  } else {
    return (
      <div>
        {props.type}, {props.age}
      </div>
    );
  }
}

export default Example;

Usage

<Example type="type1" name="Joseph"/>
// => <div> type1, Joseph </div>

<Example type="type2" age={18}/>
// => <div> type2, 18 </div>

<Example type="type3" name="Joseph" age={18}/>
// => Compile Error: Type '"type3"' is not assignable to type '"type1" | "type2"'

<Example type="type1" age={18}/>
// => Compile Error

Demo

answered May 20, 2019 at 4:36

Ivan

214 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joseph Over a year ago

That seems working! Thank you, I will wait a few more seconds if there are actually function overloading implementation solution.

Jason Li · Accepted Answer · 2019-05-20 05:18:18Z

2

Try to use FC, functional component, with Union Type.

FC type provides some extra properties, e.g. displayName, defaultProps and so on, to make your functional component more type safe.

Union type can provide similar functionality of function overloading. It limits the combination of properties, which choice either PropType1 or PropType2

const Example: FC<PropType1 | PropType2> = (props) => {
  if (props.type === 'type1') {
    return (
      <div>
        {props.type}, {props.name}
      </div>
    );
  } else {
    return (
      <div>
        {props.type}, {props.age}
      </div>
    );
  }
}

answered May 20, 2019 at 5:18

Jason Li

213 bronze badges

Comments

Joseph · Accepted Answer · 2019-05-20 06:19:21Z

2

I solved it by myself

import React, {
    PropsWithChildren,
    ReactElement
} from 'react';

type PropType1 = { type: 'type1'; name: string };
type PropType2 = { type: 'type2'; age: number };

function Example(props: PropsWithChildren<PropType1>): ReactElement | null;
function Example(props: PropsWithChildren<PropType2>): ReactElement | null;

function Example(props: {
  type: 'type1' | 'type2';
  name?: string;
  age?: number
}) {

  const {type, name, age} = props

  if (name === undefined) {
    return (
      <div>
        {type}, {age}
      </div>
    );
  } else {
    return (
      <div>
        {type}, {name}
      </div>
    );
  }
}


export default Example

answered May 20, 2019 at 6:19

Joseph

4,8358 gold badges40 silver badges81 bronze badges

Collectives™ on Stack Overflow

How do I write React Functional Component + TypeScript's function overloading?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related