使用<script lang="ts" setup>时,ts类型强制转换无效

[jaskle]

Version

3.2.33

Reproduction link

sfc.vuejs.org/

Steps to reproduce

使用 @vue/[email protected]" 创建的全新项目,然后添加以下代码:

<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>

是正常工作的

[jaskle]

我的问题在
Vue SFC Playground
运行竟然是正常的,我不清楚它和我的cli脚手架项目有什么不同

[edison1105]

看错误信息像是没有将ts的语法剥离掉。
能再提供一个最小复现的仓库吗？

[jaskle]

看看能不能将现在的仓库里复现的错误信息显示出来？

我使用@vue/[email protected]" 创建全新的代码项目

我在App.vue添加了代码

https://github.com/jaskle/vue3_ts_err.git

我非常喜欢用setup语法糖,希望能帮我找到问题

[liulinboyi]

如果在创建的时候选择了

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

在调用compiler-sfc中的compileScript时，会带上jsx插件

最后插件插件集是这些

这样就造成了，你想写ts，但是自动加上了jsx的情况，相当于自动变成了

<script setup lang="tsx">
import { ref } from 'vue'

const msg = ref('Hello World!')
const myObj = <{ [key: string]: string }>{
  a: "123"
}
msg.value = myObj.a;
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

因为这样写，在tsx中会报错

所以你的情况同样会遇到报错

[jaskle]

我特意关掉了Use Babel alongside TypeScript,问题还是存在
但是我测试了一下
#5846
确实修复了这个问题,期待正式发布.
五一快乐