如何解决带有修饰符的 TypeScript 构造函数参数无法使用 ts-loader 正确发出
我开始使用使用 TypeScript/React/Storybook 构建的 Web 应用程序。我在写类时注意到:
class MyClass {
constructor(public a) { }
}
console.log(MyClass);
并使用 jest 运行单元测试,或使用 tsc 发出代码,它会生成预期的 JS 代码,如:
function MyClass(a) {
this.a = a;
}
但是当我在带有开发服务器的 Storybook 应用程序中运行它时,它会打印出如下 JS 代码:
function MyClass(a) {
_classCallCheck(this,MyClass);
}
我在想它是否与 ts-loader 选择的 TypeScript 编译器版本有关,但无法弄清楚。我检查了安装到我的 node_modules 文件夹中的 TypeScript 版本,它是 v4.1.2,我看起来没什么问题。
我还在这里提到了 Playbook(并在标签中留下了“playbook”)只是因为我的应用程序随附了它。它可能与此问题没有直接关系。
解决方法
如果您使用的是最新版本 @babel/preset-typescript
,这似乎是一个问题。您可以更改 babel 配置以使用 "@babel/plugin-transform-typescript"
plugin 而不是 @babel/preset-typescript
预设。
更多信息:https://www.gitmemory.com/issue/babel/babel/8752/486541662
如果由 storybook 生成,你的 babel 配置可能看起来像:
module.exports = {
presets: [
["@babel/preset-env",{ targets: { node: "current" } }],"@babel/preset-typescript",],};
然后将其更改为:
module.exports = {
presets: [["@babel/preset-env",{ targets: { node: "current" } }]],plugins: ["@babel/plugin-transform-typescript"],};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。