无法将打字稿类正确加载到反应项目中

问题描述

我目前面临的问题是，我无法为 React 项目 (Docusaurus) 中的 Typescript 类分配任何默认值。

作品

class Test {
  private hello: string;
  constructor() {
    this.hello = "hi";
  }
}

不工作并在下面删除问题

class Test {
  private hello = "hi";
  constructor() {}
}

/*
Module parse Failed: Unexpected token (1:27)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> export class AutoTyper{test="hello";constructor(){}}
 @ ./.docusaurus/registry.js 1:5122-5244 1:4769-5019
 @ ./node_modules/@docusaurus/core/lib/client/exports/ComponentCreator.js
 @ ./.docusaurus/routes.js
 @ ./node_modules/@docusaurus/core/lib/client/clientEntry.js
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@docusaurus/core/lib/client/clientEntry.js
 */

tsconfig.json

{
  "extends": "@tsconfig/docusaurus/tsconfig.json","compilerOptions": {
    "target": "ES2015","module": "commonjs","moduleResolution": "node"
  },"include": ["src/"]
}

@tsconfig/docusaurus/tsconfig.json

{
  "$schema": "https://json.schemastore.org/tsconfig","display": "Docusaurus v2","docs": "https://v2.docusaurus.io/docs/typescript-support","compilerOptions": {
    "allowJs": true,"esModuleInterop": true,"jsx": "react","lib": ["DOM"],"noEmit": true,"noImplicitAny": false,"types": ["node","@docusaurus/module-type-aliases"]
  }
}

通过克隆项目并在“newdesign”分支中启动它，可以轻松重现。 https://github.com/agile-ts/documentation/tree/newdessign

谢谢

解决方法

我看到他们在他们的文档中使用 require 而不是 import ，也许尝试一下？ const React = require('react');

const CompLibrary = require('../../core/CompLibrary.js');

const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock;

function HelloWorld(props) {
  return (
    <div className="docMainWrapper wrapper">
      <Container className="mainContainer documentContainer postContainer">
        <h1>Hello World!</h1>
        <p>This is my first page!</p>
      </Container>
    </div>
  );
}

module.exports = HelloWorld;