💡

TSConfigのnoImplicitOverrideを有効にするとソースコードの見通しが良くなった話

2022/06/06に公開

こんにちは、株式会社イエソドでソフトウェアエンジニアをしている、@tbashiyyです。
直近気がついた TSConfig のnoImplicitOverrideが良かったので紹介します。

override 修飾子の導入

TypeScript4.3(約一年前のリリース)で、override 修飾子が導入されました。
override 修飾子が導入される以前から、あるクラスを継承し、親クラスの Method と同じ Method を定義することで Method の override が可能でした。
しかし、override 修飾子がなかったため、子クラスの実装を見たときに各 Method が親クラスの Method を継承しているのかどうかは親クラスを参照しないと分からなかったり、親クラスの Method をリネームした際に、子クラスの Method がそのまま残っていることに気づきにくいという問題点がありました。
TypeScript4.3 からは、override 修飾子が導入されたため、これらの問題点を解消することができるようになりました。

class Hoge {
  public foo(): string {
    return "foo";
  }
}

// ts4.3以前
class HogeChild extends Hoge {
  // overrideがついていないため、
  // ぱっと見で親クラスのMethodを継承しているかどうかが分からない
  public foo(): string {
    return "override foo";
  }
}

// ts4.3以降
class HogeChild2 extends Hoge {
  // overrideがあるため、親クラスのMethodを継承していることがわかる
  public override foo(): string {
    return "override foo2";
  }

  // overrideをつけたmethodが親クラスに未定義の場合、下記エラーが出て怒られる
  // This member cannot have an 'override' modifier
  // because it is not declared in the base class 'Hoge'.
  public override bar(): string {
    return "bar";
  }
}

TSConfig のnoImplicitOverrideフラグを有効にして、override 修飾子の記述を強制する

override 修飾子は override する際に必ず記述しなければいけないものではないため、意図せず override 修飾子を付与し忘れるケースが発生してしまいます。
そこで、TSConfig でnoImplicitOverrideフラグを有効にすることで、override 修飾子の記述を強制することができます。

tsconfig.json
{
  "compilerOptions": {
    "noImplicitOverride": true
  }
}

noImplicitOverrideを有効にした後の世界

class Hoge {
  public foo(): string {
    return "foo";
  }
}

class HogeChild extends Hoge {
  // overrideを書かないと、下記エラーが出て怒られる。
  // This member must have an 'override' modifier
  // because it overrides a member in the base class 'Hoge'.
  public foo(): string {
    return "override foo2";
  }
}

まとめ

noImplicitOverrideフラグを有効にし、override 修飾子を強制することで、コードの見通しもよくなり、親クラスの変更の際に意図しないバグの混入も防げるようになるので、とてもおすすめです。
一年以上前のリリースで出た機能でしたが、直近この機能があることに気づいたので備忘録も兼ねて記事にしました。
ちゃんとリリースノートを確認する癖をつけようと思いました。

参考

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-3.html#override-and-the---noimplicitoverride-flag

https://www.typescriptlang.org/tsconfig#noImplicitOverride

株式会社イエソドはエンジニアを募集しています

https://herp.careers/v1/yesodco/9SKtd3pNgxfO

https://herp.careers/v1/yesodco/5yQcbvDulNfy

Discussion