From 776152605229c88f9dbef4f938e75aed8736f932 Mon Sep 17 00:00:00 2001 From: tycho Date: Thu, 27 Mar 2025 12:08:15 +0800 Subject: [PATCH 1/2] docs: add typing support documentation for plugins --- src/guide/reusability/plugins.md | 2 + src/guide/typescript/composition-api.md | 50 +++++++++++++++++++++++++ 2 files changed, 52 insertions(+) diff --git a/src/guide/reusability/plugins.md b/src/guide/reusability/plugins.md index a9d653eb92..0824727e63 100644 --- a/src/guide/reusability/plugins.md +++ b/src/guide/reusability/plugins.md @@ -139,3 +139,5 @@ export default { ### Bundle for NPM If you further want to build and publish your plugin for others to use, see [Vite's section on Library Mode](https://vitejs.dev/guide/build.html#library-mode). + +See also: [Typing Plugins](/guide/typescript/composition-api#typing-plugins) diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md index 2368dc0f78..dea671eacf 100644 --- a/src/guide/typescript/composition-api.md +++ b/src/guide/typescript/composition-api.md @@ -476,3 +476,53 @@ const openModal = () => { ``` Note that with `@vue/language-tools` 2.1+, static template refs' types can be automatically inferred and the above is only needed in edge cases. + +## Typing Plugins {#typing-plugins} + +Vue provides built-in type support for plugins. There are two types of plugins: object plugins and function plugins. The type of the plugin will be automatically inferred by `app.use()`: + +```ts +import { type App, createApp } from 'vue' + +const app = createApp({}) + +const objectPlugin = { + install(app: App, options1: { foo: number }, options2: { bar: number }) { + // ... + } +} +app.use(objectPlugin, { foo: 1 }, { bar: 2 }) +app.use(objectPlugin, { foo: 1 }) // => TS Error: Expected 2 arguments, but got 1. + +const functionPlugin = (app: App, options1: { foo: number }) => { + // ... +} +app.use(functionPlugin, { foo: 1 }) +``` + +Vue provides a `Plugin` utility type to represent both plugin types. You can use it to define your plugin with proper type checking: + +```ts +import { type Plugin, createApp } from 'vue' + +const app = createApp({}) + +// Define plugin with array type parameters +const objectPlugin: Plugin< + [options1: { foo: number }, options2?: { bar: number }] +> = { + install(app, options1, options2) { + // ... + } +} +app.use(objectPlugin, { foo: 1 }) + +// Optional parameters +const functionPlugin: Plugin<[options?: { foo: number }]> = ( + app, + options +) => { + // ... +} +app.use(functionPlugin) +``` From 13c4d1052cb502ffa0814712161f997c94a8022f Mon Sep 17 00:00:00 2001 From: tycho Date: Fri, 11 Apr 2025 14:36:30 +0800 Subject: [PATCH 2/2] tweaks --- src/guide/reusability/plugins.md | 50 ++++++++++++++++++++++++- src/guide/typescript/composition-api.md | 50 ------------------------- 2 files changed, 49 insertions(+), 51 deletions(-) diff --git a/src/guide/reusability/plugins.md b/src/guide/reusability/plugins.md index 0824727e63..bbd80e89c1 100644 --- a/src/guide/reusability/plugins.md +++ b/src/guide/reusability/plugins.md @@ -140,4 +140,52 @@ export default { If you further want to build and publish your plugin for others to use, see [Vite's section on Library Mode](https://vitejs.dev/guide/build.html#library-mode). -See also: [Typing Plugins](/guide/typescript/composition-api#typing-plugins) +## Typing Plugins {#typing-plugins} + +Vue provides built-in type support for plugins. There are two types of plugins: object plugins and function plugins. The type of the plugin will be automatically inferred by `app.use()`: + +```ts +import { type App, createApp } from 'vue' + +const app = createApp({}) + +const objectPlugin = { + install(app: App, options1: { foo: number }, options2: { bar: number }) { + // ... + } +} +app.use(objectPlugin, { foo: 1 }, { bar: 2 }) +app.use(objectPlugin, { foo: 1 }) // => TS Error: Expected 2 arguments, but got 1. + +const functionPlugin = (app: App, options1: { foo: number }) => { + // ... +} +app.use(functionPlugin, { foo: 1 }) +``` + +Vue provides a `Plugin` utility type to represent both plugin types. You can use it to define your plugin with proper type checking: + +```ts +import { type Plugin, createApp } from 'vue' + +const app = createApp({}) + +// Define plugin with array type parameters +const objectPlugin: Plugin< + [options1: { foo: number }, options2?: { bar: number }] +> = { + install(app, options1, options2) { + // ... + } +} +app.use(objectPlugin, { foo: 1 }) + +// Optional parameters +const functionPlugin: Plugin<[options?: { foo: number }]> = ( + app, + options +) => { + // ... +} +app.use(functionPlugin) +``` diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md index dea671eacf..2368dc0f78 100644 --- a/src/guide/typescript/composition-api.md +++ b/src/guide/typescript/composition-api.md @@ -476,53 +476,3 @@ const openModal = () => { ``` Note that with `@vue/language-tools` 2.1+, static template refs' types can be automatically inferred and the above is only needed in edge cases. - -## Typing Plugins {#typing-plugins} - -Vue provides built-in type support for plugins. There are two types of plugins: object plugins and function plugins. The type of the plugin will be automatically inferred by `app.use()`: - -```ts -import { type App, createApp } from 'vue' - -const app = createApp({}) - -const objectPlugin = { - install(app: App, options1: { foo: number }, options2: { bar: number }) { - // ... - } -} -app.use(objectPlugin, { foo: 1 }, { bar: 2 }) -app.use(objectPlugin, { foo: 1 }) // => TS Error: Expected 2 arguments, but got 1. - -const functionPlugin = (app: App, options1: { foo: number }) => { - // ... -} -app.use(functionPlugin, { foo: 1 }) -``` - -Vue provides a `Plugin` utility type to represent both plugin types. You can use it to define your plugin with proper type checking: - -```ts -import { type Plugin, createApp } from 'vue' - -const app = createApp({}) - -// Define plugin with array type parameters -const objectPlugin: Plugin< - [options1: { foo: number }, options2?: { bar: number }] -> = { - install(app, options1, options2) { - // ... - } -} -app.use(objectPlugin, { foo: 1 }) - -// Optional parameters -const functionPlugin: Plugin<[options?: { foo: number }]> = ( - app, - options -) => { - // ... -} -app.use(functionPlugin) -```