关于TypeScript的类型:为什么在Vue中[]被推导为never[],{}被推导为any

为什么[]被推导为never[]

2020.03.20 修改错别字,采用更清晰的表述

可能用“原生”Vue 2.x + ts(不使用vue-property-decorator)的同学或多或少都遇到过这样的问题。比如,在data()里声明一个数组,赋值的时候会报错 TS2322: Type ‘number’ is not assignable to type ‘never’:

data () {
    return {
      foo: []
    }
},
mounted () {
    this.foo = [{bar: 1}] // TS2322: Type 'number' is not assignable to type 'never'.
}

也就是说,这里的空数组foo的类型被推导成了never[]。为什么?先来看看官方对never类型的定义:

The never type represents the type of values that never occur.

也就是说,never是永远不会出现的值的类型。一个声明为空的数组里不应该出现任何值,所以被推导为never也是合理的。相当于你向编译器表示,我这个数组是空的,编译器自然就认为这个数组一直是空的,此时你要给他赋值,显然会破坏类型系统。

那么,为什么foo不就是一个普通的数组,而会进行推导?因为这是在函数的返回值中,没有显式声明,编译器会进行自动推导。如果想让这个空数组符合它原来的含义,需要进行类型断言:

data () {
    return {
      foo: [] as []
    }
}

空数组和never[]还是有很大区别的。

为什么{}被推导为any

按照之前的结论,可能会有人认为{}也会被推导成类似于{[key: string] : never}这样的类型。但是,事实上{}会被推导成any,任何类型都可以赋值给它:

data () {
    return {
      foo: {}
    }
},
mounted () {
    this.foo = {bar: 1}
    this.foo = 1
}

至于原因,让我们看看TypeScript的官方wiki是怎么说的:

Types with no members can be substituted by any type.

In general, you should never find yourself declaring an interface with no properties.

也就是说,任何类型都可以赋值给没有成员的类型,相当于变成了any

更深层次的原因是动态语言的鸭子类型:

If it looks like a duck, swims like a duck, and quacks like a duck, then it probably is a duck.

如果某个东西长得像鸭子,像鸭子一样游泳,像鸭子一样嘎嘎叫,那它就可以被看成是一只鸭子。在动态语言中,我们会更关注对象的行为,而非对象本身的类型。所以,这里也是有这种鸭子类型的含义在里面:一个空接口没有任何行为,相当于所有类型都实现了它;它变成了所有类型的父类。

  • 6
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 类型注释只能在 TypeScript 文件使用的原因是因为 TypeScript 是一种静态类型检查的编程语言,可以通过类型注释来提供代码的类型信息,从而在编译期间进行类型检查,减少运行时的错误。而 Vue 是一个基于 JavaScript 的框架,JavaScript 是一种动态类型的编程语言,没有编译阶段,所以无法进行静态类型检查。 然而,由于 Vue 在项目使用了许多特定的语法和生命周期,TypeScript 提供了一种使用类型注释来增强 Vue 代码的可读性和可维护性的方式。通过在 Vue 组件文件使用 TypeScript 的扩展语法,我们可以将类型注释应用于 Vue 组件的 prop、data、computed 等属性上。这样在开发过程,编辑器可以根据类型注释提供代码补全、错误检查等功能,从而提高开发效率和代码质量。 需要注意的是,为了使用 Vue 类型注释,我们需要在 TypeScript 文件引入 Vue类型声明文件,以使 TypeScript 理解 Vue 的特定语法和类型信息。同时,我们还需要在项目配置添加相应的 TypeScript 相关配置,以确保 TypeScript 在编译过程正确解析和处理 Vue 组件类型注释。 总之,Vue 类型注释只能在 TypeScript 文件使用,是因为 TypeScript 提供了一种增强 Vue 代码的方式,通过类型注释来提供静态类型检查和代码补全等功能,从而提高项目的代码质量和开发效率。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值