Is it possible to type a React function component with TypeScript without using arrow functions?

Question

Currently I have this React component typed as such:

import React, { FunctionComponent } from "react";

const HelloWorld : FunctionComponent = () => {
  return (
    <div>
      Hello
    </div>
  );
}

export default HelloWorld;

I would not like to use arrow functions and write my component like so:

import React, { FunctionComponent } from "react";

function HelloWorld() {
  return (
    <div>
      Hello
    </div>
  );
}

export default HelloWorld;

Is it possible to type normal functions as FunctionComponent?

Jesse Carter · Accepted Answer · 2019-03-12 01:03:05Z

5

The FunctionComponent type basically boils down to a function that receives props and returns a ReactElement:

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

So one option would be to type your non-arrow function accordingly:

function HelloWorld(): ReactElement {
  return (
    <div>
      Hello
    </div>
  );
}

The other option (which integrates better with the rest of the TS React ecosystem) is to store your function in a named variable:

interface SomeProps {
  someValue: number
}

const HelloWorld: FunctionComponent<SomeProps> = function HelloWorld({ someValue }) {
  return <div>Hi {someValue}</div>
}

Overall though I would recommend that you just use arrow functions as they offer benefits especially when it comes to JS scopes and the this reference.

edited Mar 12, 2019 at 1:03

answered Mar 12, 2019 at 0:52

Jesse Carter

21.3k8 gold badges71 silver badges105 bronze badges

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

2 Comments

Breno Calazans Over a year ago

Is it possible to add the props interface in the first example? And why the latter integrates better with the ecosystem?

Jesse Carter Over a year ago

That's what I meant by integrates better, you'll be able to properly leverage types and intellisense for your component props and state. I'm not aware of a way to make that work with the first example so in reality it has limited use cases. Why is it that you're trying to avoid using arrow functions?

Collectives™ on Stack Overflow

Is it possible to type a React function component with TypeScript without using arrow functions?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related