TypeScript this型別

鏈式呼叫大家一定不陌生，比如在jQuery中有廣泛應用。

通過使方法返回當前物件 (也就是this) 就能夠建立鏈式呼叫功能。

看如下程式碼例項：

[typescript] 純文字檢視 複製程式碼
export default class BasicCalculator {
  public constructor(protected value: number = 0) { }
 
  public currentValue(): number {
    return this.value;
  }
 
  public add(operand: number) {
    this.value += operand;
    return this;
  }
 
  public subtract(operand: number) {
    this.value -= operand;
    return this;
  }
 
  public multiply(operand: number) {
    this.value *= operand;
    return this;
  }
 
  public divide(operand: number) {
    this.value /= operand;
    return this;
  }
}

然後引入此模組，通過鏈式呼叫實現相關計算功能：

[typescript] 純文字檢視 複製程式碼
import calc from "./BasicCalculator";
let v = new calc(2)
    .multiply(5)
    .add(1)
    .currentValue();

通過鏈式方式連續不斷的呼叫相關方法，實現方式就是各個方法返回this（也就是物件本身）。

下面再來看一段程式碼例項：

[typescript] 純文字檢視 複製程式碼
import BasicCalculator from "./BasicCalculator";
 
export default class ScientificCalculator extends BasicCalculator {
  public constructor(value = 0) {
    super(value);
  }
 
  public square() {
    this.value = this.value ** 2;
    return this;
  }
 
  public sin() {
    this.value = Math.sin(this.value);
    return this;
  }
}

ScientificCalculator繼承BasicCalculator類。

在之前，BasicCalculator的方法返回this, 返回值型別被推斷為BasicCalculator，如果在ScientificCalculator的例項上呼叫屬於 BasicCalculator的方法，將會報錯。

程式碼如下:

[typescript] 純文字檢視 複製程式碼
import calc from "./ScientificCalculator";
 
let v = new calc(0.5)
    .square()
    .divide(2)// 返回值類將被推斷為BasicCalculator
    .sin()    // 將會報錯，因為BasicCalculator類不具有此方法
    .currentValue();

在之前，程式碼將會報錯，TypeScript1.7增加了this型別，那麼divide()返回值型別將會被推斷為this型別。

前面其實展現了this型別的多型，不但可以是父類型別，也可以是子類型別，也可以是實現的介面型別。

this 型別在描述一些使用了 mixin 風格繼承的庫 (比如 Ember.js) 的交叉型別:

[typescript] 純文字檢視 複製程式碼
interface MyType {
  extend<T>(other: T): this & T;
}