详解在Vue中使用TypeScript的一些思考(实践)


Posted in Javascript onJuly 06, 2018

Vue.extend or vue-class-component

使用 TypeScript 写 Vue 组件时,有两种推荐形式:

  • Vue.extend():使用基础 Vue 构造器,创建一个“子类”。此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是组件选项需要被包裹在 Vue.extend() 中。
  • vue-class-component:通常与 vue-property-decorator 一起使用,提供一系列装饰器,能让我们书写类风格的 Vue 组件。

两种形式输出结果一致,同是创建一个 Vue 子类,但在书写组件选项如 props,mixin 时,有些不同。特别是当你使用 Vue.extend() 时,为了让 TypeScript 正确推断类型,你将不得不做一些额外的处理。接下来,我们来聊一聊它们的细节差异。

Prop

由于组件实例的作用域是孤立的,当从父组件传递数据到子组件时,我们通常使用 Prop 选项。同时,为了确保 Prop 的类型安全,我们会给 Prop 添加指定类型验证,形式如下:

export default {
 props: {
  someProp: {
   type: Object,
   required: true,
   default: () => ({ message: 'test' })
  }
 }
}

我们定义了一个 someProp,它的类型是 Object。

使用 JavaScript 时,这并没有什么不对的地方,但当你使用 TypeScript 时,这有点不足,我们并不能得到有关于 someProp 更多有用的信息(比如它含有某些属性),甚至在 TypeScript 看来,这将会是一个 any 类型:

详解在Vue中使用TypeScript的一些思考(实践)

这意味着我们可以使用 someProp 上的任意属性(存在或者是不存在的)都可以通过编译。为了防止此种情况的发生,我们将会给 Prop 添加类型注释。

Vue.extend()

使用 Vue.extend() 方法添加类型注释时,需要给 type 断言:

import Vue from 'vue'

interface User {
 name: string,
 age: number
}

export default Vue.extend({
 props: {
  testProps: {
   type: Object as () => User
  }
 }
})

当组件内访问 testProps 时,便能得到相关提示:

详解在Vue中使用TypeScript的一些思考(实践)

然而,你必须以函数返回值的形式断言,并不能直接断言:

export default Vue.extend({
 props: {
  testProps: {
   type: Object as User
  }
 }
})

它会给出错误警告,User 接口并没有实现原生 Object 构造函数所执行的方法:
Type 'ObjectConstructor' cannot be converted to type 'User'. Property 'id' is missing in type 'ObjectConstructor'.

实际上,我们可从 Prop type declaration :

export type Prop<T> = { (): T } | { new (...args: any[]): T & object }

export type PropValidator<T> = PropOptions<T> | Prop<T> | Prop<T>[];

export interface PropOptions<T=any> {
 type?: Prop<T> | Prop<T>[];
 required?: boolean;
 default?: T | null | undefined | (() => object);
 validator?(value: T): boolean;
}

可知 Prop type 可以以两种不同方式出现:

  • 含有一个调用签名的范型 type,该签名返回 T;
  • 一个范型构造函数签名,该函数创建指定类型 T 对象 (返回值 T & object 用于降低优先级,当两种方式同时满足时取第一种,其次它还可以用于标记构造函数不应该返回原始类型)。

当我们指定 type 类型为 String/Number/Boolean/Array/Object/Date/Function/Symbol 等原生构造函数时,Prop<T> 会返回它们各自签名的返回值。

当 type 类型为 String 构造函数时,它的调用签名返回为 string:

// lib.es5.d.ts

interface StringConstructor {
 new(value?: any): String;
 (value?: any): string;
 readonly prototype: String;
 fromCharCode(...codes: number[]): string;
}

而这也是上文中,当指定 type 类型为 Object 构造函数时,经过 Vue 的声明文件处理,TypeScript 推断出为 any 类型的原因:

interface ObjectConstructor {
 new(value?: any): Object;
 (): any;
 (value: any): any;
 // 其它属性 ....
}

类似的,当我们使用关键字 as 断言 Object 为 () => User 时,它能推断出为 User 。

从 type 第二部分可知,除传入原生构造函数外,我们还可传入自定义类:

详解在Vue中使用TypeScript的一些思考(实践)

此外,这里有个 PR 暴露一个更直观的类型( Vue 2.6 版本才可以用):

props: {
 testProp: Object as PropTypes<{ test: boolean }>
}

vue-class-component

得益于 vue-propperty-decorator Prop 修饰器,当给 Prop 增加类型推断时,这些将变得简单:

import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class Test extends Vue {
 @Prop({ type: Object })
 private test: { value: string }
}

当我们在组件内访问 test 时,便能获取它正确的类型信息。

mixins

mixins 是一种分发 Vue 组件中可复用功能的一种方式。当在 TypeScript 中使用它时,我们希望得到有关于 mixins 的类型信息。

