Vue 2.5将迎来有关TypeScript的优化！

Posted 2021-04-25 奇舞周刊

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 2.5将迎来有关TypeScript的优化！相关的知识，希望对你有一定的参考价值。

编者按：本文由toBeTheLight在众成翻译平台上翻译。

类型改进

自Vue2.0发布以来，一直有开发者提出请求，希望能更好地集成TypeScript。从那时起，我们已经为大多数核心库（vue，vue-router，vuex）加入了官方的TypeScript类型声明。然而，当使用开箱即用的Vue API时，目前的集成还是有所欠缺。例如：TypeScript不能轻易地推断出Vue使用的默认基于对象的API中的this类型。为了使我们的Vue代码与TypeScript更好地协作，我们需要使用vue-class-component装饰器，它允许我们使用基于类的语法来写Vue组件。

对于喜欢基于类的API的用户，这可能够好了，但还是有点不足，只是为了类型判断，用户就得使用不同的API。这也使得现有的Vue代码库迁移到TypeScript更加困难。

今年的早些时候，TypeScript引入了一些新特性，能使TypeScript更好地理解基于对象字面量的API，这也使得改进Vue的类型声明更具可能。来自TypeScript团队的Daniel Rosenwasser发起了一个雄心勃勃的PR（现在由核心团队成员HerringtonDarkholme持有），一旦通过合并，将会提供：

使用默认的Vue API时，对this的正确类型推断。在单文件组件中同样有效！
基于组件的props配置的this的props的类型推断。
更重要的是，这些改进也会使原生JavaScript用户受益！，如果你正在使用VSCode且安装了优秀的Vetur扩展，在Vue组件中使用原生javascript时，你会获得十分完善的自动补全提示甚至是类型提示！这是因为vue-language-server，这个分析Vue组件的内部包，可以利用TypeScript编译器来提取关于你代码的更多信息。此外，任何支持语言服务协议的的编辑器都可以利用vue-language-server来提供类似的功能。

运行中的 VSCode + Vetur + 新类型声明

感兴趣的话，就克隆这个体验项目（确保是new-types分支）并使用VSCode + Vetur打开它来尝试一下吧。

TypeScript用户可能需要的操作

类型改进将在vue 2.5中实装，目前计划在十月初前后发布。我们正在发布一个小版本，因为JavaScript公共API还没有取得突破性改变，但是，升级可能需要现有的Vue+TypeScript用户进行一些操作。这也是我们现在公布改动的原因，便于你有足够的时间来规划升级。

新的类型需要至少2.4版的TypeScript。建议你随着Vue2.5升级至最新的TypeScript版本。
之前，我们建议在tsconfig.json中配置"allowSyntheticDefaultImports": true来使用ES风格的导入语法（import Vue from 'vue'）。新的类型将正式转换至ES风格的导入/导出语法，这样上述配置就不需要了，而且用户在所有情况下都要使用ES风格的导入。
为了配合语法的变化，下述有Vue核心类型依赖的库将会有主版本更新，需要跟随Vue2.5进行升级：vuex, vue-router, vuex-router-sync, vue-class-component。
现在，当增加自定义模块时，用户需要使用interface VueConstructor来代替namespace Vue(差异对比)
如果你使用as ComponentOptions<something>来注释你的组件配置，像computed, watch, render和生命周期钩子这种类型的需要手动进行类型注释。