CODEWITHSUNDEEP
reactjstypescript
Rannie Aguilar Peralta
Rannie Aguilar Peralta

Reputation: 1752

What's the proper way of giving react stateless functional component a typescript type

Is it just using React.FC type?

import React from 'react'

const MyComponent: React.FC = () => (
  ...
);

export default MyComponent;

Upvotes: 0

Views: 274

Answers (2)

wentjun
wentjun

Reputation: 42576

When it comes to using React Functional components with TypeScript, you should define generics and use it with your function components.

This will provide an extra layer of safety when building components, thus allowing you to discover errors more quickly.

interface MyProps {
  value: string,
}

const MyComponent: React.FC<MyProps> = (props) => {
  const { value } = props;

  return <span>{value}</span>;
}

Similarly, you can use generics for general React components.

Upvotes: 1

Chris B.
Chris B.

Reputation: 5763

Yes, you can also use FunctionComponent. FC is literally just an alias for that. SFC is being deprecated.

Upvotes: 2

Related Questions