Better Typescript with Vue

[louiss0]

I'm here to talk about my experiences with using Vue and Typescript.
The version of Vue that I'm using is 3.4.21 and Vue - Official. I'm here to talk about some things that aren't great when it comes to using typescript with vue. I hope these problems can be solved.
My TS experience is slowed down my the mistakes mentioned here.

Directives aren't typed well

I have noticed that you aren't able to type modifiers or args in directives. I don't know why, but this has dismissed the usefulness of directives. Not only that when it comes to the global ones there is no way to assure that people can't type in bad modifiers in global directives. I believe this is a problem that needs to be solved. Args and modifiers are the most important part of a directive. They should be typeable. Otherwise, TS won't be able to tell about bugs.

Tag refs aren't associated with proper Element types

I have noticed that when I try to type in a function inside of refs, the first parameter is always. Element.

<dialog :ref="(el:Element)=> el.target">
</dialog>

This means I always have to write some code to check what the element is to be able to use it or do type casting for each ref.
In other words I have to write this.

 function dialogRef(el:Element){
   if(el instanceof HTMLDialogElement){
	el.target
   }
 }

Or this.

 function dialogRef(el:Element){
	const dialog = el as HTMLDialogElement
	dialog.showModal() 
   
 }

This is tedious.

If the dialog element that is passed was typed properly. It would look something like this.

<dialog :ref="(el:HtmlDialogElement|null)=> el" >
</dialog>

This means all I have to do is write this code. When I decide to write a method for the dialog element.

function dialogRef(el:HtmlDialogElement|null) {
el.target?.showModal()
}

The code I have written right now is simpler than the one before.

The problem is a fixable one. A function Ref has to be typed as on overload instead of what we have now, which is this. I also think it should be separated into its own type.

Instead of this

type VNodeRef = string | Ref | ((ref: Element | ComponentPublicInstance | null, refs: Record<string, any>) => void);

We can have this

interface FunctionRef{
(ref: Element | ComponentPublicInstance | null): void
((ref: Element | ComponentPublicInstance | null, refs: Record<string, any>): void)
}
type VNodeRef = string | Ref | FunctionRef;

This function ref should also work inside the template.

Event objects aren't typed based on Event type

One thing I've noticed from React that I don't think other frameworks have tried is typing Event Objects based on the types of handlers and tags. In Vue, every event is typed as simply Event.
In React, there is a type for every event. I can easily access the event target without ever having to check for the instance of the event target.

function Input() {
 return <input onChange={(event)=> event.target.value} />
}

The reason this is possible is that the function is inferred to be.

(e:ChangeEvent<HtmlInputElement>)=> void

These kinds of types are written based on each tag.

The benefit of doing types like this is that developers can get introduced to each Element's API in a faster and more satisfying way.

The type that react uses is something like this.

interface BaseSyntheticEvent<E = object, C = any, T = any> {
        nativeEvent: E;
        currentTarget: C;
        target: T;
    }
    interface SyntheticEvent<T = Element, E = Event> 
    extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> { }

In this example the BaseSyntheticEvent type is the type for all other events. The SyntheticEvent inherits from that type, making it easy to type all other events in React. In React there are many kinds of events. One for form FormEvent one for mouse MouseEvent and more.
Each of those types is eventually used to type the EventHandler type.

type EventHandler<E extends Event> = (e:E)=> void 

The type above is used to create many kinds of typed event handlers.

Doing this for makes it easy for developers to not only understand the elements that are written, but it makes the code it templates type-safe.

Writing an element grabber type.

There is a type that uses the name of a tag to grab element attribute types from a tag using an object that maps each tag name to its associated attributes. This type is useful for getting not just the attributes for one type but the attributes for multiple types. It created like this in Astro.

interface DefinedIntrinsicElements {

        // HTML

        a: AnchorHTMLAttributes;

        abbr: HTMLAttributes;

        address: HTMLAttributes;

        area: AreaHTMLAttributes;

        article: HTMLAttributes;

        aside: HTMLAttributes;

        audio: AudioHTMLAttributes;

        b: HTMLAttributes;

        base: BaseHTMLAttributes;

        bdi: HTMLAttributes;

        bdo: HTMLAttributes;

        big: HTMLAttributes;

        blockquote: BlockquoteHTMLAttributes;

        body: HTMLAttributes;

        br: HTMLAttributes;

        button: ButtonHTMLAttributes;

        canvas: CanvasHTMLAttributes;

        caption: HTMLAttributes;

        cite: HTMLAttributes;

        code: HTMLAttributes;

        col: ColHTMLAttributes;

        colgroup: ColgroupHTMLAttributes;

        data: DataHTMLAttributes;

        datalist: HTMLAttributes;

        dd: HTMLAttributes;

        del: DelHTMLAttributes;

        details: DetailsHTMLAttributes;

        dfn: HTMLAttributes;

        dialog: DialogHTMLAttributes;

        div: HTMLAttributes;

        dl: HTMLAttributes;

        dt: HTMLAttributes;

        em: HTMLAttributes;

        embed: EmbedHTMLAttributes;

        fieldset: FieldsetHTMLAttributes;

        figcaption: HTMLAttributes;

        figure: HTMLAttributes;

        footer: HTMLAttributes;

        form: FormHTMLAttributes;

        h1: HTMLAttributes;

