Vue 2.5 升级对TypeScript的支持

Posted 2021-04-25 遮面一族的尤涅若

原文链接：https://medium.com/the-vue-point/upcoming-typescript-changes-in-vue-2-5-e9bd7e2ecf08

注： 文章发布于9.21，目前Vue 2.5 已正式发布

译：

Typing Improvements 

( 编码提升？ 不知道怎么翻译好一点 )

    

    自Vue 2.0发布以来，我们一直在接受( 来自开发者的 )关于更好的TypeScript集成请求。 自从发布以来，我们已经为大多数核心库（vue，vue-router，vuex）包含了官方的TypeScript类型声明。 然而，当使用开箱即用的Vue API时，目前的( TypeScript )集成有些缺乏。 例如，TypeScript不能轻易地推断Vue使用的基于对象的默认API的类型。 为了使我们的Vue代码可以很好地使用TypeScript，我们不得不使用vue-class-component装饰器，这样我们可以使用基于类的语法来创建Vue组件。

    

    对于喜欢基于Class的API的用户来说，这可能已经足够好了，但是为了类型推断，用户不得不使用不同的API是不幸的。 这也使得将现有Vue代码库迁移到TypeScript更具挑战性。

    

    今年早些时候，TypeScript引入了许多新功能，可以改进Vue的类型声明，使得TypeScript可以更好地了解基于对象文字的API。 来自TypeScript团队的Daniel Rosenwasser开始了一个雄心勃勃的PR（现在由核心团队成员HerringtonDarkholme在这里维护），一旦合并，将提供：

1. 使用默认的Vue API时，可以使用适当的类型推断。 它也可以在单文件组件中工作！

2. 基于组件的推荐键入对此的道具的推断。

3. 最重要的是，这些改进也使得纯JavaScript用户受益匪浅！ 如果您使用VSCode与令人敬畏的Vetur扩展，您将获得大大改进的自动完成建议，甚至在Vue组件中使用纯JavaScript时输入提示！ 这是因为vue-language-server是负责分析Vue组件的内部软件包，可以利用TypeScript编译器来提取有关代码的更多信息。 此外，任何支持语言服务器协议的编辑器都可以利用vue-language-server来提供类似的功能。

( 这里有一段VSCode + Vetur + New Type Declarations in Action演示的效果视频 )

    对于那些好奇的人，你可以通过克隆这个项目（确保切换到the new-types branch）并使用VSCode + Vetur打开它来尝试一下！

Potential Required Actions for TypeScript Users

 ( TypeScript用户可能需要的操作 )

    

    Typing Improvements 将在Vue 2.5中发布，目前计划在10月初发布。 我们正在发布一个小版本，因为JavaScript公共API没有任何突破性的变化，但是升级可能需要对现有的TypeScript + Vue用户采取一些操作。 这就是为什么我们现在宣布改变，以便您有足够的时间来规划升级。

1. 新的typings需要最低TypeScript 2.4，建议升级到最新版本的TypeScript以及Vue 2.5。

2. 以前，我们已经建议在tsconfig.json中使用“allowSyntheticDefaultImports”：在所有地方使用ES风格的导入( import Vue from ‘vue’ )。新的typings将正式转换为ES风格的导入/导出语法，因此不再需要配置，用户在所有情况下都需要使用ES风格的导入。

3. 为了伴随export语法更改，以下依赖于Vue核心打字的核心库将会收到新的主要版本，并应与Vue core 2.5一起升级：vuex，vue-router，vuex-router-sync，vue-class-component。

4. 当执行自定义模块扩充时，用户现在应该使用interface VueConstructor而不是namespace Vue。

5. 如果使用ComponentOptions <Something>对组件选项进行注释，则此类型的computed，watch，render和生命周期钩子将需要手动类型注释

我们尽力减少所需的升级工作，这些类型的改进与vue-class-component中使用的基于类的API兼容。 对于大多数用户来说，只需升级依赖关系并切换到ES风格的导入即可。 同时，我们还建议您将Vue版本锁定到2.4.x，直到您准备升级为止。

On the Roadmap: TypeScript Support in vue-cli

( 路线图：vue-cli中的TypeScript支持 )

    

    Vue 2.5之后，我们计划在下一个版本的vue-cli中引入对TypeScript的官方支持，以便使TS + Vue用户更轻松地启动新项目。 敬请关注！

For non-TypeScript users

( 对于不使用TypeScript的用户 )

    

    这些更改不会以任何负面的方式影响非TypeScript Vue用户; 根据公共JavaScript API，Vue 2.5将完全向后兼容，并且TypeScript CLI集成将完全选择加入。 但是如上所述，如果您使用vue-language-server的编辑器扩展名，您可能会注意到更好的自动完成建议。

    感谢Daniel Rosenwasser，HerringtonDarkholme，Katashin和Pine Wu进行这些功能的工作，并审查了这篇文章。

附原文：

Upcoming TypeScript Changes in Vue 2.5

Typing Improvements

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 (vue, vue-router, 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 thisinside the default object-based API that Vue uses. To make our Vue code play nicely with TypeScript, we have to use thevue-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 this when using the default Vue API. It also works inside single-file components!

• Type inference for props on this based on the component’s propsoption.

• Most importantly, these improvements also benefit plain JavaScript users! If you are using VSCode with the awesome Vetur extension, you will get greatly improved autocompletion suggestions and even type hints when using plain javascript in Vue components! This is because 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-server to 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 typing upgrade will be shipped in Vue 2.5, currently planned to be released around early October. We are releasing it in a minor release because the JavaScript public API is not getting any breaking changes, however, the upgrade does potentially require some actions for existing TypeScript+Vue users. This is why we are announcing the changes now so that you can have enough time to plan for the upgrade.

• 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 “allowSyntheticDefaultImports”: true in 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: vuex, vue-router, vuex-router-sync, vue-class-component.

• When performing custom module augmentations, the user should now use interface VueConstructor instead of namespace Vue. (example diff)

• ThisType of computed, watch, render and lifecycle hooks will need manual type annotations if you annotate your component options with as ComponentOptions<Something>

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

These changes do not affect non-TypeScript Vue users in any negative way; per semver, 2.5 will be fully backwards compatible in terms of public JavaScript API, and the TypeScript CLI integration will be completely opt-in. But as mentioned above, you will likely notice better auto-completion suggestions if you are using a vue-language-server powered editor extension.

—

Thanks to Daniel Rosenwasser, HerringtonDarkholme, Katashin and Pine Wufor working on these features and reviewing this post.