React And Typescript
Edit page
HomeTypeScript Crash Course
Installation
Examples
Class ComponentsFunctional ComponentsFunctional Components with "Static" PropertiesHigher Order Components (HOCs)HooksReact Router
ContributingReadme

Functional Components

Use the React.FC type and define the generic with your props type.

type HelloWorldProps = {
  userName: string;
};
const HelloWorld: React.FC<HelloWorldProps> = ({ children, userName }) => (
  <div>
    <p>Hello, {userName}</p>
    {children}
  </div>
);

Functional Components with "Static" Properties

If you need to use a "static" property with your functional component (say, to define a router), you can do the following:

type Router = {
  route: string;
};
const someFancyRouter: Router = { route: '/hello/world' };
type HelloWorldProps = {
  userName: string;
};
type HelloWorldComponent = React.FC<HelloWorldProps> & { router: Router };
const HelloWorld: HelloWorldComponent = ({ children, userName }) => (
  <div>
    <p>Hello, {userName}</p>
    {children}
  </div>
);
HelloWorld.router = someFancyRouter;

This video explains another example of typing a functional component.