fix(compiler-sfc): fix ref sugar rewrite for identifiers in ts castin…

…g expressions fix #4254
vuejs · Aug 6, 2021 · 865b84b · 865b84b
1 parent 86d78d1
commit 865b84b
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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) {