使用<script lang="ts" setup>时,ts类型强制转换无效 #5845
Description
Version
3.2.33
Reproduction link
Steps to reproduce
使用 @vue/cli@5.0.4" 创建的全新项目,然后添加以下代码:
<script lang="ts" setup> import { ref } from 'vue'; const msg = ref("ABC"); const myObj = <{ [key: string]: string }>{ a: "123" } msg.value = myObj.a; </script>What is expected?
正常情况下ts脚本应该被正常解析.
What is actually happening?
报错了:
ERROR Failed to compile with 1 error 上午9:29:28
error in ./src/views/AboutView.vue?vue&type=script&lang=ts&setup=true
Syntax Error: TypeError: Cannot read property 'content' of null
ERROR in ./src/views/AboutView.vue?vue&type=script&lang=ts&setup=true (./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/AboutView.vue?vue&type=script&lang=ts&setup=true)
Module Error (from ./node_modules/vue-loader/dist/index.js):
[@vue/compiler-sfc] Unexpected token (5:15)
D:\J-USER\desktop7\cli5_vue3\src\views\AboutView.vue
11 |
12 | const msg = ref("ABC");
13 | const myObj = <{ [key: string]: string }>{
| ^
14 | a: "123"
15 | }
@ ./src/views/AboutView.vue?vue&type=script&lang=ts&setup=true 1:0-250 1:0-250 1:251-490 1:251-490
@ ./src/views/AboutView.vue 2:0-71 3:0-66 3:0-66 6:49-55
@ ./src/router/index.ts 13:19-15:27
@ ./src/main.ts 3:0-30 5:30-36
ERROR in ./src/views/AboutView.vue?vue&type=script&lang=ts&setup=true (./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/AboutView.vue?vue&type=script&lang=ts&setup=true)
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read property 'content' of null
at selectBlock (D:\J-USER\desktop7\cli5_vue3\node_modules\vue-loader\dist\select.js:23:45)
at Object.loader (D:\J-USER\desktop7\cli5_vue3\node_modules\vue-loader\dist\index.js:67:41)
@ ./src/views/AboutView.vue?vue&type=script&lang=ts&setup=true 1:0-250 1:0-250 1:251-490 1:251-490
@ ./src/views/AboutView.vue 2:0-71 3:0-66 3:0-66 6:49-55
@ ./src/router/index.ts 13:19-15:27
@ ./src/main.ts 3:0-30 5:30-36
ERROR in ./src/views/AboutView.vue?vue&type=template&id=4cebd208&ts=true (./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/AboutView.vue?vue&type=template&id=4cebd208&ts=true)
Module Error (from ./node_modules/vue-loader/dist/templateLoader.js):
[@vue/compiler-sfc] Unexpected token (5:15)
D:\J-USER\desktop7\cli5_vue3\src\views\AboutView.vue
11 |
12 | const msg = ref("ABC");
13 | const myObj = <{ [key: string]: string }>{
| ^
14 | a: "123"
15 | }
@ ./src/views/AboutView.vue?vue&type=template&id=4cebd208&ts=true 1:0-316 1:0-316
@ ./src/views/AboutView.vue 1:0-78 6:68-74 16:77-18:3 17:29-35 16:2-18:4
@ ./src/router/index.ts 13:19-15:27
@ ./src/main.ts 3:0-30 5:30-36
webpack compiled with 3 errors
No issues found.
感觉ts被当做tsx了,
<{ [key: string]: string }的<符号当做了一个html的tag.
但是在不使用语法糖时,如:
<script lang="ts"> import { defineComponent, ref } from 'vue' export default defineComponent({ name: 'HomeView', setup() { const msg = ref("ABC"); const myObj = <{ [key: string]: string }>{ a: "123" } msg.value = myObj.a; return { msg }; }, }) </script>是正常工作的