React HOC и TypeScript 3.2 - программирование
Подтвердить что ты не робот

React HOC и TypeScript 3.2

Поскольку TypeScript улучшил свою проверку типов JSX в версии 3.2, у нас есть проблема с правильным вводом наших HOC сейчас.

Может кто-то исправить типы в следующем HOC для TypeScript 3.2?

import { ComponentType } from 'react';

type Props = { custom: string };
type Omit<T, K extends string> = Pick<T, Exclude<keyof T, K>>;

function hoc<P extends Props>(Component: ComponentType<P>) {
  return (props: Omit<P, keyof Props>) => {
    return <Component {...props} custom="text" />;
  }
}

Ошибка TypeScript:

Type '{ custom: string; }' is not assignable to type 'IntrinsicAttributes & P & { children?: ReactNode; }'.
Property 'custom' does not exist on type 'IntrinsicAttributes & P & { children?: ReactNode; }'

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

РЕДАКТИРОВАТЬ: Вероятно, та же проблема: https://github.com/Microsoft/TypeScript/issues/28748

4b9b3361

ОТВЕТЫ

Ответ 1

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

function hoc<P extends Props>(Component: ComponentType<P>): ComponentType<Omit<P, keyof Props>> {
  return (props: any) => {
    return <Component {...props} custom="text" />;
  }
}