【覚えておくと役に立つ】よく使うTypeScriptの構文・基礎まとめ ~ クラス編
目次
こんにちは。
今回はTypeScriptで出てくるクラスの用語の意味についてまとめてみます。
TypeScriptではオブジェクトや関数さえ知っておけばクラスを使うまでもないケースが多い気もしますが、とはいえ知っておくといざ使いたくなったときに役立つと思います。公開されているパッケージでは割とよく見る構文ですので、他の人が書いたコードを読むときにも役立ちそうです。
前提知識
クラスについて触れる前に、前提として知っておきたい用語の意味を書きます。
オブジェクト
連想配列のこと。辞書(dictionary)のようなKeyとValueの組み合わせ。
{}の中にプロパティと式を連ねて作る。
const human = {
name: "penta",
age: 30,
}
プロパティ
オブジェクトが持つ要素にアクセスする名前。上の例だとnameとage。
TypeScriptで使う「クラス」関連の用語の意味
それではクラス関連の用語について見ていきます。
クラス
オブジェクトの作成に使う機能。同じプロパティを持つオブジェクトを複数作るときによく使う。
classで宣言する。クラス名は通常大文字で始める。また、プロパティは初期値を代入して初期化もできる。?でオプションにもできる。
class Human {
age: number = 0 // 0で初期化
stand?: string // オプションなので、スタンドはなくてもよい
getOld=(years:number):number => this.age += years // 引数の年数だけ年をとるメソッド
}
このようにプロパティやメソッドを書ける。thisはインスタンス自分自身を指すときに使う。
また、class宣言で同時に型も定義されるので、上の例ではHuman型が作られたことになる。通常の変数宣言、型宣言ではそれぞれの名前空間にしか存在しない名前を作成するが、classでは両方の名前空間に同時に名前を作る。
インスタンス
クラスから作成される変数。newで宣言し、変数に代入して作成する。
const penta:Human = new Human()
console.log(penta instanceof Human) // true
コンストラクタ
インスタンス作成時(newのとき)に実行される関数。constructorでメソッドを書く。
class Human {
readonly age: number
constructor (age:number){
this.age = age
}
}
const penta = new Human(10)
const pensuke = new Human(8)
インスタンスごとに初期値を与えるのに便利。また、作成時のみ働くので、通常のメソッドと違って読み取り専用のreadonlyプロパティにも代入可能。
静的プロパティ、静的メソッド
先頭にstaticをつけて宣言する、クラスそのものからアクセスできるプロパティとメソッドのこと。
class Human {
age: number
static ageMax = 120 // これが静的プロパティ
}
const penta = new Human()
console.log(Human.ageMax) // 120
console.log(penta.ageMax) // コンパイルエラー
staticで宣言されたプロパティやメソッドは、インスタンスからはアクセスできず、クラス名からしかアクセスできません。
使う機会はあまりなさそうですが、staticと出てきたら「これはインスタンスからアクセスできない、クラスそのものに属するプロパティなんだな」とわかればOKです。
アクセス修飾子
クラスのプロパティやメソッドがどこからアクセスできるかを定義する宣言句。3種類ある。
public- 何も宣言しないのと同じで、どこからでもアクセス可能。
private- クラス内でしかアクセスできない。
protected- クラス内でしかアクセスできないが、継承したクラスからもアクセスできる。
class Human {
private age : number
public isAdult = ():boolean => this.age >= 18
}
また、ES2015以降のJavaScriptの機能として#でプライベートプロパティを宣言可能。privateはコンパイル時のチェックのみで、#はJSの機能なのでランタイム時にもプライベートが守られる。
class Human {
#age : number
public isAdult = ():boolean => this.#age >= 18
}
クラス式
classで始まるのではなく変数の代入のようにクラスを宣言する方法。
const Human = class {
age:number
}
ただしこちらの方法だとアクセス修飾子が使えない。
継承
クラスから別のクラスを作ること。継承したクラスは親クラスのプロパティを受け継いで使えたり、同名のプロパティを宣言することで親のプロパティを上書きできます。上書きはoverride プロパティ名で明示的に書くことも可能です。
継承クラスはextends 親クラス名で宣言します。
class Child extends Human {
hobby: string
constructor(age:number,hobby:string){
super(age)
hobby=this.hobby
}
}
const penpen = new Child(3,"swimming")
superにより親のコンストラクタにアクセスできます。superはthisより前に書く必要があります。
組み込みオブジェクト
TypeScriptに元々用意されているオブジェクトのことで、DateやMap、Setなど。
クラス同様にnewで宣言してインスタンスを作成して使うので、クラスのように使える。
const map:Map<string,number> = new Map()
map.set("code",256)
console.log(map.get("code")) // 256
const d = new Date()
console.log(d) // 現在の日時
まとめ
というわけで今回はTypeScriptの基礎としてクラス関連の用語の意味をまとめました。
参考になれば幸いです。
参考
プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発
