How to pass an interface (typing) to a React component?

Question

typescript

How to pass an interface (typing) to a React component?

Answer 1

A component is defined by its props. Usually they do this (types are taken as an example):

// пропсы
type MyCompProps = {
  value: string;
  ...
};

// для компонента указывается тип - "функциональный компонент с пропсами MyCompProps"
// далее не нужно указывать тип для props и тип возвращаемого значения - TS выводит сам.
export const MyComp: React.FC<MyCompProps> = (props) => {
  ...
  return (<div>{props.value}</div>);
};