From 865b84bfe81622626152e9c571cd26f30ba37bd5 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 6 Aug 2021 12:55:48 -0400
Subject: [PATCH] fix(compiler-sfc): fix ref sugar rewrite for identifiers in
 ts casting expressions

fix #4254
---
 .../compileScriptRefSugar.spec.ts.snap         | 17 +++++++++++++++++
 .../__tests__/compileScriptRefSugar.spec.ts    | 18 ++++++++++++++++++
 packages/compiler-sfc/src/compileScript.ts     |  7 ++++++-
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefSugar.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefSugar.spec.ts.snap
index f497091935c..6dc4229ce25 100644
--- 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 f14fd6d53f5..d479dbbf9fd 100644
--- 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 a3f86a3dd96..b7f940fc89e 100644
--- 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) {