TypeScript improvements in Vue 2.5

Type Improvements

Since the release of Vue2.0, we have been receiving requests for better integration of TypeScript. Since then, we have added official TypeScript type declarations for most of the core libraries (vue, vue-router, vuex). However, when using the out-of-the-box Vue API, current integration is lacking. For example: TypeScript cannot easily infer the this type in 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.

For users who prefer class-based APIs, this may be good enough, but what's a little bit worse is that users have to use different APIs just for type determination. This also makes migrating existing Vue codebases to TypeScript more challenging.

Earlier this year, TypeScript introduced some new features that allow TypeScript to better understand object literal-based APIs, which also makes it more possible to improve Vue’s type declarations. Daniel Rosenwasser from the TypeScript team launched an ambitious PR (now held by core team member Herrington Darkholme) that, once merged, will provide:

• When using the default Vue API Correct type inference for this. This works great in single file components too!

• Type inference based on the props of the component's props configuration.

More importantly,
• These improvements will benefit pure JavaScript users too!

  , if you are using VSCode with the awesome Vetur extension, you will experience significant improvements in auto-completion hints and even type hints when using pure JavaScript in Vue components! This is because vue-language-server, the internal package that analyzes Vue components, can leverage the TypeScript compiler to extract more information about your code. In addition, any editor that supports the language service protocol can use vue-language-server to provide similar functionality.

##Running VSCode + Vetur + New Type Declaration

If you are interested, clone this experience project (make sure it is the

new-types

branch) and open it using VSCode + Vetur to try it out.

Operations that TypeScript users may need

Type improvements will be implemented in vue 2.5, which is currently planned to be released around early October. We are releasing a minor version because there are no breaking changes to the JavaScript public API yet, however, upgrading may require some action for existing Vue+TypeScript users. That's why we're announcing the changes now, so you have enough time to plan your upgrade.

New types require at least version 2.4 of TypeScript. It is recommended that you upgrade to the latest TypeScript version with Vue2.5.

• Previously, we recommended configuring
"allowSyntheticDefaultImports": true
• in

  tsconfig.json to use ES-style import syntax ( import Vue from 'vue'). New types will be officially converted to ES-style import/export syntax, so that the above configuration is not needed and users are required to use ES-style imports in all cases.

  In order to cope with the changes in syntax, the following libraries that depend on Vue core types will have major version updates and need to be upgraded with Vue2.5:
vuex
• ,

  vue-router, vuex-router-sync, vue-class-component.

  Now, when adding custom modules, users need to use
interface VueConstructor
• instead of

  namespace Vue(difference comparison)

  If you use
as ComponentOptions
• to annotate your component configuration, like

  computed, watch, render Types such as life cycle hooks require manual type annotation.

  We try our best to reduce upgrade costs and make these type improvements compatible with the class-based API used in
vue-class-component

. For the vast majority of users, you only need to upgrade the dependencies and switch to ES-style import. At the same time, we recommend that you lock your Vue version at

2.4.x until you are ready to upgrade. Blueprint: TypeScript type support in vue-cli

After version 2.5, we plan to introduce official TypeScript support in the next vue-cli version so that TS+Vue users can easily Start a new project. Stay tuned!

For non-TypeScript users

These changes will not have a negative impact on non-TypeScript users; as far as the public JavaScript API is concerned, 2.5 will be fully backwards compatible, and TypeScript CLI integration is also fully optional Sex joins. But as mentioned, if you use the vue-language-server editor extension, you will receive better auto-completion prompts.

The above is the detailed content of TypeScript improvements in Vue 2.5. For more information, please follow other related articles on the PHP Chinese website!