当你使用 Vue.extends() 时,这有点困难,它并不能推断出 mixins 里的类型:

// ExampleMixin.vue
export default Vue.extend({
 data () {
  return {
   testValue: 'test'
  }
 }
})

// other.vue
export default Vue.extend({
 mixins: [ExampleMixin],
 created () {
  this.testValue // error, testValue 不存在!
 }
})

我们需要稍作修改:

// other.vue
export default ExampleMixin.extend({
 mixins: [ExampleMixin],
 created () {
  this.testValue // 编译通过
 }
})

但这会存在一个问题,当使用多个 mixins 且推断出类型时,这将无法工作。而在这个 Issuse 中官方也明确表示,这无法被修改。

使用 vue-class-component 这会方便很多:

// ExampleMixin.vue
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export class ExampleMixin extends Vue {
 public testValue = 'test'
}

// other.vue
import Component, { mixins } from 'vue-class-component'
import ExampleMixin from 'ExampleMixin.vue'

@Component({
 components: {
  ExampleMixin
 }
})
export class MyComp extends mixins(ExampleMixin) {
 created () {
  console.log(this.testValue) // 编译通过
 }
}

也支持可以传入多个 mixins。

一些其它

做为 Vue 中最正统的方法(与标准形式最为接近),Vue.extends() 有着自己的优势,在 VScode Vetur 插件辅助下,它能正确提示子组件上的 Props:

详解在Vue中使用TypeScript的一些思考(实践)

而类做为 TypeScript 特殊的存在(它既可以作为类型,也可以作为值),当我们使用 vue-class-component 并通过 $refs 绑定为子类组件时,便能获取子组件上暴露的类型信息:

详解在Vue中使用TypeScript的一些思考(实践)

导入 .vue 时,为什么会报错?

当你在 Vue 中使用 TypeScript 时,所遇到的第一个问题即是在 ts 文件中找不到 .vue 文件,即使你所写的路径并没有问题:

详解在Vue中使用TypeScript的一些思考(实践)

在 TypeScript 中,它仅识别 js/ts/jsx/tsx 文件,为了让它识别 .vue 文件,我们需要显式告诉 TypeScript,vue 文件存在,并且指定导出 VueConstructor:

declare module '*.vue' {
 import Vue from 'vue'
 export default Vue
}

但是,这引起了另一个问题,当我们导入一个并不存在的 .vue 文件时,也能通过编译:

详解在Vue中使用TypeScript的一些思考(实践)

是的,这在情理之中。

当我尝试在 .vue 文件中导入已存在或者不存在的 .vue 文件时,却得到不同的结果:

文件不存在时:

详解在Vue中使用TypeScript的一些思考(实践)

文件存在时:

详解在Vue中使用TypeScript的一些思考(实践)

文件不存在时,引用 Vue 的声明文件。文件存在时,引用正确的文件定义。

这让人很困惑,而这些都是 Vetur 的功劳。

在这个 PR 下,我找到相关解答:这个 PR 里,Vetur 提供解析其他 .vue 文件的功能,以便能获取正确的信息,当 .vue 文件不存在时,会读取 .d.ts 里的信息。

参考

https://github.com/vuejs/vue/pull/5887

https://github.com/vuejs/vue/issues/7211

https://github.com/vuejs/vue/pull/6856

https://github.com/vuejs/vue/pull/5887/files/1092efe6070da2052a8df97a802c9434436eef1e#diff-23d7799dcc9e9be419d28a15348b0d99

https://github.com/Microsoft/TypeScript/blob/8e47c18636da814117071a2640ccf87c5f16fcfd/src/compiler/types.ts#L3563-L3583

https://github.com/vuejs/vetur/pull/94

Javascript 相关文章推荐
js删除所有的cookie的代码
Nov 25 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 Javascript
javascript显示动态时间的方法汇总
Jul 06 #Javascript
Django+Vue跨域环境配置详解
Jul 06 #Javascript
微信小程序画布圆形进度条显示效果
Nov 17 #Javascript
微信小程序实时聊天WebSocket
Jul 05 #Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 #Javascript
基于vue展开收起动画的示例代码
Jul 05 #Javascript
微信小程序实现星级评分和展示
Jul 05 #Javascript
You might like
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
javascript this用法小结
2008/12/19 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
详解Django中Request对象的相关用法
2015/07/17 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
同程旅游英文网站:LY.com
2018/11/13 全球购物
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
生产厂厂长岗位职责
2013/12/25 职场文书
策划创业计划书
2014/02/06 职场文书
授权委托书怎么写
2014/04/03 职场文书
劳模先进事迹材料
2014/12/24 职场文书
班主任工作实习计划
2015/01/16 职场文书
英语通知范文
2015/04/22 职场文书
行政二审代理词
2015/05/25 职场文书