У меня есть 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 (вместе с более простой пример): Щелкните здесь