Как правильно создать функциональный компонент в реакции, используя машинопись

Question

Как правильно создать функциональный компонент в реакции с использованием машинописи?

1. Следует ли мне использовать interface или ввести props?
2. Следует ли использовать React.FC или React.FunctionComponent?
3. Как я могу проверить props, используя eslint?

Прямо сейчас мои типичные компоненты выглядят так:

interface IProps {
  color: string;
}

const Example = (props: IProps) => {
  const { color } = props;

  return (
    <>
      {color}
    </>
  );
};

Я не уверен, что это лучший способ ...

Также я не надеваю t know how to validate props using eslint`, например, когда хочу передать цвет как число ..

Answer 1

1. Оба часто используются в сообществе. Я предпочитаю type, так как мне легче пользоваться, но вы можете прочитать здесь https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#3 .10 и составить собственное мнение.
2. React.FC является сокращением для React.FunctionComponent
3. , которые будут проверены анализом TypeScript c.

Я нашел этот шаблон полезным при запуске с функциональными компонентами:

type Props {
  color: string;
}

const Example: React.FC<Props> = ({color}: Props) => {

  return (
    <>
      {color}
    </>
  );
};