TypeScript не выберет правильное переопределение - PullRequest
Новая
       41

TypeScript не выберет правильное переопределение

0 голосов
/ 20 июня 2019

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

/ * Должен наследовать все свойства InputComponent.DefaultComponent должен быть значением реквизита компонента по умолчанию.* / 

<DynamicComponent component={InputComponent} />

Моя текущая реализация выглядит следующим образом: 

type DefaultProps = { defaultProp: string }
type InputProps = { onChange: () => void }
type DynamicType<P> = DynamicProps & { component: ReactType<P> } & P

export default function DynamicComponent(props: DynamicProps & { component?: DefaultComponent } & DefaultComponentProps): ReactElement<DefaultComponentProps>
export default function DynamicComponent<P>(props: DynamicType<P>): ReactElement<P> {
    const { style: overrideStyle, component } = props
    const { style } = getStyle(props)
    const mergedStyle = { ...style, ...overrideStyle }
    return React.createElement(component, { ...props, style: mergedStyle })
};

DynamicComponent.defaultProps = { component: DefaultComponent }

Так что я ожидаю, что произойдет следующее:

1.) Когда компонентне определено, я ожидаю 1-е переопределение (по умолчанию) 

<DynamicComponent defaultProps='itsTotallyValid' /> // valid

2.) Когда компонент определен, я ожидаю наследовать его свойства 

<DynamicComponent component={InputComponent} onChange={() =>{}} /> // valid

По какой-то причинеВторая ситуация никогда не происходит, и она всегда выбирает первую.Есть ли способ быть более строгим, чтобы я мог сделать возможной 2-ю ситуацию?

Обновление

Пример: https://codesandbox.io/s/quiet-architecture-zx60y

1 Ответ

0 голосов
/ 20 июня 2019

Обращаясь к проблеме в комментариях о выводе типа блокировки по умолчанию универсального типа, это не так, следующий минимальный пример демонстрирует вывод типа, работающий с типом T, который имеет значение по умолчанию string, 

function Bar<T = string>(props: { component: T }) : T {
  return props.component
}

Bar({ component : 'string' })
Bar({ component : 5 }) // <-- Type inferred to be number
...