Skip to content

feat: add lifecycle types into vue instance type #371

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 11, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,37 @@ new Vue({
})
```

In TypeScript, all built-in lifecycle hools and special methods are declared in the component instance type to enable auto-complete in editors.
If you want to make it work with custom hooks, you can manually add it by yourself:

```ts
import Vue from 'vue'
import { Route, RawLocation } from 'vue-router'

declare module 'vue/types/vue' {
// Augment component instance type
interface Vue {
beforeRouteEnter?(
to: Route,
from: Route,
next: (to?: RawLocation | false | ((vm: V) => any) | void) => void
): void

beforeRouteLeave?(
to: Route,
from: Route,
next: (to?: RawLocation | false | ((vm: V) => any) | void) => void
): void

beforeRouteUpdate?(
to: Route,
from: Route,
next: (to?: RawLocation | false | ((vm: V) => any) | void) => void
): void
}
}
```

Comment on lines +204 to +233

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ktsn In which file should this code be added?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Create a new .ts file in your project and write in it. You may want to see Vue.js TypeScript guide. https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins

### Caveats of Class Properties

vue-class-component collects class properties as Vue instance data by instantiating the original constructor under the hood. While we can define instance data like native class manner, we sometimes need to know how it works.
Expand Down
1 change: 1 addition & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import './lifecycle'
import Vue, { ComponentOptions } from 'vue'
import { VueClass } from './declarations'
import { componentFactory, $internalHooks } from './component'
Expand Down
20 changes: 20 additions & 0 deletions src/lifecycle.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { VNode } from 'vue'

declare module 'vue/types/vue' {
interface Vue {
data?(): object
beforeCreate?(): void
created?(): void
beforeMount?(): void
mounted?(): void
beforeDestroy?(): void
destroyed?(): void
beforeUpdate?(): void
updated?(): void
activated?(): void
deactivated?(): void
render?(createElement: CreateElement): VNode
errorCaptured?(err: Error, vm: Vue, info: string): boolean | undefined
serverPrefetch?(): Promise<unknown>
}
}