The TypeScript error "Issue with Type Assertion: 'This expression is not callable Type'...' has no call signatures" occurs when there is a missing semicolon

Question

The TypeScript error "Issue with Type Assertion: 'This expression is not callable Type'...' has no call signatures" occurs when there is a missing semicolon

Here's a simplified version of our original code:

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

We encountered an error with the 20, where a red squiggly line appeared indicating: This expression is not callable Type 'Number' has no call signatures. The solution we found was to add a semicolon:

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

Any thoughts on why it compiled in that way? It seems like typescript being transformed into javascript interpreted the code differently and tried to treat the end variable as a function.

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

typescript type-assertion

Answer 1

Answer №1

This issue is not specific to TypeScript; it occurs in plain JavaScript as well. The TypeScript compiler does not convert correct TypeScript into incorrect JavaScript intentionally. Instead, it transpiles unusual TypeScript code into the equivalent unusual JavaScript code.

In most cases, automatic semicolon insertion does not occur if the next token after a line terminator is possibly syntactically valid, except in specific situations where line terminators are not allowed. The open parenthesis "(" following "20" can be interpreted as the beginning of a function call, which is considered syntactically valid. Therefore, no semicolon is automatically inserted because a line terminator is permitted after "20."

Error Type: calling literal 20 which has no call signature for runtime check - and that is a good thing!

If you were using plain JavaScript instead of TypeScript (without type assertions), the JavaScript runtime would interpret the code similarly and throw a runtime error rather than a compile-time warning:

// 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
}

Running this snippet without a TypeScript compiler will result in a TypeError from your browser's JavaScript runtime, indicating that "20" is not a valid function.

Answer 2

This issue is not specific to TypeScript; it occurs in plain JavaScript as well. The TypeScript compiler does not convert correct TypeScript into incorrect JavaScript intentionally. Instead, it transpiles unusual TypeScript code into the equivalent unusual JavaScript code.

In most cases, automatic semicolon insertion does not occur if the next token after a line terminator is possibly syntactically valid, except in specific situations where line terminators are not allowed. The open parenthesis "(" following "20" can be interpreted as the beginning of a function call, which is considered syntactically valid. Therefore, no semicolon is automatically inserted because a line terminator is permitted after "20."

Error Type: calling literal 20 which has no call signature for runtime check - and that is a good thing!

If you were using plain JavaScript instead of TypeScript (without type assertions), the JavaScript runtime would interpret the code similarly and throw a runtime error rather than a compile-time warning:

// 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
}

Running this snippet without a TypeScript compiler will result in a TypeError from your browser's JavaScript runtime, indicating that "20" is not a valid function.

The TypeScript error "Issue with Type Assertion: 'This expression is not callable Type'...' has no call signatures" occurs when there is a missing semicolon

Answer №1

Similar questions

Adding attributes to parent DOM elements of a component in Angular2: A Step-by-Step Guide

RC7 is missing the necessary HTTP_PROVIDERS for the resolveAndCreate HTTP method in Angular2

Importing BrowserAnimationsModule in the core module may lead to dysfunctional behavior

"Ionic Calendar 2 - The ultimate tool for organizing your

What is the best way to asynchronously refresh Angular 2 (or 4) PrimeNg Charts?

What is the best way to upload a file using a relative path in Playwright with TypeScript?

The ngAfterContentInit lifecycle hook is not triggered when the parent component updates the child component

Divide the enhanced document into sections using TypeScript

How to efficiently display nested object data using Angular Keyvalue pipe

An automatic conversion cannot handle spaces and prohibited characters in Object keys

"Every time you run mat sort, it works flawlessly once before encountering an

There is no 'next' property available

Tips on sorting a FileList object selected by a directory picker in JavaScript/TypeScript

Angular: Elf facade base class implementation for utilizing store mechanics

Achieving VS Code/typescript autocomplete functionality without the need to import the library

Running into issues with TypeScript in conjunction with Redux-Form and React-Redux connect

Exploring the potential of the forkJoin operator in Angular 4's Observable

Transforming Uint8Array into BigInt using Javascript

When the value is empty, MUI Autocomplete will highlight all items

Why am I unable to retrieve the property from the JSON file?