Exploring the functionality of the `super()` method in TypeScript

I'm trying to enhance the standard JavaScript Error class by adding another property called code, but for some reason, TypeScript is not allowing me to do so. Here is the code snippet:

export class HttpError extends Error {
    public message: string
    public errorCode: number
    constructor(message: string, errorCode: number) {
        super(message)
        (this as any).code = errorCode
    }
}

The error occurs at the super(message) line and it says:

This expression is not callable.
Type 'void' has no call signatures.ts(2349)

Interestingly, I found in the TypeScript documentation that a similar approach is used: https://www.typescriptlang.org/docs/handbook/classes.html

Can anyone spot what might be wrong with my code?

Answer №1

In my personal view, the importance of including semicolons in Javascript code cannot be overstated. Although Javascript has a feature called automatic semicolon insertion, it can sometimes result in unexpected errors.

If we reformat the code as the compiler interprets it, the mistake becomes clear:

constructor(message: string, errorCode: number) {
    super(message)(this as any).code = errorCode
}

By correctly placing semicolons in the code, you can easily avoid such issues.

Answer №2

To resolve the error, simply include a semicolon after the super call:

constructor(message: string, errorCode: number) {
    super(message); // Add a semicolon
    (this as any).code = errorCode
}

Interestingly, adding a semicolon after the super call eliminated the error that was perplexing me. I decided to test it out by pasting your code into my editor and making this small adjustment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Could the quantity of JavaScript files impact the performance of a project and cause any delays?

In my current HTML and JavaScript project, I am incorporating multiple JavaScript files. I'm curious to learn about the potential impact of having numerous JavaScript files on a web project's efficiency and speed. Can anyone shed some light on th ...

Using Typescript: How to pass a function as an argument in another function

In my angular application, I am working on the following setup: this.myServiceOne.getDataOne().subscribe((res => {this.variableOne= res})); this.myServiceTwo.getDataTwo().subscribe((res => {this.variableTwo= res})); this.myServiceThree.getDataThree( ...

Problem with Pathjs routing

Can anyone help with this routing issue I'm having? Path.map("/(:page_1)(/:page_2)/").to(funct); The route is not matching for: /projects/index2/ It matches /anything, but not /anything/anything If you have any ideas, please share! ...

Enhancing Code Functionality with TypeScript Overload Methods

I've encountered an issue with a code snippet that has a method with 2 overloads: /** * Returns all keys of object that have specific value: * @example * KeysOfType<{a:1, b:2, c:1}, 1> == 'a' | 'c' */ type KeysOfType<M ...

Exploring External Functions in Angular Beyond the Library

Transitioning from standard JavaScript to Angular has been a bit challenging for me, especially when working with the Google Places library (or any other asynchronous callback). Here is the code snippet: var sparkApp = angular.module('sparkApp' ...

Live tweet moderation made easy with the Twitter widget

Currently in search of a widget, jQuery plugin, hosted service, or equivalent that can be easily integrated into an HTML page. This tool should display and automatically update live tweets featuring a specific hashtag, only from designated accounts set by ...

Is styling in React not showing up?

Currently, I am tackling a third-party pagination component in Reactjs. The npm package instructs me to include the line import "rc-pagination/assets/index.css"; in the file. However, despite injecting the index.css into the DOM using the style loader, I ...

NgFor is failing to display data from a fully populated array of objects

CLICK HERE FOR THE IMAGE So, let's tackle the issue at hand. I have an array that contains data fetched from an API. These data points are essentially messages. Now, below is the TypeScript file for a component where I aim to display all these messag ...

Retrieve container for storing documents in JavaServer Pages

Previously, I created JSP and HTML code to upload a file from the hard disk into a database using <input type="file" name="upfile"> However, a dialog box with an "Open" button is displayed. What I am looking for is a "Save" button that will allow u ...

How to bring in images from the assets folder using React and Typescript

I'm facing an issue where direct image importing is working, but when using object types, it's not functioning properly. Why could this be happening? I am currently working with "react": "^16.12.0" and "typescript": "~3.7.2" // ./src/assets/baby ...

Unveiling the secrets of the Google Region Lookup API

I am struggling to incorporate the Region Area Lookup feature from Google Maps into my project. Despite it being an experimental feature, I am having difficulty getting it to function correctly. Initially, I attempted to integrate this feature into a Reac ...

Is there a way I can maintain the active state after clicking on a link?

Is there a way to maintain an active element state when navigating to another page after clicking a link? I am wondering if it is possible to use JavaScript to remove the active state from one link and apply it to the next one. I am facing some challenges ...

How can you create a smooth transition between two images in React Native?

I'm looking to create a cool effect with two images that gradually fade into each other. My initial approach involved layering one image over the other and adjusting its opacity using timing or animation functions, but I've been struggling to ge ...

Issue: Dynamic server is experiencing abnormal increase in usage due to headers on Next version 13.4

Encountering an error in the following function. It's a basic function designed to retrieve the token from the session. 4 | 5 | export async function getUserToken() { > 6 | const session = await getServerSession(authOptions) | ...

What is the best way to replicate a synchronous ajax call? (mimicking synchronous behavior with asynchronous methods)

Given that a "native" synchronous ajax call can block the user interface of the browser, it may not be suitable for many real-world scenarios (including mine). I am curious to know if there is a way to mimic a synchronous (blocking) ajax call using an asy ...

A label in nativescript not displaying a two-digit number

I've encountered a peculiar issue with my user interface. I have a barcode scanner on my phone that scans barcodes and stores them in an observable array (which is functioning correctly). I also have a label that displays the length of the array. When ...

Integrate a button following the first paragraph exclusively when there are two or more paragraphs present

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> jQuery(document).ready(function($) { if ( $('p').length < 1 ) { $('p:last-child').after('<div id="toggle" class="btn"> ...

Activate the capture property for the file selection based on the label that is selected

This is a form that consists of two labels: <form method="POST" action='/process' enctype="multipart/form-data"> <div> <label for="file" class="upload-button"><i class=" ...

Show various forms that gather information

Upon selecting an option from the drop-down menu, a certain number of forms will be displayed with captured data. For example: Imagine owning a form with fields such as No. of Applicants, Applicant Name, Telephone, E-mail, etc... If the user selects 2 fo ...

Understanding the reading of Java Class List in Vue Js

As a beginner in Front-end development, I am trying to figure out how I can use Vue.js to read a Java class List. Specifically, I have a Java class that includes a list of fruits and I want to be able to display this list on the UI using Vue.js: public c ...