首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 2.5中将迎来有关TypeScript的优化!

Vue 2.5中将迎来有关TypeScript的优化!

作者头像
疯狂的技术宅
发布2019-03-27 15:11:22
1.1K0
发布2019-03-27 15:11:22
举报
文章被收录于专栏:京程一灯京程一灯

类型改进

自Vue2.0发布以来,一直有开发者提出请求,希望能更好地集成TypeScript。从那时起,我们已经为大多数核心库( vuevue-routervuex)加入了官方的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风格的导入语法( importVuefrom'vue')。新的类型将正式转换至ES风格的导入/导出语法,这样上述配置就不需要了,而且用户在所有情况下都要使用ES风格的导入。
  • 为了配合语法的变化,下述有Vue核心类型依赖的库将会有主版本更新,需要跟随Vue2.5进行升级: vuex, vue-router, vuex-router-sync, vue-class-component
  • 现在,当增加自定义模块时,用户需要使用 interfaceVueConstructor来代替 namespaceVue(差异对比)
  • 如果你使用 asComponentOptions<something>来注释你的组件配置,像 computed, watch, render和生命周期钩子这种类型的需要手动进行类型注释。

我们尽力减小了升级成本,并使这些类型改进与 vue-class-component中使用的基于类的API兼容。对于绝大多数用户,只需要升级依赖关系,并切换至ES风格的导入就好。同时我们建议你在准备好升级前,将你的Vue版本锁定在 2.4.x

蓝图:vue-cli中的TypeScript类型支持

在2.5版本后,我们计划在下个vue-cli版本中去引入官方TypeScript支持,以便TS+Vue用户能轻松的启动新项目。敬请期待吧!

对于非TypeScript用户

这些改动不会对非TypeScript用户产生负面影响;就公共JavaScript API而言,2.5会完全向下兼容,TypeScript CLI集成也可以完全的选择性加入。但是正如刚才所提到的,如果你使用vue-language-server编辑器扩展,你会收到更好的自动补全提示。

感谢 Daniel Rosenwasser, HerringtonDarkholme, Katashin 与 Pine Wu 对这些特性做出的工作和对这篇文章的审核。


往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-10-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 京程一灯 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 类型改进
  • TypeScript用户可能需要的操作
  • 蓝图:vue-cli中的TypeScript类型支持
  • 对于非TypeScript用户
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档