Skip to content

Commit

Permalink
fix: avoid breakage by not to auto augment hooks type (#386)
Browse files Browse the repository at this point in the history
* fix: avoid breakage not to auto augment hooks type

* fix: add dummy hooks.js
  • Loading branch information
ktsn authored Jan 12, 2020
1 parent 9742eef commit d54490b
Show file tree
Hide file tree
Showing 5 changed files with 18 additions and 3 deletions.
16 changes: 15 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,21 @@ 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.
### Enabling Custom Hooks Auto-complete in TypeScript

vue-class-component provides a built-in hooks type, which enables auto-complete for `data`, `render` and other lifecycle hooks in class component declarations, for TypeScript. To enable it, you need to import hooks type located at `vue-class-component/hooks`.

```ts
// main.ts
import 'vue-class-component/hooks' // import hooks type to enable auto-complete
import Vue from 'vue'
import App from './App.vue'

new Vue({
render: h => h(App)
}).$mount('#app')
```

If you want to make it work with custom hooks, you can manually add it by yourself:

```ts
Expand Down
File renamed without changes.
1 change: 1 addition & 0 deletions hooks.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// Dummy empty file to avoid import error when using hooks.d.ts
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
"typings": "lib/index.d.ts",
"files": [
"dist",
"lib"
"lib",
"hooks.d.ts"
],
"scripts": {
"build": "npm run build:ts && npm run build:main",
Expand Down
1 change: 0 additions & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import './lifecycle'
import Vue, { ComponentOptions } from 'vue'
import { VueClass } from './declarations'
import { componentFactory, $internalHooks } from './component'
Expand Down

0 comments on commit d54490b

Please sign in to comment.