Question

我正在使用 webpack babel typescript react，一切正常，但是当开发模式下的热重载无法重新编译 ts 文件时，我遇到了问题，假设我有一个这样的模型

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

在这种情况下，我会在重新加载构建之前收到此错误，但是如果模型与组件位于同一文件中，则不会出现任何错误

这是我的 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 解决

Webpack HRM 打字稿重新编译问题

1 个答案: