Webpack HRM typescript 重新编译问题

Question

我正在使用 webpack babel typescript 做出反应，一切正常，但是当开发模式下的热重载无法重新编译 ts 文件时，我遇到了问题，假设我有一个 Z20F35E630DAF44DBFA4C3F68FC3 之类的

type Model = {
   prop: string;
}

正在运行的项目显示“编译成功”，但如果我需要将此道具更改为数字，

type Model = {
   prop: number;
}

我会收到

[tsl] ERROR in /src/app/modules/home/home.component.tsx(14,57)
TS2322: Type 'number' is not assignable to type 'string'.

在我完全重新加载/重建项目之前，此错误不会消失

另外，我注意到只有当我将模型拆分为单独的文件时才会发生这种情况，例如：

src/foo.component.ts
src/foo.model.ts

在这种情况下，在重新加载构建之前我会收到此错误，但是如果我在与组件相同的文件中拥有 model，则不会给出任何错误

这是我的 tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "sourceMap": true,
    "declaration": false,
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "target": "ES2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "paths": {},
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules", "@types"]
}

那么如何在没有完全重新启动项目的情况下让它在类型更改时重新编译文件呢？

Answer 1

通过添加 ForkTsCheckerWebpackPlugin 解决了它