React & TypeScript HOCs - почему я получаю, что Type '{}' нельзя назначить для Type P? - PullRequest
Новая
       53

React & TypeScript HOCs - почему я получаю, что Type '{}' нельзя назначить для Type P?

0 голосов
/ 07 февраля 2019

Я врезался в стену во время кодирования вместе с Learning React с книгой TypeScript.Я сдался и скопировал вставленный код прямо из книги, но компилятор все еще недоволен

Мой текущий обходной путь - предоставить «любое» значение вместо IProps, но это дешевый хак.

Неработающий код: 

import * as React from 'react';

interface IProps {
  loading: boolean;
}

const withLoader = <P extends object>(
  Component: React.ComponentType<P>
): React.FunctionComponent<P & IProps> => ({ loading, ...props }: 
IProps) =>
  loading ? (
    <div className="loader-overlay">
      <div className="loader-circle-wrap">
        <div className="loader-circle" />
      </div>
    </div>
  ) : (
    <Component {...props} />
  );

 export default withLoader;

Рабочий код (я только изменил IProps на любой): 

import * as React from 'react';

interface IProps {
  loading: boolean;
}

const withLoader = <P extends object>(
  Component: React.ComponentType<P>
): React.FunctionComponent<P & IProps> => ({ loading, ...props }: 
any) =>
  loading ? (
    <div className="loader-overlay">
      <div className="loader-circle-wrap">
        <div className="loader-circle" />
      </div>
    </div>
  ) : (
    <Component {...props} />
  );

 export default withLoader;

В нерабочем коде я получаю Тип '{}' не назначается типуP ошибка.Я хотел бы решить эту проблему, так как это поможет мне понять, что происходит.Я абсолютный новичок в TypeScript!

1 Ответ

0 голосов
/ 08 февраля 2019

Начиная с 3.2, поведение оператора распространения для дженериков изменилось .Видимо, тип props стирается как отрицательный побочный эффект, но вы можете обойти это, приведя его обратно к P, используя {...props as P} при распространении обратно в упакованный компонент.

...