converting javascript Error object to Typescript syntax

Question

I have this function which used to work in plain javascript. I am now trying to "convert" it to Typescript.

function checkStatus(response :any) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  } else {
    const error = new Error(`HTTP Error ${response.statusText}`);
    error.status = response.statusText;
    error.response = response;
    console.log(error);
    throw error;
  }
}

The red squiggly lines in my editor show that:

[ts] Property 'status' does not exist on type 'Error'. any

and

[ts] Property 'response' does not exist on type 'Error'. any

So is there a typescript version of the Error object defined somewhere in the Typescript land and its missing status and response fields on the Error object? Thank you

You can extends Error with your own version with new properties. Default one doesn't have status and response. — dfsq
– dfsq, Commented Jan 29, 2018 at 22:59

Titian Cernicova-Dragomir · Accepted Answer · 2018-01-29 22:19:20Z

2

The Error object does not by default have those properties. You can do this in Javascript because you can add any property to any object in Javascript. You can do one of two things:

Add the properties on the Error interface

Just declare an interface with the same name, in the global namespace. In typescript multiple interface declarations are merged and the resulting interface is used:

interface Error {
    status: string;
    response: HttpRequest
}

Create a dedicated HttpError

This is probably a better approach, as the properties will not be present on any error. Just define a class derived from error that has the extra properties:

class HttpError extends Error {
    status: string;
    response: HttpRequest
}

const error = new HttpError(`HTTP Error ${response.statusText}`);
error.status = response.statusText;
error.response = response;

answered Jan 29, 2018 at 22:19

Titian Cernicova-Dragomir

253k37 gold badges466 silver badges396 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

artem · Accepted Answer · 2018-01-29 22:18:35Z

So is there a typescript version of the Error object defined somewhere in the Typescript land and its missing status and response fields on the Error object?

Yes, Error object in typescript is defined in the library type definition file and it does not have status and response properties:

interface Error {
    name: string;
    message: string;
    stack?: string;
}

One possible way to assign properties to the object that are not defined in the declared type of that object is by using Object.assign():

function checkStatus(response :any) {
    if (response.status >= 200 && response.status < 300) {
        return response;
    } else {
        const error = Object.assign(
            new Error(`HTTP Error ${response.statusText}`),
            {
                status: response.statusText,
                response
            }
        );
        console.log(error);
        throw error;
  }
}

Collectives™ on Stack Overflow

converting javascript Error object to Typescript syntax

2 Answers 2

Add the properties on the Error interface

Create a dedicated HttpError

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Add the properties on the Error interface

Create a dedicated HttpError

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related