Sử dụng thành phần JS React trong TypeScript: Kiểu phần tử JSX 'MyComponent' không phải là hàm xây dựng cho các phần tử JSX

Tôi đang làm việc với một dự án kế thừa JavaScript sử dụng khung React. Chúng tôi có một số thành phần React được xác định mà tôi muốn sử dụng lại trong một dự án TypeScript React hoàn toàn khác.

Thành phần JS React được định nghĩa trong tệp controls.jsx và trông như sau:

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

Trong dự án TypeScript React của tôi, tôi đang cố gắng sử dụng nó như thế:

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

nhưng tôi nhận được lỗi sau:

Thông báo lỗi cho biết:

Kiểu phần tử JSX 'MyComponent' không phải là hàm xây dựng cho các phần tử JSX. Loại 'MyComponent' thiếu các thuộc tính sau từ loại 'ElementClass': bối cảnh, setState, forceUpdate, props và 2 more.ts (2605) Lớp phần tử JSX không hỗ trợ các thuộc tính vì nó không có thuộc tính 'props'. (2607)

Tôi đã thử giải pháp với tệp đánh máy tùy chỉnh được mô tả trong câu hỏi này , nhưng nó không thay đổi gì.

Tôi hiểu rằng thành phần JS có một số thuộc tính được gõ mạnh theo yêu cầu của TypeScript, nhưng trong tsconfig.json, tôi có các allowJ được đặt thành true :

{
  "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"
  ]
}

Vì vậy, tôi hy vọng nó sẽ hoạt động ...

Cảm ơn bạn đã giúp đỡ

Bạn nên chuyển allowSyntheticDefaultImportssang truevì React không xuất mặc định.

(nguồn: 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"
  ]
}

Ngoài ra, bạn nên thêm hình dạng cho đạo cụ thành phần. Ví dụ: trong mã của bạn:

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

Dưới đây là các cấu hình để bạn tham khảo mà tôi đang sử dụng trong ứng dụng mẫu của mình.

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"
  ]
}

pack.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"
    ]
  }
}

Tôi chưa sử dụng webpack.

Theo cách tôi thấy, bạn có hai lựa chọn:

1. Bạn có thể cung cấp một tệp khai báo trong cùng thư mục như controls.jsxđược đặt tên controls.t.ds.

Tùy chọn này có hai cách để đi về nó. Đơn giản nhất là xuất một hàm với tên MyComponent:

export function MyComponent(): any;

Thứ hai là xuất một biến bắt chước cấu trúc lớp của một thành phần:

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. Tùy chọn thứ hai của bạn là nhập thành phần của bạn và tái xuất nó với định nghĩa kiểu. Tập tin này sẽ được bao gồm ở đâu đó trong dự án:

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

Và sau đó trong tệp của bạn muốn sử dụng MyComponent, bạn sẽ nhập nó từ tệp mới đó.

Đây đều là những giải pháp thực sự thô thiển, nhưng tôi tin rằng đó là giải pháp duy nhất vì TypeScript không cho phép bạn xác định một mô-đun có liên quan đến dự án của bạn:

declare module "../project/Controls" {

}

Hi vọng điêu nay co ich.