From 575fc5099b946caf87f9a5128e34ab0b3c0bc58b Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Wed, 28 May 2025 08:43:22 +0800
Subject: [PATCH 1/2] fix(compiler-core): typed expressions should be wrapped
 in parentheses

---
 .../__snapshots__/transformExpressions.spec.ts.snap    | 10 ++++++++++
 .../__tests__/transforms/transformExpressions.spec.ts  |  6 ++++++
 .../src/transforms/transformExpression.ts              |  4 ++++
 3 files changed, 20 insertions(+)

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
index 5a94de5a68b..76531c30f2c 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
@@ -14,6 +14,16 @@ return function render(_ctx, _cache, $props, $setup, $data, $options) {
 }"
 `;
 
+exports[`compiler: expression transform > expression with type 1`] = `
+"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock("div", {
+    onClick: (_ctx.handleClick as any)
+  }, null, 8 /* PROPS */, ["onClick"]))
+}"
+`;
+
 exports[`compiler: expression transform > should allow leak of var declarations in for loop 1`] = `
 "const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
diff --git a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
index c92814089ef..c880588b49f 100644
--- a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
@@ -716,4 +716,10 @@ describe('compiler: expression transform', () => {
       })
     })
   })
+
+  test('expression with type', () => {
+    const { code } = compile(`<div @click="handleClick as any"></div>`)
+    expect(code).toMatch(`onClick: (_ctx.handleClick as any)`)
+    expect(code).toMatchSnapshot()
+  })
 })
diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index 9ae8897e674..37312215350 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -18,6 +18,7 @@ import {
   createSimpleExpression,
 } from '../ast'
 import {
+  TS_NODE_TYPES,
   isInDestructureAssignment,
   isInNewExpression,
   isStaticProperty,
@@ -347,6 +348,8 @@ export function processExpression(
   // an ExpressionNode has the `.children` property, it will be used instead of
   // `.content`.
   const children: CompoundExpressionNode['children'] = []
+  const shouldWrap = TS_NODE_TYPES.includes(ast.type)
+  if (shouldWrap) children.push('(')
   ids.sort((a, b) => a.start - b.start)
   ids.forEach((id, i) => {
     // range is offset by -1 due to the wrapping parens when parsed
@@ -376,6 +379,7 @@ export function processExpression(
       children.push(rawExp.slice(end))
     }
   })
+  if (shouldWrap) children.push(')')
 
   let ret
   if (children.length) {

From 6640358b69ba41bd93179bb9de07a63ef30e1245 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Wed, 28 May 2025 11:33:47 +0800
Subject: [PATCH 2/2] chore: remove types

---
 .../transformExpressions.spec.ts.snap              |  2 +-
 .../transforms/transformExpressions.spec.ts        |  6 ++++--
 .../src/transforms/transformExpression.ts          | 14 +++++++-------
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
index 76531c30f2c..8907962d81b 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
@@ -19,7 +19,7 @@ exports[`compiler: expression transform > expression with type 1`] = `
 
 return function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock("div", {
-    onClick: (_ctx.handleClick as any)
+    onClick: _ctx.handleClick
   }, null, 8 /* PROPS */, ["onClick"]))
 }"
 `;
diff --git a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
index c880588b49f..66025dd0f01 100644
--- a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
@@ -718,8 +718,10 @@ describe('compiler: expression transform', () => {
   })
 
   test('expression with type', () => {
-    const { code } = compile(`<div @click="handleClick as any"></div>`)
-    expect(code).toMatch(`onClick: (_ctx.handleClick as any)`)
+    const { code } = compile(
+      `<div @click="(<number>handleClick as any)"></div>`,
+    )
+    expect(code).toMatch(`onClick: _ctx.handleClick`)
     expect(code).toMatchSnapshot()
   })
 })
diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index 37312215350..be4b09bb67d 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -348,17 +348,18 @@ export function processExpression(
   // an ExpressionNode has the `.children` property, it will be used instead of
   // `.content`.
   const children: CompoundExpressionNode['children'] = []
-  const shouldWrap = TS_NODE_TYPES.includes(ast.type)
-  if (shouldWrap) children.push('(')
+  const isTSNode = TS_NODE_TYPES.includes(ast.type)
   ids.sort((a, b) => a.start - b.start)
   ids.forEach((id, i) => {
     // range is offset by -1 due to the wrapping parens when parsed
     const start = id.start - 1
     const end = id.end - 1
     const last = ids[i - 1]
-    const leadingText = rawExp.slice(last ? last.end - 1 : 0, start)
-    if (leadingText.length || id.prefix) {
-      children.push(leadingText + (id.prefix || ``))
+    if (!(isTSNode && i === 0)) {
+      const leadingText = rawExp.slice(last ? last.end - 1 : 0, start)
+      if (leadingText.length || id.prefix) {
+        children.push(leadingText + (id.prefix || ``))
+      }
     }
     const source = rawExp.slice(start, end)
     children.push(
@@ -375,11 +376,10 @@ export function processExpression(
           : ConstantTypes.NOT_CONSTANT,
       ),
     )
-    if (i === ids.length - 1 && end < rawExp.length) {
+    if (i === ids.length - 1 && end < rawExp.length && !isTSNode) {
       children.push(rawExp.slice(end))
     }
   })
-  if (shouldWrap) children.push(')')
 
   let ret
   if (children.length) {