How to add types of generic stateless component with React and TypeScript?

Sometimes, we want to add types of generic stateless component with React and TypeScript.

In this article, we’ll look at how to add types of generic stateless component with React and TypeScript.

How to add types of generic stateless component with React and TypeScript?

To add types of generic stateless component with React and TypeScript, we can create an interface that takes a generic type argument.

For instance, we write

interface IMyComponentProps<T> {
  name: string
  type: T
}

type MyComponentI<T = any> = React.FC<IMyComponentProps<T>>

const MyComponent: MyComponentI = props => <p {...props}>Hello</p>

const TypedComponent = MyComponent as MyComponentI<number>

to create the IMyComponentProps interface that takes the type argument T.

Then we can use that to create the MyComponentI<T = any> type set to React.FC<IMyComponentProps<T>>.

React.FC is the type for function components.

IMyComponentProps<T> is the props object’s type.

And then we can cast the type of MyComponent to whatever we want like

MyComponent as MyComponentI<number>

to set T to number.

Conclusion

To add types of generic stateless component with React and TypeScript, we can create an interface that takes a generic type argument.