此条件将始终返回 'false'，因为类型 '0' 和 '2' 没有重叠答案

【问题标题】：This condition will always return 'false' since the types '0' and '2' have no overlap此条件将始终返回 'false'，因为类型 '0' 和 '2' 没有重叠
【发布时间】：2020-12-11 13:17:12
【问题描述】：

我正在使用如下的 vue 类样式组件。

@Component()
export default class Transfer extends Vue {

  @Prop({ default: [] })
  buttonTexts!: [];
  
  get hasButtonTexts() {
    return this.buttonTexts.length === 2; // Here it gives error.
  }
  
}

显示错误如下：

“此条件将始终返回 'false'，因为类型 '0' 和 '2' 没有重叠”

这是一个错误还是我在这里做错了什么？

【问题讨论】：

嗨，这里没有 Vue 可做的事情，它是 Javascript 为您创建错误。你能告诉我this.buttonTexts.length 的值是什么，它的类型是什么
什么是buttonTexts!，为什么会有!？
根据 typescript，默认情况下它的类型为 never (never[])。当我做“任何[]”时，它就起作用了。那么 "never[]" 有什么问题呢？所以这是从不输入的问题。任何对我有用。所以现在问题解决了。现在的问题是，为什么它不能与 never[] 一起使用？
3 = signs
@Luuk。三重平等仍然应该工作。因为长度是数字，2也是数字。

标签： typescript vue.js

【解决方案1】：

问题是你给buttonTexts的类型：[]。那是一个空元组，而不是（只是）一个数组。空元组总是有一个length 或0，并且由于length 不能是任何其他数字，所以length 的类型是文字类型0 而不是number（更多下文）。

您几乎肯定希望buttonTexts 成为一个数组。例如，也许是字符串：

buttonTexts!: string[]

Playground link to pared-down code showing the issue.

Playground link to example fix.

那么这个[] 是怎么回事？什么是元组？

基本上，TypeScript 允许您定义具有特定内容的数组类型。例如：[string] 是一个只包含一个字符串的数组。 [string, number] 是一个正好包含两个元素的数组，第一个是字符串，第二个是 number。（这对于返回多个内容的函数很方便，例如 React 的 useState。）同样，[] 是一个不包含任何内容的数组。所以它的length属性的类型是文字类型0，而不是number； 2 文字的类型是 2 的文字类型；出现错误是因为 0 类型与 2 类型没有重叠。

【讨论】：