时间戳

首页 > 解决方案 > TypeScript 类型断言错误：'此表达式不可调用类型'...'没有调用签名'是由缺少分号引起的

typescript - TypeScript 类型断言错误：'此表达式不可调用类型'...'没有调用签名'是由缺少分号引起的

问题描述

这是我们原始代码的一个非常精简的版本：

  const start: number = 10
  const end: number = 20
  (someElement as HTMLInputElement).setSelectionRange(start, end)

然后在20下方有一条漂亮的红色小波浪线。指示此错误：此表达式不可调用 Type 'Number' has no call signatures。我们想出解决方案是添加一个分号：

  const start: number = 10
  const end: number = 20;
  (someElement as HTMLInputElement).setSelectionRange(start, end)

有谁知道它为什么会这样编译？我假设被编译成 javascript 的打字稿正在解释该代码，并尝试将end变量作为函数调用。

  const start: number = 10
  const end: number = 20(someElement as HTMLInputElement).setSelectionRange(start, end)

标签： typescripttype-assertion

解决方案

此行为并非特定于 TypeScript；您遇到的问题与使用纯 JavaScript 遇到的问题相同。TypeScript 编译器没有选择将正确的 TypeScript 编译成不正确的 JavaScript；相反，它尽职尽责地将怪异的 TypeScript 转换为等效的怪异 JavaScript。

通常，如果行终止符之后的下一个标记可能在语法上有效，则自动分号插入不适用，唯一的例外是禁止行终止符的特定位置之一（有关这些位置的列表，请参见上面的 MDN 链接） . 后面的左括号显然可以解释为函数调用的开始，这在语法上是有效的。并且因为在 之后不禁止行终止符，所以不会插入分号。(2020

在 TypeScript 中，你会收到一个编译器错误警告你正在调用20它没有调用签名。该错误是一件好事，因为它使您有机会在进入运行时之前通过插入自己的分号来修复代码。因为同样，如果你用纯 JavaScript 编写上述代码（例如，没有类型断言），JavaScript 运行时将以相同的方式解释代码，你会得到运行时错误而不是编译器警告：

// This is plain JS, not TS 
try {
  const someElement = document.getElementsByTagName("input").item(0);
  const start = 10
  const end = 20
  (someElement).setSelectionRange(start, end)
} catch (e) {
  console.log("OOPS I CAUGHT AN ERROR");
  console.log(e.message); // 20 is not a function
}

如果您运行该代码片段（看不到 TypeScript 编译器），您将看到浏览器的 JavaScript 运行时发出TypeError一个20无效函数。

推荐阅读