TS 标注类型的问题

[DemoPan]

准确来说，这个不是Vue中使用TS的疑惑。标注类型是从哪里来的？文档里面给了怎么标注ref(), 所以我知道需要导入type Ref。

这里我自定义一个指令，created函数有四个参数，从哪来能找到这个四个参数的类型？

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

const year: Ref<string | number> = ref('2020')

const vHello = {
  created(el, binding, vnode, prevVnode) {
    console.log(el, binding, vnode, prevVnode)
  }
}
</script>

[chenxch]

不知道能不能说和类型推导大概类似，在不清楚属性声明的时候，首先你肯定知道你要定义的是一个什么类型的东西，比如你这个是要定义一个指令对象，那你需要先找到指令类型的对象，比如

import type { ObjectDirective } from 'vue';
const vHello: ObjectDirective  = {
  created(el, binding, vnode, prevVnode) {
    console.log(el, binding, vnode, prevVnode)
  }
}

之后就会有类型提示了哈，
然后Ref那边写法可以简化

const year = ref<string | number>('2020')

希望这个能解决你的疑问~

[DemoPan]

这么写简单好多。你说的对，主要是不知道定义的是什么, vHello是一个指令定义的对象，但是并不知道vHello是一个ObjectDirective。这个ObjectDirective是怎么来的？

[chenxch]

这个还是回到那个推导的问题，首先你要知道你的指令类型是Directive，它是ObjectDirective和FunctionDirective的联合类型，你要问如何一下就知道，这个估计有点难哈

[DemoPan]

通过在#7298中讨论，感觉从 createApp(App)上找到对应的api，cmd点击一层层看声明文件是一个办法。
例如 createApp(App).directive对应的声明。

// directive
directive(name: string, directive: Directive): this;

// Directive
export declare type Directive<T = any, V = any> = ObjectDirective<T, V> | FunctionDirective<T, V>;

// ObjectDirective
export declare interface ObjectDirective<T = any, V = any> {
    created?: DirectiveHook<T, null, V>;
    beforeMount?: DirectiveHook<T, null, V>;
    mounted?: DirectiveHook<T, null, V>;
    beforeUpdate?: DirectiveHook<T, VNode<any, T>, V>;
    updated?: DirectiveHook<T, VNode<any, T>, V>;
    beforeUnmount?: DirectiveHook<T, null, V>;
    unmounted?: DirectiveHook<T, null, V>;
    getSSRProps?: SSRDirectiveHook;
    deep?: boolean;
}

// DirectiveHook
export declare type DirectiveHook<T = any, Prev = VNode<any, T> | null, V = any> = (el: T, binding: DirectiveBinding<V>, vnode: VNode<any, T>, prevVNode: Prev) => void;

可以看到DirectiveHook是一个类型别名，用来约束created的函数参数和返回值

[DemoPan]

除了这种办法，各位还有什么别的好办法吗？