        h2: HTMLAttributes;

        h3: HTMLAttributes;

        h4: HTMLAttributes;

        h5: HTMLAttributes;

        h6: HTMLAttributes;

        head: HTMLAttributes;

        header: HTMLAttributes;

        hgroup: HTMLAttributes;

        hr: HTMLAttributes;

        html: HtmlHTMLAttributes;

        i: HTMLAttributes;

        iframe: IframeHTMLAttributes;

        img: ImgHTMLAttributes;

        input: InputHTMLAttributes;

        ins: InsHTMLAttributes;

        kbd: HTMLAttributes;

        keygen: KeygenHTMLAttributes;

        label: LabelHTMLAttributes;

        legend: HTMLAttributes;

        li: LiHTMLAttributes;

        link: LinkHTMLAttributes;

        main: HTMLAttributes;

        map: MapHTMLAttributes;

        mark: HTMLAttributes;

        menu: MenuHTMLAttributes;

        menuitem: HTMLAttributes;

        meta: MetaHTMLAttributes;

        meter: MeterHTMLAttributes;

        nav: HTMLAttributes;

        noindex: HTMLAttributes; // https://en.wikipedia.org/wiki/Noindex#%3Cnoindex%3E_tag

        noscript: HTMLAttributes;

        object: ObjectHTMLAttributes;

        ol: OlHTMLAttributes;

        optgroup: OptgroupHTMLAttributes;

        option: OptionHTMLAttributes;

        output: OutputHTMLAttributes;

        p: HTMLAttributes;

        param: ParamHTMLAttributes;

        picture: HTMLAttributes;

        pre: HTMLAttributes;

        progress: ProgressHTMLAttributes;

        q: QuoteHTMLAttributes;

        rp: HTMLAttributes;

        rt: HTMLAttributes;

        ruby: HTMLAttributes;

        s: HTMLAttributes;

        samp: HTMLAttributes;

        slot: SlotHTMLAttributes & AstroSlotAttributes;

        script: ScriptHTMLAttributes & AstroScriptAttributes;

        section: HTMLAttributes;

        select: SelectHTMLAttributes;

        small: HTMLAttributes;

        source: SourceHTMLAttributes;

        span: HTMLAttributes;

        strong: HTMLAttributes;

        style: StyleHTMLAttributes & AstroStyleAttributes;

        sub: HTMLAttributes;

        summary: HTMLAttributes;

        sup: HTMLAttributes;

        table: TableHTMLAttributes;

        tbody: HTMLAttributes;

        td: TdHTMLAttributes;

        textarea: TextareaHTMLAttributes;

        tfoot: HTMLAttributes;

        th: ThHTMLAttributes;

        thead: HTMLAttributes;

        time: TimeHTMLAttributes;

        title: HTMLAttributes;

        tr: HTMLAttributes;

        track: TrackHTMLAttributes;

        u: HTMLAttributes;

        ul: HTMLAttributes;

        var: HTMLAttributes;

        video: VideoHTMLAttributes;

        wbr: HTMLAttributes;

  

        // SVG

        svg: SVGAttributes;

        animate: SVGAttributes;

        circle: SVGAttributes;

        clipPath: SVGAttributes;

        defs: SVGAttributes;

        desc: SVGAttributes;

        ellipse: SVGAttributes;

        feBlend: SVGAttributes;

        feColorMatrix: SVGAttributes;

        feComponentTransfer: SVGAttributes;

        feComposite: SVGAttributes;

        feConvolveMatrix: SVGAttributes;

        feDiffuseLighting: SVGAttributes;

        feDisplacementMap: SVGAttributes;

        feDistantLight: SVGAttributes;

        feFlood: SVGAttributes;

        feFuncA: SVGAttributes;

        feFuncB: SVGAttributes;

        feFuncG: SVGAttributes;

        feFuncR: SVGAttributes;

        feGaussianBlur: SVGAttributes;

        feImage: SVGAttributes;

        feMerge: SVGAttributes;

        feMergeNode: SVGAttributes;

        feMorphology: SVGAttributes;

        feOffset: SVGAttributes;

        fePointLight: SVGAttributes;

        feSpecularLighting: SVGAttributes;

        feSpotLight: SVGAttributes;

        feTile: SVGAttributes;

        feTurbulence: SVGAttributes;

        filter: SVGAttributes;

        foreignObject: SVGAttributes;

        g: SVGAttributes;

        image: SVGAttributes;

        line: SVGAttributes;

        linearGradient: SVGAttributes;

        marker: SVGAttributes;

        mask: SVGAttributes;

        metadata: SVGAttributes;

        path: SVGAttributes;

        pattern: SVGAttributes;

        polygon: SVGAttributes;

        polyline: SVGAttributes;

        radialGradient: SVGAttributes;

        rect: SVGAttributes;

        stop: SVGAttributes;

        switch: SVGAttributes;

        symbol: SVGAttributes;

        text: SVGAttributes;

        textPath: SVGAttributes;

        tspan: SVGAttributes;

        use: SVGAttributes;

        view: SVGAttributes;

    }
    
   type HTMLTag = keyof DefinedIntrinsicElements

type HTMLAttributes<Tag extends HTMLTag> = DefinedIntrinsicElements[Tag]

The example above is a simplified version. But the one that comes from Vue must not allow attributes that are specific to Vue. As in no ref.