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

What is the best way to retrieve a property value from an object using the .find() method?

A different approach to handling multiple constructors in Angular 4

ApolloClient encounters type mismatches with ApolloLink

Error message displaying Angular Service not able to be injected into component: StaticInjectorError in AppModule

Tips for implementing a real-time search feature in Angular

What is the correct way to implement a validation pattern in Angular2 to prevent users from entering only spaces in an

Issue with Angular 4: Mega menu does not automatically close when a menu item is selected from within it

An error occurred while trying to set the property 'IS_CHECK' of an object that is undefined

What is the process for uploading an image with express-fileupload?

The issue encountered during a POST request in Postman is a SyntaxError where a number is missing after the minus sign in a JSON object at position 1 (line 1

Angular 2 - Dependency Injection failing to function

Steps for displaying a new event on a fullCalendar

Having trouble resolving rxjs/operators when using ngx-datatable?

What is preventing me from being able to spyOn() specific functions within an injected service?

Accessing BIM Components: Identifying Global and Express IDs through Selection

What is the best approach for handling server-side validation errors in Angular when making an HTTP call?

Associate text with a color from a predetermined list (JavaScript)

Checking conditions sequentially in Angular

The constant value being brought in from an internal npm package cannot be determined

Specify the data type of a nested object in a React component with TypeScript