Verwenden der JS React-Komponente in TypeScript: Der JSX-Elementtyp 'MyComponent' ist keine Konstruktorfunktion für JSX-Elemente

Ich arbeite mit einem JavaScript-Legacy-Projekt, das das React-Framework verwendet. Wir haben dort eine React-Komponente definiert, die ich in einem völlig anderen TypeScript React-Projekt wiederverwenden möchte.

Die JS React-Komponente ist in der Datei controls.jsx definiert und sieht folgendermaßen aus:

export class MyComponent extends React.Component {
  render() {
    return <h1>Hi from MyComponent! Message provided: {this.props.message}</h1>;
  }
}

In meinem TypeScript React-Projekt versuche ich es so zu verwenden:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { MyComponent } from "../JavaScriptProject/controls";

ReactDOM.render(
  <MyComponent message="some nice message"/>,
    document.getElementById("documents-tree")
);

aber ich bekomme folgenden Fehler:

Fehlermeldungen sagen:

Der JSX-Elementtyp 'MyComponent' ist keine Konstruktorfunktion für JSX-Elemente. Beim Typ 'MyComponent' fehlen die folgenden Eigenschaften vom Typ 'ElementClass': context, setState, forceUpdate, props und 2 more.ts (2605) Die JSX-Elementklasse unterstützt keine Attribute, da sie keine 'props'-Eigenschaft.ts enthält (2607)

Ich habe die Lösung bereits mit einer in dieser Frage beschriebenen benutzerdefinierten Typisierungsdatei ausprobiert , aber sie ändert nichts.

Ich verstehe, dass die JS-Komponente einige stark typisierte Eigenschaften hat, die von TypeScript benötigt werden, aber in meiner tsconfig.json habe ich die allowJs auf true gesetzt :

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "experimentalDecorators": true,
    "jsx": "react",
    "noEmitOnError": true,
    "outDir": "lib",
    "sourceMap": true,
    "target": "es5",
    "lib": [
      "es2015",
      "dom"
    ]
  },
  "exclude": [
    "node_modules",
    "dist",
    "lib",
    "lib-amd"
  ]
}

also hoffte ich, dass es funktionieren sollte ...

Danke für Ihre Hilfe

Sie sollten sich allowSyntheticDefaultImportsan wenden , trueda React keine Standardeinstellungen exportiert.

(Quelle: https://github.com/facebook/react/blob/master/packages/react/index.js )

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true, // turn on allowSyntheticDefaultImports
    "jsx": "react",
    "noEmitOnError": true,
    "outDir": "lib",
    "sourceMap": true,
    "target": "es5",
    "lib": [
      "es2015",
      "dom"
    ]
  },
  "exclude": [
    "node_modules",
    "dist",
    "lib",
    "lib-amd"
  ]
}

Außerdem sollten Sie die Form für Komponentenstützen hinzufügen. Zum Beispiel in Ihrem Code:

export class MyComponent extends React.Component<{ message: string }> { ...

Hier sind die Konfigurationen für Ihre Referenz, die ich in meiner Beispielanwendung verwende.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.23",
    "@types/node": "^12.12.18",
    "@types/react": "^16.9.16",
    "@types/react-dom": "^16.9.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0",
    "typescript": "^3.7.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Ich habe kein Webpack verwendet.

So wie ich das sehe, haben Sie zwei Möglichkeiten:

1. Sie können eine Deklarationsdatei im selben Verzeichnis wie angegeben controls.jsxangeben controls.t.ds.

Diese Option hat zwei Möglichkeiten. Am einfachsten ist es, eine Funktion mit dem Namen zu exportieren MyComponent:

export function MyComponent(): any;

Die zweite besteht darin, eine Variable zu exportieren, die die Klassenstruktur einer Komponente nachahmt:

interface Element {
    render(): any;
    context: any;
    setState: any;
    forceUpdate: any;
    props: any;
    state: any;
    refs: any;
}

interface MyComponent extends Element {}

export var MyComponent: {
    new(): MyComponent;
}

2. Ihre zweite Option besteht darin, Ihre Komponente zu importieren und mit einer Typdefinition erneut zu exportieren. Diese Datei würde irgendwo im Projekt enthalten sein:

import React from 'react';
import {MyComponent as _MyComponent} from '../project-a/Controls';

interface MyComponent extends React.Component {}

const MyComponent = (_MyComponent as any) as {
    new(): MyComponent;
};

export {MyComponent};

Und dann würden Sie in Ihrer Datei, die MyComponentSie verwenden möchten, diese stattdessen aus dieser neuen Datei importieren.

Dies sind alles wirklich grobe Lösungen, aber ich glaube, es ist die einzige Lösung, da Sie mit TypeScript kein Modul definieren können, das relativ zu Ihrem Projekt ist:

declare module "../project/Controls" {

}

Hoffe das hilft.