Typing Directives Properly

[louiss0]

Typing Directives Properly

Motivation

I had recently made a discussion about a way of specifying that a directive should be typed properly. But I learned that typing's for value in directives are already supported. But modifiers and arg should also be supported as well. With that being said, here are the new typing's for Directives.

The reason I decided to do this is so that directives can be useable. Without good TS support, function refs would have to be used for what directives are meant for. While function refs are good and do the same thing, most of the time, directives are more powerful and allow you it's user to do clean up.

API Design

Directive Binding

interface DirectiveBinding<V = any, M extends DirectiveModifiers,
A extends string> {

    instance: ComponentPublicInstance | null;

    value: V;

    oldValue: V | null;

    arg?: A;

    modifiers: M;

    dir: ObjectDirective<any, V>;

}

Directive Hook

type DirectiveHook<
T extends HTMLELement, 
V = any,
M extends Record<string, boolean> = Record<string, boolean>,
A extends string  = string,
Prev = VNode<any, T> , 
> = (
el: T, 
binding: DirectiveBinding<V,M,A>, 
vnode: VNode<any, T>, 
prevVNode: Prev | null) => void;

Function Directive

type FunctionDirective<
T extends HTMLELement,
V = any,
TModifiers extends Record<string, boolean>,
TArg extends string  
>= DirectiveHook<T,V,TModifiers,TArg>

The types above are what are needed to support typed directives. I believe people will use modifiers more than Args. I think it's up to you to decide which is better. Args are generally used to make a completely different thing happen inside a directive. While modifiers are used to change what happens in a directive.

P.S

I don't know how Volar works behind the scenes so I guess this is the best I could do to help. This discussion is mostly a reminder.