TypeScript - クラス：初級者ガイド
こんにちは、未来のプログラミングスーパースター！? TypeScriptのクラスのワクワクする世界に飛び込む準備はできていますか？コードを書いたことがない方も心配しないでください - 我们从零开始、段階的に学んでいきます。このチュートリアルの最後には、プロのようにクラスを作成できるようになるでしょう！それでは、一緒にこの冒険を始めましょう。
クラスとは？
具体的な内容に入る前に、まずクラスとは何かを理解しましょう。クラスはオブジェクトを作成するための青写真と考えてください。建築家が家を建てるために青写真を使うように、私たちはコードの中でオブジェクトを作成するためにクラスを使います。これらのオブジェクトにはプロパティ（例えば、家の色）とメソッド（例えば、ドアを開ける）を持つことができます。
クラスの作成
まず、私たちの最初のクラスを作成しましょう。シンプルなCarクラスを作成します。
class Car {
make: string;
model: string;
year: number;
constructor(make: string, model: string, year: number) {
this.make = make;
this.model = model;
this.year = year;
}
honk() {
console.log("Beep beep!");
}
}これを分解してみましょう：
-
classキーワードから始めて、クラス名Carを指定します。 - クラスの中でプロパティを定義します：
make、model、year。 -
constructorは特別なメソッドで、新しいCarオブジェクトを作成するときに呼び出されます。プロパティの初期値を設定します。 -
honkメソッドもあり、呼び出すと"Beep beep!"とコンソールに表示します。
インスタンスオブジェクトの作成
Carクラスができたので、実際の車のオブジェクトを作成してみましょう！
let myCar = new Car("Toyota", "Corolla", 2020);
let yourCar = new Car("Honda", "Civic", 2019);ここで、2つのCarオブジェクト：myCarとyourCarを作成しています。newキーワードはTypeScriptに新しいCarクラスのインスタンスを作成する指示をします。
属性と関数のアクセス
車のオブジェクトができたので、どう使うのか見てみましょう：
console.log(myCar.make); // 出力: Toyota
console.log(yourCar.year); // 出力: 2019
myCar.honk(); // 出力: Beep beep!オブジェクトのプロパティとメソッドにはドット表記を使ってアクセスします。まるで「おい、myCar！君のメーカーは何？」或者说「おい、myCar！ hornを鳴らしてくれ！」と言っているようなものです。
クラス継承
継承は、既存のクラスに基づいて新しいクラスを作成する強力な機能です。私たちのCarクラスから継承したSportsCarクラスを作成してみましょう：
class SportsCar extends Car {
topSpeed: number;
constructor(make: string, model: string, year: number, topSpeed: number) {
super(make, model, year);
this.topSpeed = topSpeed;
}
race() {
console.log(`Racing at ${this.topSpeed} mph!`);
}
}
let mySpeedster = new SportsCar("Ferrari", "F8", 2021, 210);
mySpeedster.honk(); // 出力: Beep beep!
mySpeedster.race(); // 出力: Racing at 210 mph!ここで何が起きているのか：
-
extendsキーワードを使ってCarから継承します。 - 新しいプロパティ
topSpeedを追加します。 - コンストラクタで親クラスのプロパティを初期化するために
super()を呼びます。 -
SportsCarに特化した新しいraceメソッドを追加します。
私たちのSportsCarはCarのすべてのプロパティとメソッドを持っており、自分独自の追加機能も持っています！
メソッドのオーバーライド
親クラスのメソッドを子クラスで変更したい場合があります。これをメソッドのオーバーライドと言います。私たちのSportsCarでhonkメソッドをオーバーライドしてみましょう：
class SportsCar extends Car {
// ... 先前行のコード ...
honk() {
console.log("Vroom vroom!");
}
}
mySpeedster.honk(); // 出力: Vroom vroom!今、SportsCarでhonk()を呼ぶと、もっとスポーティな音がします！
staticキーワード
staticキーワードを使うと、クラスそのものに関連するプロパティやメソッドを作成できます。Carクラスに静的メソッドを追加してみましょう：
class Car {
// ... 先前行のコード ...
static numberOfWheels() {
return 4;
}
}
console.log(Car.numberOfWheels()); // 出力: 4このメソッドはCarクラスそのものに呼び出すことができ、インスタンスを作成する必要はありません。
instanceof演算子
instanceof演算子を使うと、オブジェクトが特定のクラスのインスタンスであるかどうかを確認できます：
console.log(myCar instanceof Car); // 出力: true
console.log(mySpeedster instanceof SportsCar); // 出力: true
console.log(mySpeedster instanceof Car); // 出力: true
console.log(myCar instanceof SportsCar); // 出力: falseこれは、オブジェクトの型を確認するのに便利です。
データの隠蔽
TypeScriptでは、アクセス修飾子を使ってクラスメンバの可視性を制御できます。3つのアクセス修飾子があります：public、private、protected：
class BankAccount {
private balance: number;
constructor(initialBalance: number) {
this.balance = initialBalance;
}
public deposit(amount: number) {
this.balance += amount;
}
public withdraw(amount: number) {
if (amount <= this.balance) {
this.balance -= amount;
} else {
console.log("Insufficient funds!");
}
}
protected getBalance() {
return this.balance;
}
}-
private：クラス内でのみアクセス可能。 -
public：どこからでもアクセス可能（指定しない場合のデフォルト）。 -
protected：クラス内とそのサブクラス内でのみアクセス可能。
クラスとインターフェース
TypeScriptのインターフェースを使うと、クラスの契約を定義できます。私たちのCarクラス用のインターフェースを作成してみましょう：
interface Vehicle {
make: string;
model: string;
year: number;
honk(): void;
}
class Car implements Vehicle {
// ... 実装 ...
}インターフェースを実装することで、クラスが特定の構造に従っていることを確認できます。
メソッドの摘要
このチュートリアルでカバーしたメソッドの摘要を以下に示します：
| メソッド | 説明 |
|---|---|
constructor() |
クラスの新しいインスタンスを初期化 |
honk() |
車がホーンを鳴らす |
race() |
レースをシミュレート（SportsCar用） |
static numberOfWheels() |
車の車輪の数を返す（Carクラス用） |
deposit() |
銀行口座に金を預ける |
withdraw() |
銀行口座から金を引き出す |
getBalance() |
銀行口座の残高を返す |
それで、TypeScriptのクラスの世界への初めてのステップを踏み出しました。練習は完璧を生みますので、これらの概念を試してみてください。自分でクラスを作成し、さまざまな機能を組み合わせ、最も重要なのは、楽しみながらコードを書くことです！次回、このクラスを教えるのはあなたかもしれませんしね！?
Credits: Image by storyset