React & TypeScript: Functional Components that Are Not Arrow Functions

Question

I am trying to learn how to use Typescript with react and I understand that I can create the following using typescript:

import { FC } from 'react'

interface ChildProps {
  color: string
}

const Child: FC<ChildProps> = ({color}) => {
  return <div>{color}</div>
}

What I want to know is how can I do this with a "traditional" function. I.e., something like this:

function Child: FC<ChildProps>({color}) {
  return <div>{color}</div>
}

Now, this does NOT work. I get errors. For example here is one error that I get:

What I am wondering is how is it possible to reproduce this using a traditional js function? If so, how?

Any ideas?

Thanks.

axtck · Accepted Answer · 2021-06-13 19:53:30Z

2

React.FC types a function. That’s in its name, function component. Function types are really hard to apply to regularly named functions.

If we don’t type functions, but rather its properties, we can use any form of functions to achieve our goal.

interface ChildProps {
  color: string;
}

function Child({ color }: ChildProps) {
  return <div>{color}</div>;
}

Otherwise go with

import { FC } from 'react'

interface ChildProps {
  color: string
}

const Child: FC<ChildProps> = ({color}) => {
  return <div>{color}</div>
}

2 Comments

Moshe Over a year ago

Thanks, that's what I needed to know. If I can just make one suggestion -- I would edit your comment to say that that we CANNOT apply function types to regularly named functions (not that it is hard to do so). That, at least, is what I understand from the article that you linked to. Either way, thanks for your help.

j1mbl3s Over a year ago

@Moshe Remember that types in TypeScript are structural and not nominal. This means that any value that satisfies some type constraints can be assigned interchangeably. In practice, a function defined function x(...args: P[]): R { /* ... */ } can be used where a type of (...args: P[]) => R is expected. Using utility types, you can also achieve something similar to arrow function typing: function x(...args: Parameters<FunctionType>): ReturnType<FunctionType> { /* ... */ }

j1mbl3s · Accepted Answer · 2021-06-14 04:17:42Z

0

You already know what type the parameters to FC<ChildProps> are (i.e. ChildProps), so you can use that. Although the ~~com~~transpiler will infer the return type when it is not defined, you can use the ReturnType utility type to be explicit:

function Child({color}: ChildProps): ReturnType<FC<ChildProps>> {
  return <div>{color}</div>;
}

edited Jun 14, 2021 at 4:17

answered Jun 13, 2021 at 23:22

j1mbl3s

1,0285 silver badges16 bronze badges

Collectives™ on Stack Overflow

React & TypeScript: Functional Components that Are Not Arrow Functions

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related