Skip to content

Commit ffb375e

Browse files
authored
Add more specific example code to Type Augmentation docs. (vuejs#1720)
I found the prose-only description a bit confusing and got stuck for a solid ten minutes trying to figure it out. I've added example code of what does and doesn't work, since I find that more immediately understandable.
1 parent 3a54e46 commit ffb375e

File tree

1 file changed

+20
-0
lines changed

1 file changed

+20
-0
lines changed

src/guide/typescript/options-api.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,26 @@ We can put this type augmentation in a `.ts` file, or in a project-wide `*.d.ts`
238238

239239
In order to take advantage of module augmentation, you will need to ensure the augmentation is placed in a [TypeScript module](https://www.typescriptlang.org/docs/handbook/modules.html). That is to say, the file needs to contain at least one top-level `import` or `export`, even if it is just `export {}`. If the augmentation is placed outside of a module, it will overwrite the original types rather than augmenting them!
240240

241+
```ts
242+
// Does not work, overwrites the original types.
243+
declare module 'vue' {
244+
interface ComponentCustomProperties {
245+
$translate: (key: string) => string
246+
}
247+
}
248+
```
249+
250+
```ts
251+
// Works correctly
252+
export {}
253+
254+
declare module 'vue' {
255+
interface ComponentCustomProperties {
256+
$translate: (key: string) => string
257+
}
258+
}
259+
```
260+
241261
## Augmenting Custom Options
242262

243263
Some plugins, for example `vue-router`, provide support for custom component options such as `beforeRouteEnter`:

0 commit comments

Comments
 (0)