javascript - Typescript: react-redux, react-i18next HOC typinterferens i en .JS-fil?

Jag upplever det här riktigt konstiga problemet.

Jag har ett TypeScript React-projekt igång, med react-redux och react-i18next uppsatt (även @types-paketen är installerade).

Nu har jag följande scenario: I en TSX-fil importerar jag en komponent som är skriven i js och inte TypeScript, som först körs genom react-redux connect HOC och sedan genom react-i18next withTranslation HOC.

Nu, när jag vill rendera den komponenten från TSX-filen, får jag ett fel när jag försöker tilldela faktiskt existerande props till den komponenten, som säger:

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)

För det första, varför finns det en typkontroll för en komponent som kommer från JS? För det andra blir det ännu konstigare, för om jag skriver om den JS-komponenten till TSX och skapar alla nödvändiga gränssnitt, etc., då fungerar det utan några fel.

Slutligen, det konstigaste av allt är att när jag bara använder en av HOC:erna så får jag inte felet heller. Så det är bara när de används tillsammans. Det är därför jag inte skapar ett ärende på GitHub eftersom jag inte vet vilket paket som orsakar det.

Här är JS-komponenten som orsakar felet:

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);

Och här är samma komponent omskriven i TSX som inte ger något fel:

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);

Jag använder följande (senaste) versioner:

  1. "react-redux": "^7.1.3"
  2. "@types/react-redux": "^7.1.6"
  3. "react-i18next": "^11.3.0"
  4. "@types/react-i18next": "^8.1.0"
  5. "typescript": "^3.7.3"

Sammanfattningsvis är mina två frågor:

  1. Varför finns det TS-kontroller för JS-filer?
  2. Varför stör typningarna varandra, även om de fungerar när de används separat.

REDIGERA:

Insåg bokstavligen bara 1 minut efter att jag postade den här frågan att @types/react-i18next-paketet är föråldrat och react-18next redan tillhandahåller sina egna typer. Att avinstallera det fixade dock egentligen ingenting.

REDIGERA 2:

Jag hittade en lösning, men den förklarar inte problemen alls. Om jag först översätter komponenten och SEDAN kopplar, får jag inga TS-fel från JS-filer. Det märkliga är att jag måste göra precis tvärtom för TSX-filer, annars får jag TS-fel igen.