vue3+ts 如何解决 vue-loader 不支持新语法，vue-tsc 会检查模板的问题？

Question

每次遇到这种模板中丢失 js 特性的时候都想打人，vue 的模板要等 vue-loader 实现 js 新语法解析，vue-tsc 校验 ts 真是痛苦
泥萌用 vue3+ts 一般是怎么解决的？

还导致 storybook 炸掉了（似乎是 webpack 4 不支持解析这种语法）

吾辈检查了现有的 github 和 vue 论坛，但没有找到太多有用的信息

如果无法解决，那么是否可以让本地开发环境和打包一样报错，避免开发时没有问题，打包后炸掉。。。

Answer 1

因为懒，我也喜欢使用 ?. ?? 来写。但是模板中确实支持不友好，我使用 ?. 一般采用计算属性来解决这个问题。因为计算属性写在 Js 中，会被我们的脚手架正确处理，而且实现会更加优雅一些。

Vue3 setup 语法，希望对你有帮助

<div class="win-box" :style="myStyle" />

// attrs 是有状态的对象，避免对它进行解构
const attrs = useAttrs();
const myStyle = computed(() => ({ zIndex: attrs.style?.zIndex ?? 'auto' }));

// 如果 style 初始化后不会改变，那么你可以
// const { style } = useAttrs();
// const myStyle = computed(() => ({ zIndex: style?.zIndex ?? 'auto' }));

个人喜好，不太喜欢行间上写很多代码

你写了好多文章💪，最后感谢你的分享😘