fix(compiler-sfc): fix ref sugar rewrite for identifiers in ts casting expressions

fix #4254

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefSugar.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefSugar.spec.ts.snap
index f497091935cbc0c6cbcc1c8db5ff71f01479df30..6dc4229ce25b8561ce722e6c1210820d18f0e179 100644 (file)
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefSugar.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefSugar.spec.ts.snap
@@ -92,6 +92,23 @@ return { n, a, b, c }
 }"
 `;
 
+exports[`<script setup> ref sugar handle TS casting syntax 1`] = `
+"import { ref as _ref, defineComponent as _defineComponent } from 'vue'
+
+export default _defineComponent({
+  setup(__props, { expose }) {
+  expose()
+
+        let n = _ref<number | undefined>()
+        console.log(n.value!)
+        console.log(n.value as number)
+      
+return { n }
+}
+
+})"
+`;
+
 exports[`<script setup> ref sugar mixing $ref & $computed declarations 1`] = `
 "import { ref as _ref, computed as _computed } from 'vue'
 

diff --git a/packages/compiler-sfc/__tests__/compileScriptRefSugar.spec.ts b/packages/compiler-sfc/__tests__/compileScriptRefSugar.spec.ts
index f14fd6d53f5f36db433030c022e8698363d787f2..d479dbbf9fdd44b8c5c30cd8602be247aba26b6f 100644 (file)
--- a/packages/compiler-sfc/__tests__/compileScriptRefSugar.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptRefSugar.spec.ts
@@ -281,6 +281,24 @@ describe('<script setup> ref sugar', () => {
     expect(content).not.toMatch('.value')
   })
 
+  // #4254
+  test('handle TS casting syntax', () => {
+    const { content } = compile(
+      `
+      <script setup lang="ts">
+        let n = $ref<number | undefined>()
+        console.log(n!)
+        console.log(n as number)
+      </script>`,
+      {
+        refSugar: true
+      }
+    )
+    assertCode(content)
+    expect(content).toMatch('console.log(n.value!)')
+    expect(content).toMatch('console.log(n.value as number)')
+  })
+
   describe('errors', () => {
     test('non-let $ref declaration', () => {
       expect(() =>

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index a3f86a3dd96ac23ddbb96805328c19f9a4f0e0ad..b7f940fc89e4d0efd516a2c8aea91a417701bf36 100644 (file)
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1781,7 +1781,12 @@ export function walkIdentifiers(
   ;(walk as any)(root, {
     enter(node: Node & { scopeIds?: Set<string> }, parent: Node | undefined) {
       parent && parentStack.push(parent)
-      if (node.type.startsWith('TS')) {
+      if (
+        parent &&
+        parent.type.startsWith('TS') &&
+        parent.type !== 'TSAsExpression' &&
+        parent.type !== 'TSNonNullExpression'
+      ) {
         return this.skip()
       }
       if (onNode && onNode(node, parent!, parentStack) === false) {