Как мне объявить универсальный компонент React в переменной const из компонента более высокого порядка?

Question

У меня есть код TypeScript, такой как:

interface Props<T> {}

function HOC<P>(component: React.ComponentType<P>): React.ComponentType<P> {
  return component;
}

const MyClass = HOC(class MyClass<T> extends React.Component<Props<T>, {}> {});
type MyClass<T> = React.ComponentType<Props<T>>;

function render() {
  return <MyClass<string> />;
}

Но это не работает, потому что я получаю следующие ошибки в строке с MyClass<string>:

[ts]
JSX element type 'ReactElement<any> | null' is not a constructor function for JSX elements.
  Type 'null' is not assignable to type 'ElementClass'.
[ts] Expected 0 type arguments, but got 1.

Если я удаляю HOC и объявление типа, оно прекрасно компилируется:

interface Props<T> {}

class MyClass<T> extends React.Component<Props<T>, {}> {};

function render() {
  return <MyClass<string> />;
}

Поэтому мой вопрос в том, что если я не могу изменить объявление типа HOC, как я могу объявить * 1012?* (с type MyClass<T> при необходимости), чтобы первый пример успешно компилировался?

Answer 1

Вам нужно будет использовать утверждение типа, чтобы компилятор машинописи теперь, когда MyClass является универсальным конструктором:

interface Props<T> {
  prop: T
}

function HOC<P>(component: React.ComponentType<P>): React.ComponentType<P> {
  return component;
}

const MyClass = HOC(class MyClass<T> extends React.Component<Props<T>, {}> {}) as {
  new <T>(props: Props<T>, context?: any): React.Component<Props<T>> // Generic constructor
}

function render() {
  return <MyClass<string> prop="" />;
}

function render2() {
  return <MyClass<number> prop={1} />;
}

Примечание Насколько мне известно, в машинописи отсутствуетк сожалению, возможность смоделировать тот тип преобразования общего типа, который вы ищете, даже если вы можете изменить HOC.