Машинописный текст: реакция-редукция, реакция-i18следующая интерференция типа HO C в файле. JS? - PullRequest
Новая
       16

Машинописный текст: реакция-редукция, реакция-i18следующая интерференция типа HO C в файле. JS?

2 голосов
/ 17 января 2020

У меня возникла эта действительно странная проблема.

У меня запущен проект реагирования TypeScript с настройкой реагировать на восстановление и реактив-i18next (пакеты @types также установлены).

Теперь у меня есть следующий сценарий: В TSX-файле я импортирую компонент, который записан в js, а не в машинописном тексте, который сначала запускается черезact-redux connect HO C и затем через response-i18next withTranslation HO C.

Теперь, когда я хочу визуализировать этот компонент из файла TSX, я получаю сообщение об ошибке, когда пытаюсь назначить этому компоненту фактически существующие реквизиты, поговорка: 

Type '{ name: number; }' is not assignable to type 'IntrinsicAttributes & Pick<WithTranslation, never> & WithTranslationProps & { children?: ReactNode; }'.
  Property 'name' does not exist on type 'IntrinsicAttributes & Pick<WithTranslation, never> & WithTranslationProps & { children?: ReactNode; }'.ts(2322)

Прежде всего, почему проверка типа для компонента происходит из JS? Во-вторых, это становится еще более странным, потому что, если я переписываю этот JS компонент в TSX и создаю все необходимые интерфейсы, et c. затем он работает без каких-либо ошибок.

Наконец, самое странное во всем этом то, что, когда я использую только один из HOC, я тоже не получаю ошибку. Так что только с ними в сочетании. Вот почему я не регистрирую проблему в GitHub, потому что я не знаю, какой пакет вызывает ее.

Вот компонент JS, вызывающий ошибку: 

import React from "react";
import { withTranslation } from "react-i18next";
import { connect } from "react-redux";

class TranslatedReactClass extends React.PureComponent {
  static defaultProps = {
    lastName: "noClassLastName",
  };
  render() {
    console.log(this.props.propertyStore);

    return (
      <div>
        Class {this.props.t("Contact")}: {this.props.name} {this.props.lastName}
      </div>
    );
  }
}

const comp = connect(state => {
  return {
    propertyStore: state.properties,
  };
})(TranslatedReactClass);

export default withTranslation()(comp);

И вот тот же компонент, переписанный в TSX, который не выдает никакой ошибки: 

import React from "react";
import { withTranslation, WithTranslation } from "react-i18next";
import { connect } from "react-redux";

interface Props extends WithTranslation {
  name: string;
  lastName?: string;
  propertyStore?: any;
}

class TranslatedReactClass extends React.PureComponent<Props> {
  static defaultProps = {
    lastName: "noClassLastName",
  };
  render() {
    console.log(this.props.propertyStore);

    return (
      <div>
        Class {this.props.t("Contact")}: {this.props.name} {this.props.lastName}
      </div>
    );
  }
}

const comp = connect((state: any) => {
  return {
    propertyStore: state.properties,
  };
})(TranslatedReactClass);

export default withTranslation()(comp);

Я использую следующие (последние) версии:

  1. "Reaction-redux ":" ^ 7.1.3 "
  2. " @ types / Reaction-redux ":" ^ 7.1.6 "
  3. " Reaction-i18next ":" ^ 11.3.0 "
  4. "@ types / реагировать-i18next": "^ 8.1.0"
  5. "машинопись": "^ 3.7.3"

В качестве резюме, мои два вопроса являются:

  1. Почему существуют проверки TS для JS файлов?
  2. Почему мешают наборы, даже если они работают по отдельности.

РЕДАКТИРОВАТЬ:

Буквально через 1 минуту после публикации этого вопроса понял, что пакет @ types / реагировать-i18next устарел, и реагировать-18next уже обеспечивает свои собственные типизации Однако удаление его на самом деле ничего не исправило.

РЕДАКТИРОВАТЬ 2:

Я нашел обходной путь, но он совсем не объясняет проблемы. Если я сначала перевожу компонент и ТО соединяюсь, я не получаю ошибки TS из файлов JS. Странно то, что я должен сделать прямо противоположное для TSX файлов, в противном случае я снова получаю ошибки TS.

...