Машинопис - Розширення класу помилок

Я намагаюся викинути власну помилку з назвою класу "CustomError", надрукованим у консолі замість "Помилка", без успіху:

class CustomError extends Error { 
    constructor(message: string) {
      super(`Lorem "${message}" ipsum dolor.`);
      this.name = 'CustomError';
    }
}
throw new CustomError('foo'); 

Вихідний результат Uncaught Error: Lorem "foo" ipsum dolor .

Що я очікую: Uncaught CustomError: Lorem "foo" ipsum dolor .

Цікаво, чи можна це зробити, використовуючи лише TS (не возившись з прототипами JS)?

Чи використовуєте ви версію машинопису 2.1 та перекладаєте на ES5? Перегляньте цей розділ сторінки останніх змін щодо можливих проблем та способу їх усунення: https://github.com/Microsoft/TypeScript-wiki/blob/master/Breaking-Changes.md#extending-built-ins-like-error-array- and-map-may-no-longer-work

Відповідний біт:

Як рекомендацію, ви можете вручну налаштувати прототип відразу після будь-яких супер (...) дзвінків.

class FooError extends Error {
    constructor(m: string) {
        super(m);

        // Set the prototype explicitly.
        Object.setPrototypeOf(this, FooError.prototype);
    }

    sayHello() {
        return "hello " + this.message;
    }
}

Однак будь-якому підкласу FooError також доведеться вручну встановити прототип. Для середовищ виконання, які не підтримують Object.setPrototypeOf, ви можете замість цього використовувати __proto__.

На жаль, ці обхідні шляхи не працюватимуть в Internet Explorer 10 і раніше. Можна вручну скопіювати методи з прототипу на сам екземпляр (тобто FooError.prototype на цей), але сам ланцюжок прототипів не може бути виправлений.

Проблема полягає в тому, що вбудований клас Javascript Errorрозриває ланцюжок прототипів, перемикаючи об’єкт, що будується (тобто this), на новий, інший об’єкт, коли ви телефонуєте, superі цей новий об’єкт не має очікуваного ланцюжка прототипів, тобто це екземпляр з Errorне з CustomError.

Цю проблему можна елегантно вирішити за допомогою 'new.target', який підтримується з Typescript 2.2, див. Тут: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html

class CustomError extends Error {
  constructor(message?: string) {
    // 'Error' breaks prototype chain here
    super(message); 

    // restore prototype chain   
    const actualProto = new.target.prototype;

    if (Object.setPrototypeOf) { Object.setPrototypeOf(this, actualProto); } 
    else { this.__proto__ = actualProto; } 
  }
}

Використання new.targetмає ту перевагу, що вам не потрібно жорстко кодувати прототип, як деякі інші відповіді, запропоновані тут. Це знову має ту перевагу, що класи, що успадковують від CustomError, автоматично також отримають правильний ланцюжок прототипів.

Якби ви жорстко кодували прототип (наприклад Object.setPrototype(this, CustomError.prototype)), CustomErrorвін би мав робочий ланцюжок прототипів, але будь-які класи, що успадковують від, CustomErrorбули б порушені, наприклад, екземпляри a class VeryCustomError < CustomErrorне були б такими, instanceof VeryCustomErrorяк очікувалося, а лишеinstanceof CustomError .

Дивіться також: https://github.com/Microsoft/TypeScript/issues/13965#issuecomment-278570200

Він працює коректно в ES2015 ( https://jsfiddle.net/x40n2gyr/ ). Швидше за все, проблема полягає в тому, що компілятор TypeScript транслірується до ES5 і Errorне може бути правильно підкласифікований лише за допомогою функцій ES5; його можна правильно підкласифікувати лише за допомогою ES2015 і вище ( classабо, що неясніше, Reflect.construct). Це тому, що коли ви телефонуєте Errorяк функцію (а не через newабо, у ES2015, superабо Reflect.construct), вона ігнорує thisта створює нову Error .

Можливо, вам доведеться жити з недосконалим результатом, поки ви не зможете націлитися на ES2015 або вище ...

Станом на TypeScript 2.2 це можна зробити через new.target.prototype. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html#example

class CustomError extends Error {
    constructor(message?: string) {
        super(message); // 'Error' breaks prototype chain here
        this.name = 'CustomError';
        Object.setPrototypeOf(this, new.target.prototype); // restore prototype chain
    }
}

Кілька днів тому я зіткнувся з тією ж проблемою у своєму проекті машинопису. Щоб це працювало, я використовую реалізацію від MDN, використовуючи лише ванільні js. Отже, ваша помилка буде виглядати приблизно так:

function CustomError(message) {
  this.name = 'CustomError';
  this.message = message || 'Default Message';
  this.stack = (new Error()).stack;
}
CustomError.prototype = Object.create(Error.prototype);
CustomError.prototype.constructor = CustomError;

throw new CustomError('foo');

Здається, це не працює в фрагменті коду SO, але працює в консолі chrome і в моєму проекті TypeScript:

Я буквально ніколи не публікую публікації на SO, але моя команда працює над проектом TypeScript, і нам потрібно було створити багато власних класів помилок, а також націлити es5. Було б неймовірно нудно робити запропоноване виправлення в кожному окремому класі помилок. Але ми виявили, що змогли мати подальший вплив на всі наступні класи помилок, створивши основний власний клас помилок та маючи решту наших помилок extendцього класу. Всередині цього основного класу помилок ми зробили наступне, щоб отримати нижчий ефект оновлення прототипу:

class MainErrorClass extends Error {
  constructor() {
    super()
    Object.setPrototypeOf(this, new.target.prototype)
  }
}

class SomeNewError extends MainErrorClass {} 

...

Використання new.target.prototypeбуло ключем до того, щоб оновити всі класи помилок успадкування без необхідності оновлювати конструктор кожного з них.

Тільки сподіваючись, це позбавить когось іншого головний біль у майбутньому!

Спробуйте це...

class CustomError extends Error { 

  constructor(message: string) {
    super(`Lorem "${message}" ipsum dolor.`)
  }

  get name() { return this.constructor.name }

}

throw new CustomError('foo')