假设我有一些 JSON 文件(我们将其命名为 template.json
)
{
"myField1": "",
"myField2": ""
}
我还有一种通用类
export default GenericClass<T> {
// Creating an empty constuctor with passed type.
// to allow define type automatically.
// This allow us not to manually set generic type for class
// and also allows Webpack to pick up changes.
constructor(template?: T) {}
// ...some fields and methods
get typedField(): T {
return /* something slightly calculated */
}
}
我在我的 Typescript 项目中像使用类型一样使用它:
import GenericClass from "path/to/GenericClass"
import template from "template.json"
export type TemplateType = typeof template
export default new GenericClass(template)
// we can also write
// export default new GenericClass<TemplateType>()
// but in this case the changes in template.json
// won't be picked up by Webpack.
// However, this does not affects the problem,
// it occurs in both cases.
我正在运行 webpack
开发服务器,并在某处使用它:
import * as React from "react"
import GenericInstance from "path/to/GenericInstance"
export default MyComponent extends React.Component {
render() {
var { typedField } = GenericInstance
return (
<main>
<p>{typedField.myField1} {/* ok */}</p>
<p>{typedField.myField2} {/* ok */}</p>
</main>
)
}
}
之后,我将在我的 template.json
中添加一个新字段:
{
"myField1": "",
"myField2": "",
"myField3": ""
}
正在保存。 webpack
dev-server 在 template.json
中获取此更改.好的。 一件重要的事情是 VSCode 的自动完成功能(它在可用字段列表中显示 myField3
)。很好。
此刻,当我尝试使用 myField3
时在 MyComponent
(如 <p>{typedField.myField3}</p>
),awesome-typescript-loader
在编译期间发送错误:
Property 'myField3' does not exist on type '{ "myField1": string; "myField2": string; }'
显然,awesome-typescript-loader
未获取 template.json
中的更改在我的 GenericClass
中用作类型.
我怎么打败它?重新启动开发服务器后,它工作正常,直到我在 template.json
中进行更改。 .
部分webpack.config.js
, package.json
和 tsconfig.json
config = {
rules: {
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader",
exclude: /node_modules/
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
},
}
}
{
"devDependencies": {
"awesome-typescript-loader": "^5.2.1",
"source-map-loader": "^0.2.4",
"typescript": "^3.3.3",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
}
}
{
"compilerOptions": {
"module": "esnext",
"target": "es5",
"moduleResolution": "node",
"baseUrl": "src",
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"strict": false,
"sourceMap": true,
"outDir": "dist/",
"jsx": "react",
"traceResolution": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"allowJs": true,
"declaration": false,
"removeComments": true,
"noLib": false,
"preserveConstEnums": true,
"suppressImplicitAnyIndexErrors": true,
"types": [ "node" ],
"lib": ["es6", "dom", "dom.iterable"],
"downlevelIteration": true,
"resolveJsonModule": true,
"typeRoots": [
"./node_modules/@types"
]
},
"include": [
"src/**/*"
]
}
更新
我可以确认只有导入的 *.json 才会出现这种情况。大概问题可以联系resolveJsonModule
TypeScript 的设置,但不确定。设置useCache
和 usePrecompiledFiles
至 false
明确表示 awesome-typescript-loader
在 webpack.config.js
没有帮助。我的意思是,改变了 webpack.config.js
现在看起来像:
{
test: /\.(t|j)sx?$/,
loader: "awesome-typescript-loader",
options: {
useCache: false,
usePrecompiledFiles: false
},
exclude: /node_modules\/(?!superagent)/,
},
最佳答案
这是 awesome-typescript-loader
中的错误。从 v5.2.1 开始,这里有一个快速修复:
// node_modules/awesome-typescript-loader/dist/instance.js
// ln: 214:
- var EXTENSIONS = /\.tsx?$|\.jsx?$/;
+ var EXTENSIONS = /\.tsx?$|\.jsx?|\.json$/;
显然作者忘记将 .json
扩展名作为有效目标包含在内。
关于json - awesome-typescript-loader 不会获取 JSON 中的更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54695319/