We have been receiving requests for better TypeScript integration ever since the release of Vue 2.0. Since the release, we have included official TypeScript type declarations for most of the core libraries (
vuex). However, the current integration is somewhat lacking when using the out-of-the-box Vue API. For example, TypeScript cannot easily infer the type of
this inside the default object-based API that Vue uses. To make our Vue code play nicely with TypeScript, we have to use the
vue-class-component decorator, which allows us to author Vue components using a class-based syntax.
For users that preferred a class-based API, this was probably good enough, but it was a bit unfortunate that users had to use a different API just for the sake of type inference. This also made migrating existing Vue codebases to TypeScript more challenging.
Earlier this year, TypeScript introduced a number of new features that makes it possible to improve Vue’s type declarations so that TypeScript can better understand the object literal based API. Daniel Rosenwasser from the TypeScript team started an ambitious PR (now being maintained here by core team member HerringtonDarkholme) which, once merged, will provide:
- Proper type inference for
thiswhen using the default Vue API. It also works inside single-file components!
- Type inference for props on
thisbased on the component’s
vue-language-server, the internal package that is responsible for analyzing Vue components, can take advantage of the TypeScript compiler to extract more information about your code. Moreover, any editor that supports the language server protocol can leverage
vue-language-serverto provide similar features.
For those who are curious, you can try it out today by cloning this playground project (make sure to checkout the
new-types branch) and opening it with VSCode + Vetur!
Potential Required Actions for TypeScript Users
- The new typings require a minimum of TypeScript 2.4, and it’s recommended to upgrade to the latest version of TypeScript along with Vue 2.5.
- Previously, we already recommend using ES-style imports (
import Vue from ‘vue’) everywhere with
tsconfig.json. The new typings will officially move to ES-style import/export syntax, so that config is no longer necessary, and users are required to use ES-style imports in all cases.
- To accompany the export syntax change, the following core libraries that have typings relying on Vue core typing will receive new major versions, and should be upgraded along with Vue core 2.5:
- When performing custom module augmentations, the user should now use
interface VueConstructorinstead of
namespace Vue. (example diff)
- ThisType of
renderand lifecycle hooks will need manual type annotations if you annotate your component options with
We have tried our best to minimize required upgrading efforts and these type improvements are compatible with the class-based API used in
vue-class-component. For most users, simply upgrading the dependencies and switching to ES-style imports should be all it takes. In the meanwhile, we also recommend locking your Vue version to
2.4.x until you are ready to upgrade.
On the Roadmap: TypeScript Support in vue-cli
After 2.5, we are planning to introduce official support for TypeScript in the next version of vue-cli in order to make it easier for TS+Vue users to kick off new projects. Stay tuned!
For non-TypeScript users
vue-language-server powered editor extension.