fix(ref-transform): should transform $ref when used with generic argu…

…ments (#4446)

fix #4442

packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap

@@ -42,6 +42,22 @@ return { foo, a, b, c, d }
 }"
 `;
 
+exports[`sfc ref transform usage /w typescript 1`] = `
+"import { ref as _ref, defineComponent as _defineComponent } from 'vue'
+
+export default _defineComponent({
+  setup(__props, { expose }) {
+  expose()
+
+        let msg = _ref<string | number>('foo');
+        let bar = _ref <string | number>('bar');
+      
+return { msg, bar }
+}
+
+})"
+`;
+
 exports[`sfc ref transform usage in normal <script> 1`] = `
 "import { ref as _ref } from 'vue'
 

packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts

@@ -99,6 +99,19 @@ describe('sfc ref transform', () => {
     assertCode(content)
   })
 
+  test('usage /w typescript', () => {
+    const { content } = compileWithRefTransform(`
+      <script setup lang="ts">
+        let msg = $ref<string | number>('foo');
+        let bar = $ref <string | number>('bar');
+      </script>
+    `)
+    expect(content).toMatch(`import { ref as _ref`)
+    expect(content).toMatch(`let msg = _ref<string | number>('foo')`)
+    expect(content).toMatch(`let bar = _ref <string | number>('bar')`)
+    assertCode(content)
+  })
+
   test('usage with normal <script> + <script setup>', () => {
     const { content, bindings } = compileWithRefTransform(`<script>
     let a = $ref(0)

packages/ref-transform/src/refTransform.ts

@@ -25,7 +25,7 @@ import { babelParserDefaultPlugins } from '@vue/shared'
 const TO_VAR_SYMBOL = '$'
 const TO_REF_SYMBOL = '$$'
 const shorthands = ['ref', 'computed', 'shallowRef']
-const transformCheckRE = /[^\w]\$(?:\$|ref|computed|shallowRef)?\(/
+const transformCheckRE = /[^\w]\$(?:\$|ref|computed|shallowRef)?\s*(\(|\<)/
 
 export function shouldTransform(src: string): boolean {
   return transformCheckRE.test(src)