Выведение типов в компонентах более высокого порядка - PullRequest
2 голосов
/ 11 июля 2020

У меня есть Ho C в React, который просто передает дополнительное свойство с именем name:

export interface WithNameProps {
  name: string;
}
function withName<P extends {}>(Wrapped: React.ComponentType<P & WithNameProps>): React.FC<P> {
    const WithName: React.FC<P> = (props) => <Wrapped {...props} name="typescript" />
    return WithName;
}

Однако, когда я использую его с компонентом:

const Person: React.FC<{age: number, name: string}> = ({name, age}) => <p>Name: {name}. Age: {age}</p>

const Me = withName(Person);

<Me age={10} />

I получите следующую ошибку:

Property 'name' is missing in type '{ age: number; }' but required in type '{ age: number; name: string; }'

Typescript не может сделать вывод, что P здесь {age: number, name: string} без WithNameProps ie {age: number}.

Он работает, если я явно передаю тип, как здесь:

const Me = withName<{age: number}>(Person);

Он также работает, если я объявляю реквизиты Person как тип пересечения:

const Person: React.FC<{age: number} & {name: string}> = ({name, age}) => <p>Name: {name}. Age: {age}</p>

Здесь Typescript, вероятно, может деструктурировать тип и вывести его.

Могу ли я изменить это таким образом, чтобы мне не приходилось явно указывать тип или передавать тип пересечения?

У меня здесь есть ссылка на игровую площадку Typescript (вместе с более простой пример): Щелкните здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...