[javascript] Typescript-확장 오류 클래스

Question 1

“Error”대신 콘솔에 “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 프로토 타입을 엉망으로 만들지 않고)?

Question 2

Typescript 버전 2.1을 사용하고 있고 ES5로 트랜스 파일하고 있습니까? 주요 변경 사항 페이지의이 섹션에서 가능한 문제 및 해결 방법을 확인하십시오. https://github.com/Microsoft/TypeScript-wiki/blob/master/Breaking-Changes.md#extending-built-ins-like-error-array- 더 이상 작동하지 않을 수도 있습니다.

관련 비트 :

권장 사항으로 super (…) 호출 직후 프로토 타입을 수동으로 조정할 수 있습니다.
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). 프로토 타입 체인 자체는 수정할 수 없습니다.

Question 3

문제는 Javascript의 내장 클래스 Error가 this호출 할 때 생성 할 객체 (예 🙂 를 새롭고 다른 객체 로 전환하여 프로토 타입 체인을 끊고 super새 객체에 예상되는 프로토 타입 체인이없는 경우, 즉 인스턴스라는 것입니다. 의 Error하지 않는 CustomError.

이 문제는 Typescript 2.2부터 지원되는 ‘new.target’을 사용하여 우아하게 해결할 수 있습니다. 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 VeryCustomErrorinstanceof CustomError

참조 : https://github.com/Microsoft/TypeScript/issues/13965#issuecomment-278570200

Question 4

ES2015 ( https://jsfiddle.net/x40n2gyr/ ) 에서 올바르게 작동합니다 . 문제는 TypeScript 컴파일러가 ES5로 트랜스 파일되고 ErrorES5 기능 만 사용하여 올바르게 하위 클래스 화 될 수 없다는 것입니다. ES2015 이상 기능 ( class또는 더 모호하게 Reflect.construct)을 사용해서 만 올바르게 서브 클래 싱 할 수 있습니다 . 이는 Error함수로 호출 할 때 ( new또는을 통해 ES2015 super또는에서 Reflect.construct) 함수로 호출 할 때 무시 this하고 새로운 Error .

ES2015 이상을 목표로 삼을 때까지 불완전한 결과물을 가지고 살아야 할 것입니다.

Question 5

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
    }
}

Question 6

며칠 전에 typescript 프로젝트에서 동일한 문제가 발생했습니다. 작동하도록하려면 바닐라 js 만 사용하는 MDN 의 구현을 사용합니다. 따라서 오류는 다음과 같습니다.

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 코드 스 니펫에서는 작동하지 않는 것 같지만 크롬 콘솔과 내 typescript 프로젝트에서는 작동합니다.

Question 7

나는 말 그대로 SO에 글을 올리지 않았지만 우리 팀은 TypeScript 프로젝트를 진행하고 있으며 우리는 es5를 대상으로하는 동시에 많은 사용자 정의 오류 클래스를 만들어야했습니다. 모든 단일 오류 클래스에서 제안 된 수정 사항을 수행하는 것은 엄청나게 지루했을 것입니다. 그러나 우리는 메인 커스텀 에러 클래스를 생성하고 나머지 에러를 extend그 클래스에 포함 함으로써 모든 후속 에러 클래스에 다운 스트림 영향을 미칠 수 있음을 발견했습니다 . 기본 오류 클래스 내에서 프로토 타입 업데이트의 다운 스트림 효과를 얻기 위해 다음을 수행했습니다.

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

class SomeNewError extends MainErrorClass {}

...

사용 new.target.prototype 은 각 생성자를 업데이트 할 필요없이 상속되는 모든 오류 클래스를 업데이트하는 데 핵심이었습니다.

이것이 앞으로 다른 사람의 두통을 덜어주기를 바라는 것뿐입니다!

Question 8

이 시도…

class CustomError extends Error {

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

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

}

throw new CustomError('foo')