feat: add types when creating global directives

[mitjans]

Right now, when you want to create a typed global directive you have to:

import { createApp, type Directive } from 'vue'

const app = createApp(App);

app.directive('custom', <Directive<HTMLElement, string>>{
  mounted(element, { value }) {
    // `element` has type `HtmlElement`
    // `value` has type `string`
  }
});

Also, if you want to create a FunctionDirective, you will have to provide the typings outside, if not, TS will complain:

const custom: Directive<HTMLElement, string> = (element, { value }) => {
  // `element` has type `HtmlElement`
  // `value` has type `string`
};

app.directive('custom', custom);

With this PR, you will be able to provide Directive typings without having to import type Directive and without having to cast the object/function inline:

// Global directive
app.directive<HTMLElement, string>('custom', {
  mounted(element, { value }) {
    // `element` has type `HtmlElement`
    // `value` has type `string`
  }
});

// Function directive
app.directive<HTMLElement, string>('custom', (element, { value }) => {
  // `element` has type `HtmlElement`
  // `value` has type `string`
});

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	86.7 kB	33 kB	29.8 kB
vue.global.prod.js	133 kB	49.8 kB	44.6 kB

Usages

Name	Size	Gzip	Brotli
createApp	48.2 kB	19 kB	17.4 kB
createSSRApp	51.5 kB	20.3 kB	18.5 kB
defineCustomElement	50.6 kB	19.7 kB	18 kB
overall	61.6 kB	23.8 kB	21.7 kB