Programmingフロントエンド開発者

TypeScriptにおけるクラスの型付けと継承はどのように機能しますか?プロパティやメソッドの宣言の特徴は何ですか?その際に発生する可能性のある問題とその解決方法は?

Hintsage AIアシスタントで面接を突破

回答。

質問の歴史

TypeScriptには、JavaやC#などの他の言語で一般的なオブジェクト指向のパターンをサポートするために、クラスの型と継承が追加されました。TypeScriptは、プロパティとメソッドの型を明示的に定義するクラスを作成し、型の安全性を持つ継承を実現できます。

問題

JavaScriptでは明示的な型付けがないため、プロパティの誤用に起因するエラーはコンパイル時に検出されません。問題は、子クラスによるメソッド/プロパティのオーバーライド、基底クラスの契約の違反、およびprotected/privateの誤った使用時に発生します。

解決策

TypeScriptでは、publicprivateprotectedキーワードを使用し、プロパティとメソッドの型を明示的に指定し、extendsを使用してクラスを継承し、インターフェースを実装できます。

コードの例:

class Animal { public name: string; protected age: number; private secret: string = "hidden"; constructor(name: string, age: number) { this.name = name; this.age = age; } speak(): void { console.log(`${this.name} makes a sound.`); } } class Dog extends Animal { constructor(name: string, age: number) { super(name, age); } speak(): void { console.log(`${this.name} barks.`); } } const dog = new Dog("Rex", 4); dog.speak(); // Rex barks.

主な特徴:

  • クラスのプロパティとメソッドの型を明示的に宣言
  • カプセル化のためのアクセス修飾子の使用
  • 型安全性を持ったメソッドのオーバーライドと継承のサポート

トリッキーな質問。

クラスのフィールドに型を指定しなかったらどうなりますか?

TypeScriptは、もし値が与えられている場合、型を推論しようとします。与えられない場合、型はanyになり、コードの安全性が低下します。

class Test { value; constructor(v: number) { this.value = v; } }

デフォルト値が指定されていない場合、valueはany型になります。これは型安全性の潜在的な脆弱性です。

継承したメソッドのアクセス修飾子を変更できますか?

はい、強化する形で変更できます(例えば、publicからprotectedに変更できますが、その逆はできません)。しかし、privateからpublicには変更できません。これは、privateメンバーは継承されないためです。これによりコンパイルエラーが発生します。

TypeScriptで複数のクラスから継承できますか?

いいえ、クラスの多重継承は禁止されています。複数のインターフェースを実装できますが、クラスからは1つだけextendsできます。

一般的なエラーとアンチパターン

  • プロパティに型を指定しないとimplicit anyが発生する
  • メソッドの不正なオーバーライド(シグネチャが一致しない)
  • カプセル化の違反(プライベートプロパティの露出)

実生活の例

ネガティブケース

プロジェクト内のすべてのクラスがアクセス修飾子と明示的な型なしで宣言され、開発の迅速化が図られました。

長所:

  • 迅速な初期プロトタイピング

短所:

  • アクセスエラーの追跡が困難
  • 意図しないプロパティのオーバーライドによるバグが頻発

ポジティブケース

クラスのすべてのメンバーは慎重に型付けされ、private/protected/publicが使用され、プロパティとメソッドの厳格な型付けが行われています。

長所:

  • コンパイル時のエラーを防止
  • 明確なアーキテクチャで、オブジェクトの構造を理解しやすい

短所:

  • 設計により多くの時間が必要、実験的なタスクに対する柔軟性が低下する