Add support to customRef with separate types for get and set functions

[Foair]

Problem Overview

In the current version of Vue, when using customRef to create custom refs, it’s required that the get and set functions have the same type. Otherwise, it results in a TypeScript error. However, I would like customRef to support separate types for the get and set functions to meet specific requirements.

Details

I am attempting to write the following code to fulfill a particular use case:

<script setup lang="ts">
import { customRef, type Ref } from 'vue';

async function fetchSuggestions(keyword = ''): Promise<string[]> {
  await new Promise(resolve => setTimeout(resolve, Math.random() * 500 + 500));
  return [`random suggestion for '${keyword}'`];
}

function switchAsyncRef<T>(initial: Promise<T>): Ref<T | null> {
  let id = 0;
  let value: T | null = null;
  const myRef = customRef((track, trigger) => ({
    // 🚫 Type '() => T | null' is not assignable to type '() => T | Promise<T>'.
    get(): typeof value {
      track();
      return value;
    },
    async set(newValue: Promise<T> | T) {
      const currentId = ++id;
      const resolvedValue = await newValue;
      if (currentId !== id) return;
      value = resolvedValue;
      trigger();
    },
  }));
  myRef.value = initial;
  // 🚫 Type 'Ref<unknown>' is not assignable to type 'Ref<T | null>'.
  return myRef;
}

const suggestions = switchAsyncRef(fetchSuggestions());
</script>

<template>
  <input
    type="text"
    @input="
      (suggestions as unknown as Promise<typeof suggestions>) =
        fetchSuggestions(($event.target as HTMLInputElement).value)
    "
  />
  <ul v-if="suggestions">
    <li v-for="suggestion in suggestions">{{ suggestion }}</li>
  </ul>
</template>

Expected Behavior

I expect customRef to support separate types for the get and set functions, enabling the successful compilation of the above code.

BTW, TypeScript can do this:

interface O {
  get name(): string;
  set name(val: string | Promise<string>);
}

Actual Behavior

Currently, TypeScript reports errors because the get and set functions have incompatible types. Additionally, the use of suggestions in the template also requires type assertion, which is something I’d prefer to avoid.

Additional Information

Vue: 3.3.4
TypeScript: 5.1.6