类型改进

自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配置的thisprops的类型推断。
  • 更重要的是,这些改进也会使纯粹的JavaScript用户受益!,如果你正在配合很棒的Vetur扩展使用VSCode,在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和生命周期钩子这种类型的需要手动进行类型注释。

我们尽力去减小升级成本,并使这些类型改进与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 对这些特性做出的工作和对这篇文章的审核。

Vue 2.5中将迎来有关TypeScript的改进!相关推荐

  1. vscode vue解决跨域_Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)...

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

  2. vue服务器渲染/nuxt/vant-ui/mint-ui/typeScript/stylus(简单了解带网址)

    什么是服务器端渲染 (SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 H ...

  3. unity 不再渲染局部_Unity 最新版本迎来260项功能改进,高清渲染管线HDRP升级

    最新上线的Unity 2019.3版本带来了超过260项功能改进,其中的高清渲染管线(HDRP)功能可在高端游戏主机和PC上解锁高清精美画质的无限潜能. 高清渲染管线在2019.3中经过验证几近纯熟, ...

  4. vue component created没有触发_详解在Vue中使用TypeScript的一些思考(实践)

    Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个&qu ...

  5. Vue.js TypeScript 支持

    TypeScript 支持 在 Vue 2.5.0 中,我们大大改进了类型声明以更好地使用默认的基于对象的 API.同时此版本也引入了一些其它变化,需要开发者作出相应的升级.阅读博客文章了解更多详情. ...

  6. TypeScript+vue使用与迁移经验总结

    源宝导读:ERP平台的前端底层使用了Vue作为组件的基础架构,而使用了TypeScript语言进行组件的封装与开发.本文将简要介绍平台在使用TypeScript和Vue框架进行老功能重构时的经验总结. ...

  7. Vue CLI 3 可以使用 TypeScript 生成新工程

    TypeScript 支持 在 Vue 2.5.0 中,我们大大改进了类型声明以更好地使用默认的基于对象的 API.同时此版本也引入了一些其它变化,需要开发者作出相应的升级.阅读博客文章了解更多详情. ...

  8. 从 JavaScript 到 TypeScript 6 - Vue 引入 TypeScript

    随着应用的庞大,项目中 JavaScript 的代码也会越来越臃肿,这时候许多 JavaScript 的语言弊端就会愈发明显,而 TypeScript 的出现,就是着力于解决 JavaScript 语 ...

  9. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

最新文章

  1. linux c调用wcf服务,Silverlight+WCF实现跨域调用
  2. 【收藏】HDFS的Java API使用
  3. iphone原彩显示对眼睛好吗_在 iPhone 上调整显示与文字大小,让眼睛更舒服
  4. PAT (Basic Level) Practice (中文)1017 A除以B (20 分)
  5. 一对一 一对多 多对多
  6. java逐行读取文件_Java逐行读取文件
  7. 让一个.sh文件一直运行_想做AI鉴黄工具?这有一个内含20多万张“不可描述”图片的数据集...
  8. YACC(BISON)使用指南
  9. A9财务管理软件与金蝶、用友财务管理软件功能比较表(一)
  10. 关于ActionForm的一些问题
  11. 向量加减法首尾规律_平面向量加减法口诀
  12. 正则校验6-18位字母加数字密码
  13. NetVLAD: CNN architecture for weakly supervised place recognition 翻译
  14. Android开发——数据库框架Suger遇到的大坑(Gson和Suger的复用Bean请见“大坑三”)
  15. 【尾插法】表尾插入法构造链表 (10 分)
  16. Redis 持久化,写入磁盘的方式
  17. DNS 的A记录、CNAME记录、mx记录
  18. phpfilter的妙用
  19. 美团java后台面经
  20. DameWare各种版本激活码-备份

热门文章

  1. 谷歌开源文本生成新方法 LaserTagger,直击 seq2seq 效率低、推理慢、控制差三大缺陷!
  2. 高效的机器学习研究者,应该具备这 6 个习惯
  3. 「时事点评」我有一个预感,保时捷女车主丈夫要残了!
  4. 从美国5家创企看AI创业方向:落地解决问题才是王道
  5. 近乎于“神”的任正非
  6. SAP MB1B + 313315做二步法货物移动报错-创建交货的数据不完全(客户)-
  7. 《数学之美》第29章 各个击破算法和Google云计算的基础
  8. 人工智能将如何改变芯片设计
  9. FrostSulliven最新发布引领全球增长的60大技术
  10. 元宇宙深度报告,共177页!