TypeScript中怎么繼承 Error 類

這篇文章給大家分享的是有關TypeScript中怎么繼承 Error 類的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

前言

在JavaScript 中很多時候都需要自定義錯誤，尤其是開發 Node.js 應用的時候。 比如一個典型的網站服務器可能需要有 NetworkError, DatabaseError, UnauthorizedError 等。 我們希望這些類都擁有 Error 的特性：有錯誤消息、有調用棧、有方便打印的 toString 等。 最直觀的實現方式便是 繼承 Error 類。 但考慮 TypeScript 需要編譯到 ES5 兼容性問題會較為復雜， 本文用來幫助理解 TypeScript 中繼承 Error 的問題來源以及對應的幾種解決方式。

我們需要怎樣的 CustomError

為了容易討論最佳實踐，首先明確我們自定義的 CustomError 需要做到哪些功能。 下面是 Harttle 的觀點：

1. 可以調用 new CustomError() 來創建，并且 instanceof Error 操作應該返回 true。可以用來創建是基本要求，能夠被視為 Error 的實例能夠兼容既有系統（比如 toString() 要返回調用棧），同時符合慣例。

2. .stack 屬性首行應為 CustomeError: <message>。如果是 Error: <message> 可能就沒那么漂亮。

3. .stack 屬性應當包含調用棧并指向 new CustomError() 的那一行。這一點可能是關鍵，如果指向 CustomError 構造函數中的某一行，就會給這個類的使用方造成困惑。

下面舉個例子，這是一個 message 為 "intended" 的 CustomError 的 .stack 屬性值：

CustomError: intended
at Object.<anonymous> (/Users/harttle/Downloads/bar/a.js:10:13)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Function.Module.runMain (module.js:694:10)
at startup (bootstrap_node.js:204:16)
at bootstrap_node.js:625:3

ES5 中如何繼承 Error？

Error 是一個特殊的對象，或者說 JavaScript 的 new 是一個奇葩的存在。 為方便后續討論，我們先討論組 ES5 時代是怎樣繼承 Error 的。 我們說 JavaScript 是一門混雜的語言，如何繼承 Error 就是一個典型的例子。 如果你熟悉 原型繼承的方式，應該會寫出如下代碼：

function CustomError (message) {
Error.call(this, message)
}
CustomError.prototype = new Error()

因為 stack 只在 new 的時候生成，上述實現不能滿足功能 2 和功能 3，也就是說：

• stack 的第一行是總是 Error 而不是 CustomError 且不包含 message 信息。

• stack 總是指向 new Error() 的那一行，而不是 new CustomError()。

Node 文檔 中描述了一個 captureStackTrace 方法來解決這個問題，改動后的實現如下：

function CustomError (msg) {
this.name = 'CustomError'
this.message = msg
Error.captureStackTrace(this, CustomError)
}
CustomError.prototype = new Error()

其中 .captureStackTrace() 會使用傳入對象的 name 和 message 來生成 stack 的前綴；同時第二個參數用來指定在調用棧中忽略掉哪一部分，這樣棧就會指向 new CustomError 的地方而不是 captureStackTrace() 的地方。

ES6 中如何繼承 Error?

既然 ES6 通過 class 和 extends 等關鍵字給出了類繼承機制， 那么想必通過編寫 CustomError 類來繼承 Error。事實也確實如此，只需要在構造函數中調用父類構造函數并賦值 name 即可實現文章開始提到的三個功能：

class CustomError extends Error {
constructor(msg) {
super(msg)
this.name = 'CustomError'
}
}

TypeScript 中如何繼承 Error?

ES6 中提供了 new.target 屬性， 使得 Error 的構造函數中可以獲取 CustomError 的信息，以完成原型鏈的調整。 因此 TypeScript 需要編譯到 ES5 時上述功能仍然是無法自動實現。 在 TypeScript 中的體現是形如上述 ES6 的代碼片段會被編譯成：

var CustomError = /** @class */ (function (_super) {
__extends(CustomError, _super);
function CustomError(msg) {
var _this = _super.call(this, msg) || this;
_this.name = 'CustomError';
return _this;
}
return CustomError;
}(Error));

注意 var _this = _super.call(this, msg) || this; 中 this 被替換掉了。 在 TypeScript 2.1 的 changelog 中描述了這個 Breaking Change。 **這會造成 CustomError 的所有對象方法都無法使用，這里介紹幾種 workaround：

題外話，這個分支可能會導致測試覆蓋率中的 分支未覆蓋問題。可以只在 ES6 下產生測試覆蓋報告來解決。

1. 使用 setPrototypeOf 還原原型鏈

這是 TypeScript 官方給出的解決方法，見這里。

class CustomError extends Error {
constructor(message) {
super(message);
Object.setPrototypeOf(this, FooError.prototype);
}
}

注意這是一個性能很差的方法，且在 ES6 中提出，兼容性也很差。在不兼容的環境下可以使用 __proto__ 來替代。

2. 堅持使用 ES5 的方式

不使用 ES6 特性，仍然使用本文前面介紹的 『ES5 中如何繼承 Error？』給出的方法。

3. 限制對象方法的使用

雖然 CustomError 的對象函數無法使用，但 CustomError 仍然支持 protected 級別的方法供子類使用，閹割的地方在于自己不能調用。 由于 JavaScript 中對象屬性必須在構造函數內賦值，因此對象屬性也不會受到影響。也就是說：

class CustomError extends Error {
count: number = 0
constructor(msg) {
super(msg)
this.count // OK，屬性不受影響
this.print() // TypeError: _this.print is not a function，因為 this 被替換了
}
print() { 
console.log(this.stack)
}
}
class DerivedError extends CustomError {
constructor(msg) {
super(msg)
super.print() // OK，因為 print 是直接從父類原型獲取的，即 `_super.prototype.print`
}
}

感謝各位的閱讀！關于“TypeScript中怎么繼承 Error 類”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！