Type to improve

Since the release of Vue2.0, we’ve been receiving requests for better TypeScript integration. Since then, we’ve added official TypeScript type declarations for most of our core libraries (VUE, VUE-Router, VUex). However, the current integration is lacking when using the Vue API out of the box. For example, TypeScript cannot easily infer the this type from the default object-based API used by Vue. To make our Vue code work better with TypeScript, we need to use the vue-class-Component decorator, which allows us to write Vue components using class-based syntax.

This may be good enough for users who prefer class-based apis, but it’s a bit bad that users have to use a different API just for type determination. This also makes migrating existing Vue code bases to TypeScript more challenging.

Earlier this year, TypeScript introduced some new features that make iT easier for TypeScript to understand apis based on object literals, which also makes it possible to improve Vue type declarations. Daniel Rosenwasser from the TypeScript team has launched an ambitious PR (now held by core team member HerringtonDarkholme) that, once merged, will provide:

  • When using the default Vue APIthisCorrect type inference for. This also works well in single-file components!
  • component-basedpropsConfiguration of thethisthepropsType inference.
  • And more importantly,These improvements will also benefit pure JavaScript users!If you are cooperating greatVeturThe extension uses VSCode, and you’ll see significant improvements to autocomplete hints and even type hints when using pure JavaScript in Vue components! This is because[vue-language-server](https://www.npmjs.com/package/vue-language-server), an internal package that analyzes Vue components and uses the TypeScript compiler to extract more information about your code. In addition, any editor that supports the language service protocol can be usedvue-language-serverTo provide similar functionality.

Running VSCode + Vetur + new type declaration

If you’re interested, clone the experience project (make sure it’s the new-types branch) and open it with VSCode + Vetur to try it out.

Actions that TypeScript users might need

The type improvements will be implemented in VUE 2.5, which is currently scheduled for release around early October. We are releasing a small version because the JavaScript public API has not yet made a breakthrough change, but the upgrade may require some action from existing Vue+TypeScript users. That’s why we’re announcing the changes now, so you have enough time to plan the upgrade.

  • New types require TypeScript version 2.4 at least. It is recommended that you upgrade to the latest TypeScript version with Vue2.5.
  • Previously, we have suggested intsconfig.jsonIn the configuration"allowSyntheticDefaultImports": trueTo use ES style imports (import Vue from 'vue'). The new type will formally convert to an ES style import/export syntax, so that the above configuration is not required, and users will use ES style imports in all cases.
  • In order to accommodate the export syntax changes, the following libraries with Vue core type dependencies will have a major version upgrade and will need to be upgraded with Vue2.5:vuex.vue-router.vuex-router-sync.vue-class-component.
  • Now, users need to use it when customizing module extensionsinterface VueConstructorTo take the place ofnamespace Vue(Differences in contrast)
  • If you useas ComponentOptions<something>To comment your component configuration, likecomputed.watch.renderAnd lifecycle hooks require manual type annotation.

We tried to minimize the additional impact of the upgrade and make these type improvements compatible with the class-based API used in vue-class-Component. For the vast majority of users, just upgrade the dependencies and switch to ES style imports. We also recommend that you lock your Vue version to 2.4.x until you are ready to upgrade.

Blueprint: VUE – TypeScript type support in CLI

After 2.5, we plan to introduce official TypeScript support in the next vue-CLI release so that TS+Vue users can easily launch new projects. Stay tuned!

For non-typescript users

These changes do not adversely affect non-typescript users; In terms of common JavaScript apis, 2.5 will be fully backward compatible, and TypeScript CLI integration is fully optional. But as mentioned just now, if you use [vue – language – server] (https://github.com/vuejs/vetur/tree/master/server) editor extension, you will receive a better auto-complete suggests.

–

Thanks to Daniel Rosenwasser, HerringtonDarkholme, Katashin, and Pine Wu for their work on these features and for reviewing this article.