Can custom hooks have hints and type inference like useTemplateRef?

[tbontb-iaq]

The newly added useTemplateRef is a great feature with ref key hints and type inference provided by @vue/language-tools. Can this useful feature be enjoyed in user-defined hooks?

Before:

const div = useTemplateRef('my_div')
useMyHooks(div)

After:

useMyHooks('my_div')

I think it might look like this:

function useMyHooks<Keys extends string = string /** @vue-template-ref {HTMLDivElement} */>(keys: Keys) {}

[gitboyzcf]

// 假设你在模板中使用了这个模板引用
// <div ref="my_div"></div>

// 定义自定义钩子，支持类型推断
function useMyHooks<RefName extends string>(refName: RefName) {
  // 模拟根据 refName 获取到模板引用的类型
  // 通过条件类型根据不同的 ref 名称推断对应的元素类型
  let ref: RefName extends "my_div" ? HTMLDivElement :
           RefName extends "my_button" ? HTMLButtonElement :
           never;
  
  // 返回一个类型安全的 ref
  return ref;
}

// 使用该钩子时，会自动推断类型
const div = useMyHooks("my_div");  // div 的类型将推断为 HTMLDivElement
const button = useMyHooks("my_button");  // button 的类型将推断为 HTMLButtonElement

[tbontb-iaq]

我要像 useTemplateRef 一样支持任意字符串

[KazariEX]

在 tsconfig 里指定 vueCompilerOptions.composables.useTemplateRef 为 ["useTemplateRef", ... ] 加上你自己的 API，然后给这个可组合项的第一个参数以及一二两个泛型参数设置成和 useTemplateRef 一样就行。

另外在 language-tools 下个版本发布之前得先用 composibles （因为我手残打错了），你可以先试试看看行不行。