Vue 2.5发布在即 将全面支持TypeScript

2,859 阅读4分钟

写在前面

原文链接 Upcoming TypeScript Changes in Vue 2.5
如无特殊声明,文中的TS均指TypeScript
由于是本人第一次翻译,且无TypeScript使用经验,如果有错误之处,请阁下不吝赐教。

编码优化类型优化(此处原文为Typing Improvement 结合上下文 应该是“编码优化”)

从Vue 2.0发布以来,就一直有呼声说要将TypeScript更好地和Vue整合到一起,主要的库(Vue, Vue-Router, Vuex)也有了TS的类型声明。然而,目前的Vue和TS的结合,当你使用某些新的(out-of-the-box实在不知道怎么翻)Vue API还有点欠缺。例如,使用TS时就无法很好地推断Vue中this指向;而为了更好地使用TS的语法编写Vue组件,必须使用额外的vue-class-component做装饰器。

对于喜欢OOP编程的人来讲,这可能已经足够使用了;但他们为了使用TS的类型推断,就必须使用不同的API。这对从现有的ES编写的Vue程序迁移到TS时会有不少的问题。

今年早些时候,TS就发布了一些新的特性,这些特性解决了TS对于对象中this指向的问题,解决了Vue中的类型声明问题。来自TS团队的Daniel Rosenwasser提出了一个宏大的目标,现在由Vue团队中的[HerringtonDarkholme](github.com/HerringtonD…

  • 在使用TS时,原生Vue API中正确的this类型推断,在单文件组件中也适用;
  • 组件props中正确的this类型推断
  • 更重要的是,这些优化对于使用原生JS的开发者也会有帮助。如果你正在使用VSCode做开发并且安装了插件Vetur,代码自动提示将会有巨大的提升;在使用原生JS编写Vue组件时,类型提示也会有不少的优化。这都要归功于vue-language-server,一个负责Vue组件语法分析的包,得益于TS编译器,能更好地分析编写的代码。不仅仅VSCode能使用这个包,任何支持语言服务器接口(language server protocol)的IDE都能使用vue-language-server

(因图片过大,掘金无法上传,无法转存,只好放链接了,编辑器语法提示图片

如果你迫不及待地想试试新特性,可以checkoutveturpack上的new-types分支,使用VSCode + Vetur运行。

TS开发者迁移需要做的事情

关于TS类型升级优化的特性将会出现在Vue 2.5,目前的计划是在10月初左右发布。因为大部分的API都没有发生变化,所以只更新了一个小的版本号。但是,对于现有的使用TS + Vue开发的项目,迁移到2.5版本的Vue上时,有一些代码需要改变,为了给开发者有足够的时间去计划迁移,我们提早宣布了这些新特性。

  • 新特性的TS版本最低要求为2.4;使用Vue2.5时,建议使用最新版的TS;
  • 早些版本,我们建议在tsconfig.json配置文件中添加“allowSyntheticDefaultImports”: true,并使用ES风格的import语法,在所有地方都使用import Vue from ‘vue’;但在新版本中,配置中的“allowSyntheticDefaultImports”: true将不再需要,官方默认使用ES的import/export,在所有情况下,开发者都必须使用ES的imports
  • 因为语法的变更,以下这些依赖Vue 2.5的库都会有版本的更新: vuex, vue-router, vuex-router-sync, vue-class-component
  • 当你增加自定义模块的时候,应该使用interface VueConstructor而不是nameSpace Vue例子
  • 如果你将组件选项注解为ComponentOptions<Something>,computed,watch,render以及生命周期钩子函数需要你手动加上类型注解

我们尽力将迁移成本降到最低,TS整合的优化尽可能做到与vue-class-component兼容。对于大部分开发者,简单地更新一下依赖包并转换成ES风格的import就能完成升级。与此同时,我们建议讲版本停留在2.4.x直至你真的做好准备升级了。

On the Roadmap: vue-cli支持TypeScript

在Vue 2.5发布后,我们计划在下个版本的vue-cli中加入对TS的支持,方便开发者。

对于非TypeScript用户

新版本的Vue对于使用ES的开发者没有任何的负面影响,2.5版本是完全的向后兼容。如上文提到的,如果你使用vue-language-server,你将会有更好的语法提示功能。