From 0b728c771057a1cffd1084ba7dd065a9fc0dd328 Mon Sep 17 00:00:00 2001 From: ktsn Date: Mon, 24 Jul 2017 23:33:20 +0900 Subject: [PATCH 1/3] add a guide how to declare plugin typings --- src/v2/guide/typescript.md | 60 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index 4dd07c5486..b2508d6204 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -137,3 +137,63 @@ export default class MyComponent extends Vue { ``` With this syntax alternative, our component definition is not only shorter, but TypeScript can also infer the types of `message` and `onClick` without explicit interface declarations. This strategy even allows you to handle types for computed properties, lifecycle hooks, and render functions. For full usage details, see [the vue-class-component docs](https://github.com/vuejs/vue-class-component#vue-class-component). + +## Declaring Types of Vue Plugins + +Plugins may augment Vue's global/instance properties, component options and so on. For that case, augmenting type declaration is also needed to use plugins in TypeScript. Fortunately, there is a feature to augment an existing types that is called [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation). + +For example, if you want to declare an additional instance property `$myProperty` that has `string` type: + +```ts +// 1. Make sure to import 'vue' before declaring augmented types +import Vue from 'vue' + +// 2. Specify a file that have the type that you want to augment +// Vue has the constructor type in types/vue.d.ts +declare module 'vue/types/vue' { + // 3. Declare augmented Vue. + interface Vue { + $myProperty: string + } +} +``` + +After including the above code as a declaration file (like `my-property.d.ts`) in your project, you can use `$myProperty` on a Vue instance. + +```ts +var vm = new Vue() +console.log(vm.$myProperty) // This will be successfully compiled +``` + +You can declare additional global properties and component options as well: + +```ts +import Vue from 'vue' + +declare module 'vue/types/vue' { + // Global properties can be declared + // by using `namespace` instead of `interface` + namespace Vue { + const $myGlobal: string + } +} + +// ComponentOptions is declared in types/options.d.ts +declare module 'vue/types/options' { + interface ComponentOptions { + myOption?: string + } +} +``` + +The above declarations let the following code be compiled: + +```ts +// Global property +console.log(Vue.$myGlobal) + +// Additional component option +var vm = new Vue({ + myOption: 'Hello' +}) +``` From 95ecd0c94f907e4673a95ff20f897923b541d6b3 Mon Sep 17 00:00:00 2001 From: ktsn Date: Tue, 25 Jul 2017 01:42:12 +0900 Subject: [PATCH 2/3] improve wording --- src/v2/guide/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index b2508d6204..c986afcfdb 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -140,7 +140,7 @@ With this syntax alternative, our component definition is not only shorter, but ## Declaring Types of Vue Plugins -Plugins may augment Vue's global/instance properties, component options and so on. For that case, augmenting type declaration is also needed to use plugins in TypeScript. Fortunately, there is a feature to augment an existing types that is called [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation). +Plugins may add Vue's global/instance properties, component options and so on. For that case, type declaration also needs updates to make plugins code compile in TypeScript. Fortunately, there is a feature to augment an existing types that is called [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation). For example, if you want to declare an additional instance property `$myProperty` that has `string` type: From c85667ada807cd67aa6f705559c953935ecdd56f Mon Sep 17 00:00:00 2001 From: Chris Fritz Date: Tue, 25 Jul 2017 12:10:58 -0400 Subject: [PATCH 3/3] Slight tweak to working for declaring typescript types for plugins --- src/v2/guide/typescript.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index c986afcfdb..b6179ef6c3 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -140,18 +140,18 @@ With this syntax alternative, our component definition is not only shorter, but ## Declaring Types of Vue Plugins -Plugins may add Vue's global/instance properties, component options and so on. For that case, type declaration also needs updates to make plugins code compile in TypeScript. Fortunately, there is a feature to augment an existing types that is called [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation). +Plugins may add to Vue's global/instance properties and component options. In these cases, type declarations are needed to make plugins compile in TypeScript. Fortunately, there's a TypeScript feature to augment existing types called [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation). -For example, if you want to declare an additional instance property `$myProperty` that has `string` type: +For example, to declare an instance property `$myProperty` with type `string`: -```ts +``` ts // 1. Make sure to import 'vue' before declaring augmented types import Vue from 'vue' -// 2. Specify a file that have the type that you want to augment +// 2. Specify a file with the types you want to augment // Vue has the constructor type in types/vue.d.ts declare module 'vue/types/vue' { - // 3. Declare augmented Vue. + // 3. Declare augmentation for Vue interface Vue { $myProperty: string } @@ -165,7 +165,7 @@ var vm = new Vue() console.log(vm.$myProperty) // This will be successfully compiled ``` -You can declare additional global properties and component options as well: +You can also declare additional global properties and component options: ```ts import Vue from 'vue' @@ -186,7 +186,7 @@ declare module 'vue/types/options' { } ``` -The above declarations let the following code be compiled: +The above declarations allow the following code to be compiled: ```ts // Global property