javascript - 在非 TypeScript 的 React 项目中仅编译特定的 TypeScript 文件

我创建了一个 ReactJS 应用，包含：

npx create-react-app react-app-vanilla

其中包含这些文件：

/.gitignore
/README.md
/package.json
/public/favicon.ico
/public/index.html
/public/logo192.png
/public/logo512.png
/public/manifest.json
/public/robots.txt
/src/App.css
/src/App.js
/src/App.test.js
/src/index.css
/src/index.js
/src/logo.svg
/src/reportWebVitals.js
/src/setupTests.js
/yarn.lock

在文件：src/App.js 中，我想使用我用 TypeScript 创建的 Greeter 辅助类。

/typescript/Greeter/Greeter.ts

class Greeter {

  private greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return `Hello, ${this.greeting}`;
  }
}

export = (message: string) => new Greeter(message);

目前，我正在做的（作为一种变通方法）是手动运行以下命令：

npx tsc --project typescript/Greeter/tsconfig.json

它编译以下文件：

/src/assets/js/utils/Greeter.js

class Greeter {
    constructor(message) {
        this.greeting = message;
    }
    greet() {
        return `Hello, ${this.greeting}`;
    }
}
module.exports = (message) => new Greeter(message);

然后我可以在以下文件上使用它：

/src/App.js

import logo from './logo.svg';
import './App.css';
import greeter from './assets/js/utils/Greeter';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {greeter('Have a Wonderful Day!').greet()}
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

此文件是上述命令能够运行所必需的：

/typescript/Greeter/tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "jsx": "react",
    "lib": ["es2016", "dom"],
    "module": "CommonJS",
    "moduleResolution": "Node",
    "noEmitOnError": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": true,
    "outDir": "../../src/assets/js/utils",
    "preserveConstEnums": true,
    "removeComments": false,
    "sourceMap": false,
    "target": "ES2017"
  },
  "files": [
    "./Greeter.ts"
  ]
}

/package.json

{
  "name": "react-app-vanilla",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

这是我得到的：

我的目标是：

当我更新 TypeScript 文件时，不需要手动运行该命令来编译生成的文件。

我们可以以以下方式编译生成的文件：

• 运行时刻：$ npm start

• 在运行时刻：$ npm start 以及当 TypeScript 文件被更新时

你有任何关于如何实现这个的想法吗？

谢谢！

答案＃1

你为什么不在你的 package.json 中添加一个新脚本 "compile": "tsc --project typescript/Greeter/tsconfig.json"，然后在你的 $npm start 中组合这两个命令

"scripts": {
    "start": "npm run compile && react-scripts start",
    "build": "npm run compile && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "compile": "tsc --project typescript/Greeter/tsconfig.json"
  },