Какой тип компонента возвращается из withStyles ()? - PullRequest
Новая
       102

Какой тип компонента возвращается из withStyles ()?

0 голосов
/ 01 июля 2018

У меня есть Dictionary компонент с очень простыми свойствами: 

interface DictionaryProps {
  word: string;
}

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

dictionary: React.ComponentClass<{ word: string }>;

Его родитель использует это так: 

<UsesDictionary dictionary={Dictionary} />

Теперь я хочу поэкспериментировать с JSS (MaterialUI уже используется в проекте, поэтому нет, вся библиотека не используется только для одного компонента). Я создал несколько стилей и обновил DictionaryProps соответственно: 

const styles = createStyles({ root: { position: 'relative' } });

interface DictionaryProps extends WithStyles<typeof styles>{
  word: string;
}

class Dictionary extends React.Component<DictionaryProps> {}

export default withStyles(styles)(Dictionary);

, которая приводит к следующей ошибке компиляции при передаче стиля Dictionary в React.ComponentClass -прием UsesDictionary: 

Types of property 'dictionary' are incompatible.
  Type 'ComponentType<Overwrite<DictionaryProps, StyledComponentProps<"root">>>' is not assignable to type 'ComponentClass<{ word: string; }> & ComponentClass<{ word: string; }>'.
    Type 'StatelessComponent<Overwrite<DictionaryProps, StyledComponentProps<"root">>>' is not assignable to type 'ComponentClass<{ word: string; }> & ComponentClass<{ word: string; }>'.
      Type 'StatelessComponent<Overwrite<DictionaryProps, StyledComponentProps<"root">>>' is not assignable to type 'ComponentClass<{ word: string; }>'.

Я подтвердил, что Dictionary соответствует React.ComponentClass<{ word: string }>, используя его напрямую: 

<Dictionary word={dictionarySearch} />

Это показывает, что я как-то не испортил свойства Dictionary.

  1. Я могу использовать any вместо конкретного типа, но я установил правило для этого проекта не использовать any. В любом случае, это плохая практика, так как теряет безопасность типов.

  2. Я пытался напрямую использовать тип из ошибки - StatelessComponent<Overwrite<DictionaryProps, StyledComponentProps<"root">>>. Но

    • У него какой-то тип Overwrite, о котором я не знаю, и я не нашел, где он находится. Я предполагаю, что это из MaterialUI, и я не хочу связывать UsesDictionary с ним.
    • Требуется в стиле DictionaryProps, а не только часть {word: string}. И я не хочу связывать мой UsesDictionary с каким-либо конкретным типом словаря, поэтому я не хочу, чтобы он знал, использует ли словарь withStyles или нет.

    т.е. использование типа из ошибки не является жизнеспособным вариантом.

Другие с проблемами withStyles используют его как декоратор, отсюда и их ошибки. Здесь это не применимо, так как я уже использую withStyles в качестве простой функции.

Короче говоря:

Как мне ввести dictionary свойство UsesDictionary, чтобы оно принимало withStyles -ed компонент?

1 Ответ

0 голосов
/ 01 июля 2018

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

Рабочим решением является объединение текущего типа с его функциональным аналогом . 

readonly dictionary:
  | React.ComponentClass<{ word: string }>
  | React.StatelessComponent<{ word: string }>;

У меня появилась идея попробовать это, глядя на сообщение об ошибке. Я заметил, что он пытался присвоить StatelessComponent моему ComponentClass.

...