Typescript error: The 'new' expression is missing a construct signature for its target, resulting in an implicit 'any' type

Question

Typescript error: The 'new' expression is missing a construct signature for its target, resulting in an implicit 'any' type

Here is a code snippet optimized for displaying custom errors in Chrome Devtools, Node.js, and other platforms. The inspiration for this came from this specific answer on StackOverflow.

function CustomErr (message) {
  var err = new Error(message)
  Object.setPrototypeOf(err, CustomErr.prototype)
  return err
}

CustomErr.prototype = Object.create(Error.prototype, {
  name: { value: 'Custom Error', enumerable: false }
})

However, when attempting to convert the code to Typescript:

function CustomErr (message: string) {
  var err = new Error(message)
  Object.setPrototypeOf(err, CustomErr.prototype)
  return err
}

CustomErr.prototype = Object.create(Error.prototype, {
  name: { value: 'Custom Error', enumerable: false }
})

Using

throw new CustomErr("something went wrong")

results in the following error message:

'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.ts(7009)

I am seeking guidance on how to properly annotate my code with types. Additionally, if you have an alternative solution that achieves the same behavior in Chrome DevTools, please share it. Thank you!

EDIT: It is important to note that I need to support older browsers, therefore ES6 classes cannot be used. Converting classes to ES6 is also not preferred due to the impact on the size of my lightweight library.

To summarize, how can I correctly add type annotations to the current code?

javascript typescript ecmascript-5

Answer 1

Answer №1

To create a class in TypeScript but implement it with a function, you can ensure that the output (the resulting JavaScript) remains unaffected while allowing TypeScript to recognize the CustomErr as a "newable":

declare class CustomErr extends Error {
    constructor(message: string);
}

function CustomErr(message: string) {
    var err = new Error(message)
    Object.setPrototypeOf(err, CustomErr.prototype)
    return err
}

CustomErr.prototype = Object.create(Error.prototype, {
    name: { value: 'Custom Error', enumerable: false }
})

throw new CustomErr("something went wrong") // no error now

Interactive Example

Answer 2

To create a class in TypeScript but implement it with a function, you can ensure that the output (the resulting JavaScript) remains unaffected while allowing TypeScript to recognize the CustomErr as a "newable":

declare class CustomErr extends Error {
    constructor(message: string);
}

function CustomErr(message: string) {
    var err = new Error(message)
    Object.setPrototypeOf(err, CustomErr.prototype)
    return err
}

CustomErr.prototype = Object.create(Error.prototype, {
    name: { value: 'Custom Error', enumerable: false }
})

throw new CustomErr("something went wrong") // no error now

Interactive Example

Answer 3

Answer №2

To incorporate custom error handling in TypeScript, I followed these steps:

interface CustomError {
    code: number;
    message: string;
}

export const CustomError = (function (this: CustomError, code: number, message: string) {
    this.code = code;
    this.message = message;
} as unknown) as { new (code: number, message: string): CustomError };

With this setup, I can now utilize custom errors throughout my codebase:

throw new CustomError(403, 'A specific error message');

I can also handle them within asynchronous functions like so:

export const ProcessData = async ({ inputData }: { inputData: string }): Promise<string> => {
    try {
        // some asynchronous operations

        throw new CustomError(403, 'Encountered an issue while processing data');
    } catch (error) {
        return Promise.reject(error);
    }
};

Answer 4

To incorporate custom error handling in TypeScript, I followed these steps:

interface CustomError {
    code: number;
    message: string;
}

export const CustomError = (function (this: CustomError, code: number, message: string) {
    this.code = code;
    this.message = message;
} as unknown) as { new (code: number, message: string): CustomError };

With this setup, I can now utilize custom errors throughout my codebase:

throw new CustomError(403, 'A specific error message');

I can also handle them within asynchronous functions like so:

export const ProcessData = async ({ inputData }: { inputData: string }): Promise<string> => {
    try {
        // some asynchronous operations

        throw new CustomError(403, 'Encountered an issue while processing data');
    } catch (error) {
        return Promise.reject(error);
    }
};

Answer 5

Answer №3

Even though I'm still unsure about annotating my code, a simple modification from throw new CustomErr('err') to throw CustomErr('err') resolved the issue at hand. It seems that while JavaScript permits the use of the new constructor, TypeScript does not.

Answer 6

Even though I'm still unsure about annotating my code, a simple modification from throw new CustomErr('err') to throw CustomErr('err') resolved the issue at hand. It seems that while JavaScript permits the use of the new constructor, TypeScript does not.

Typescript error: The 'new' expression is missing a construct signature for its target, resulting in an implicit 'any' type

Answer №1

Answer №2

Answer №3

Similar questions

Tips for testing nested HTTP calls in unit tests

Interfacing Node JS with Java Web Services via SOAP

unable to retrieve / interpret data from herdsmen using fetch

Requesting Google Docs data from different domains in Internet Explorer 9

Experiencing difficulties launching my Server.JS due to a listening error

Using a constructor function in a for loop

The function chrome.cookies.get is returning undefined or causing an error to be thrown

Passing an array through ajax from PHP to JavaScript using a properly formatted JSON structure

Tips for patiently waiting for a method to be executed

Error in TypeScript when utilizing an Enum as a string

When aot is enabled, ngClass and ngIf condition may not compile successfully

What are some ways to direct users from one page to another without relying on server-side programming?

Checking the successful loading of JSON data in Angular2+ by following these steps:

Tips for refreshing data in BigQuery following an onUpdate occurrence

Strategies for avoiding a hover component from causing distortion to its parent component in React

Unable to locate the accurate information

Guide to updating information inside of script tags in html using javascript

Issues have been observed with the functionality of the Node.js EventEmitter when attempting to

Creating interactive forms - Incorporating dynamic checkbox options within the expansion panel element

Discover the highest value within a JSON object and save it as a variable