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
Changes from 1 commit
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
Prev Previous commit
docs: state about to add lifecycle hook type
  • Loading branch information
ktsn committed Nov 11, 2019
commit 9fc35a16db324e0f4b40668ae2be3386fbcbecea
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