❄️ DEPRECATION NOTICE ❄️
Official TypeScript support has been added to Vue.js 2.x and the old bindings have been changed considerably since this repository has been created. We recommend to start new projects with Vue CLI.
vue-typescript-component
Use TypeScript 2.0 classes as Vue.js 2.0 components primarily targeting a vueify setup.
Note: This projects targets TypeScript 2.0 and Vue.js 2.0, and uses the built-in type definitions provided by Vue.js 2.0. Please cf. package.json for the tested versions.
For a complete example project using this package, vueify, and supporting Hot Module Replacement, checkout https://github.com/locoslab/vue-typescript-component-example.
Usage
Install: npm install --save-dev vue-typescript-component
Note: TypeScript and Vue.js must be installed as well.
Example Component
// see note about import *.vue files below
The class can then be used in a *.vue
file:
...
While it would be possible to support inline TypeScript code in the vue
file itself, we prefer separate files to make use of existing IDE/editor and tooling support for TypeScript files.
Note: to use import
with *.vue
files in TypeScript code, cf. https://github.com/locoslab/vue-typescript-import-dts
Acknowledgements
There are a few other implementations using similar concepts. While this project has been implemented from scratch, https://github.com/itsFrank/vue-typescript and https://github.com/usystems/vuejs-typescript-component have been helpful during development. If this project does not meet your needs, check out the others!
Why this one:
- Targets Vue.js 2.0.1
- Works great with vueify which brings Hot Module Replacement
- Supports Vue.js 2 template pre-compilation during bundling (using vueify)
- Uses the new type definitions shipped with Vue.js 2.0.1
- Smart props:
- if the prop is initialized, the type and default value is set for the prop definition and
required=false
- else the prop is marked as required
- these settings can be overridden by providing an explicit
PropsOptions
parameter to the decorator
- if the prop is initialized, the type and default value is set for the prop definition and
Contributing
Contributions including bug reports, tests, and documentation are more than welcome. To get started with development:
# once: install dependenciesnpm install# run unit tests in watch modenpm test -- --watch# lint & testnpm run prepublish