TypeScript utility type for Vue.js $refs
npm install vue-typed-refs> TypeScript utility type for Vue.js $refs
``bash`
$ npm i vue-typed-refs -D
`bash`
$ yarn add vue-typed-refs --dev
`html`
`ts
import Vue from 'vue'
import { WithRefs } from 'vue-typed-refs'
// import type { WithRefs } from 'vue-typed-refs' TypeScript 3.8+
import YourAwesomeComponent from 'path/to/your/awesome/component'
type Refs = {
input: HTMLInputElement
component: InstanceType
underVIfElement?: HTMLDivElement
}
export default (Vue as WithRefs
name: 'Component',
methods: {
foo() {
this.$refs.input // HTMLInputElement
this.$refs.component // InstanceType
this.$refs.underVIfElement // HTMLDivElement | undefined
},
},
})
`
Extending extended components
`ts
// YourAwesomeExtendedComponent.vue
// ...
export default Vue.extend({
// ...
methods: {
baz() {},
},
// ...
})
`
`ts
// ...
import YourAwesomeExtendedComponent from 'path/to/your/awewsome/extended/component'
export default (YourAwesomeExtendedComponent as WithRefs<
Refs,
typeof YourAwesomeExtendedComponent
>).extend({})
`
If your project is written using TypeScript + Vue.js, likely your code contains a lot of as casting: (this.$refs.input as HTMLInputElement).focus() when deailing with $refs.
The most desperate ones even create a helper to access $refs doing as casting only once:
`ts`
{
// ...
methods: {
getInput() {
return this.$refs.input as HTMLInputElement
}
}
// ...
}
The library provides a convenient way to declare type of you $refs per component scope.
The idea was adopted from vue-class-component.
`bash`
npm run test
`bash``
npm run build