Question

我有一个已购买的带有以下几行的react模板，但是我不清楚它的目的是什么，该模板在JS中并且我想将其更改为Typescript

模板中存在以下几行

 if (module.hot) {
    module.hot.accept('./dashApp.js', () => {
      const NextApp = require('./dashApp').default;
      ReactDOM.render(<NextApp />, document.getElementById('root'));
    });
  }

但是重命名为.TS时，出现此错误：

Property 'hot' does not exist on type 'NodeModule'.ts(2339)

这段代码真正的作用是什么？用简单的英语

Answer 1

此代码与Webpack的热模块更换功能（HMR）相关。 module.hot的工作方式如下：

module.hot.accept(
  dependencies, // Either a string or an array of strings
  callback // Function to fire when the dependencies are updated
);

因此，您包含的代码将执行以下操作：*当./dashApp.js或它需要的模块之一/在需求/导入树中的导入被更新时，请重新渲染整个React应用。

节点模块上的hot属性不是标准属性，因此会出现TS错误-确保安装所需的类型定义！ npm install --save-dev @types/webpack-env应该可以解决问题。

相关阅读：

Hot Module Replacement concept：有关HMR的高级Webpack文档
Hot Module Replacement API关于HMR的低级Webpack文档，解释了如何使用它以及module.hot.accept的作用
Property 'hot' does not exist on type 'NodeModule'：Github解决了TS错误问题

Answer 2

只是添加到已接受的答案：安装 @types/webpack-env 后，您可能需要将 "types": ["webpack-env"] 添加到 tsconfig.json 中的 compilerOptions。直到那时它终于对我有用。

所以您的 tsconfig.json 将如下所示：

{
  "compilerOptions": {
    ...
    "types": ["webpack-env"]
  },
  ...
}

属性“ hot”在类型“ NodeModule”上不存在。ts（2339）

2 个答案: