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

Question

我目前面临的问题是，我无法在我的 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

谢谢

Answer 1

我看到他们在他们的文档中使用 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;