TypeScript Type Assertion Error: 'This expression is not callable Type '...' has no call signatures' is caused by a missing semicolon

Question

这是我们原始代码的精简版：

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

然后 20 下面有一条漂亮的红色小波浪线。指示此错误：This expression is not callable 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)

Answer 1

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

一般来说，如果行终止符之后的下一个标记可能在句法上有效，automatic semicolon insertion不适用，唯一的例外是其中一个特定的地方禁止使用行终止符（有关这些位置的列表，请参见上面的 MDN link）。 20 之后的左括号 ( 显然可以解释为函数调用的开始，这在语法上是有效的。因为在 20 之后没有禁止行终止符，所以不会插入分号。

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

// 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 运行time 发出一个 TypeError 20 不是有效函数。

TypeScript Type Assertion Error: 'This expression is not callable Type '...' has no call signatures' is caused by a missing semicolon

TypeScript Type Assertion Error: 'This expression is not callable Type '...' has no call signatures' is caused by a missing semicolon

typescript

type-assertion