TypeScript 4.3でoverride修飾子が導入されました

はじめに

この記事は、TypeScript 4.3で導入されたoverride修飾子の利用法を共有するためのものです。

TypeScript 4.3が2021/05/26にリリースされました。このリリースノートの中で気になったoverride修飾子の使い方と、どのようなケースで使うべきかの2点について読み解いていきたいと思います。

override 修飾子

override修飾子は、その関数が親クラスからoverrideされていることを明示します。

使い方

class Base{
  show(){};
  hide(){};
}

class Extends extends Base{
  override show(){};
  override hide(){};
}

このコードのように、ユーザーはshowとhide関数はoverrideされているとTypeScriptコンパイラーに教えられます。

class Base{}

class Extends extends Base{
  override show(){};
  override hide(){};
}

override修飾子をつけたまま親クラスの関数を削除すると、TypeScriptのコンパイル時に以下のエラーが発生します。

This member cannot have an 'override' modifier because it is not declared in the base class 'Base'.
このメンバーは、ベースクラス「Base」で宣言されていないため、「override」修飾子を持つことはできません。

--noImplicitOverride フラグ

--noImplicitOverrideはtscコマンドのオプションです。tsconfig.jsonで指定も可能です。

使い方

class Base{
  show(){};
  hide(){};
}

class Extends extends Base{
  show(){};
  hide(){};
}

--noImplicitOverrideフラグなしの場合、上記のコードではエラーが発生しません。
フラグをつけると以下のエラーが発生します。

This member must have an 'override' modifier because it overrides a member in the base class 'Base'.
このメンバーは、ベースクラス「Base」のメンバーをオーバーライドするため、「override」修飾子を付ける必要があります。

--noImplicitOverrideフラグがある場合、override修飾子なしのオーバーライドは認められません。

どのような場合に使うべきか

override修飾子は、複雑な継承関係をもつクラスのリファクタリングを簡単にします。

class Base{
  show(){};
  hide(){};
}

class Extends extends Base{
  show(){
    super.show();
  };
  hide(){
    super.hide();
  };
}

従来の記法でもsuperでの継承元関数の呼び出しがあれば、TypeScriptコンパイラで関数の削除が検知できました。しかし継承元関数の呼び出しがない場合、親クラスで関数が削除されたことを検知する方法がありませんでした。

override修飾子を使えば、こうしたヒューマンエラーをコンパイル時に検出できます。

以上、ありがとうございました。