Почему дженерики используются с компонентом класса в Typescript

Question

Я изучал React с Typescript, и, поскольку я хотел создать компонент класса, оказалось, что нам нужно использовать дженерики следующим образом:

type MyProps = {
  // using `interface` is also ok
  message: string;
};
type MyState = {
  count: number; // like this
};
class App extends React.Component<MyProps, MyState> {
  state: MyState = {
    // optional second annotation for better type inference
    count: 0,
  };
  render() {
    return (
      <div>
        {this.props.message} {this.state.count}
      </div>
    );
  }
}

Хорошо, так как мое исследование говорит, что дженерики помогают достичь возможность повторного использования, например, когда мы создаем функцию с генериками, подобными этой:

function identity<T>(arg: T): T {
    return arg;
}

НО, что я не могу обернуть головой, так это то, ПОЧЕМУ нам нужно использовать здесь генерики class App extends React.Component<MyProps, MyState>?

Answer 1

Повторное использование здесь не является первостепенной задачей, даже если React.Component повторно используется в этом сценарии.

Обобщения используются для другой цели, а именно, позволяют настраивать реквизиты и члены состояния в типобезопасный способ. Имейте в виду, что Typescript добавляет безопасность типов поверх Javascript и, следовательно, членов класса et c. должны быть определены с типами.

В вашем примере, без вашего типа MyState нет никакой информации о том, что компонент должен использовать для своего элемента состояния, и вы получите сообщение об ошибке при использовании таких вещей, как this.state.count. Typescript может гарантировать корректность только тогда, когда знает, что на самом деле должно быть там.

Примечание: Сам React имеет механизм обеспечения безопасности типов, даже без Typescript. Вы можете найти больше информации о PropTypes на домашней странице React. Но я бы порекомендовал Typescript в любое время по PropTypes.

Answer 2

Определение типа компонента определяет множество вещей, например сигнатуру методов:

• render(): ReactNode;
• constructor(props: Readonly<P>);

Обобщения предоставляют способ указать, какие конкретные реквизиты и состояния разрешены в определениях типов всех методов.