Skip to content

Commit d54490b

Browse files
authored
fix: avoid breakage by not to auto augment hooks type (#386)
* fix: avoid breakage not to auto augment hooks type * fix: add dummy hooks.js
1 parent 9742eef commit d54490b

File tree

5 files changed

+18
-3
lines changed

5 files changed

+18
-3
lines changed

Diff for: README.md

+15-1
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,21 @@ new Vue({
200200
})
201201
```
202202

203-
In TypeScript, all built-in lifecycle hools and special methods are declared in the component instance type to enable auto-complete in editors.
203+
### Enabling Custom Hooks Auto-complete in TypeScript
204+
205+
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`.
206+
207+
```ts
208+
// main.ts
209+
import 'vue-class-component/hooks' // import hooks type to enable auto-complete
210+
import Vue from 'vue'
211+
import App from './App.vue'
212+
213+
new Vue({
214+
render: h => h(App)
215+
}).$mount('#app')
216+
```
217+
204218
If you want to make it work with custom hooks, you can manually add it by yourself:
205219

206220
```ts

Diff for: src/lifecycle.ts renamed to hooks.d.ts

File renamed without changes.

Diff for: hooks.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// Dummy empty file to avoid import error when using hooks.d.ts

Diff for: package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"typings": "lib/index.d.ts",
88
"files": [
99
"dist",
10-
"lib"
10+
"lib",
11+
"hooks.d.ts"
1112
],
1213
"scripts": {
1314
"build": "npm run build:ts && npm run build:main",

Diff for: src/index.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import './lifecycle'
21
import Vue, { ComponentOptions } from 'vue'
32
import { VueClass } from './declarations'
43
import { componentFactory, $internalHooks } from './component'

0 commit comments

Comments
 (0)