はじめに
TypeScriptでは、JavaScriptとは別に用意された独自の構文拡張があります。
- クラス
- Enum
- 名前空間
本記事ではこれらについて解説していきます！
【目次】
まずは基本的な型宣言をマスターしよう！
オブジェクト型の型宣言をマスターしよう！
関数の型定義をマスターしよう！
配列をマスターしよう！
インターフェースをマスターしよう！
クラスを使いこなそう！
型修飾子についての理解を深めよう！
ジェネリックをマスターしよう！
独自の構文拡張をマスターしよう！ ←🈁
パラメータプロパティ
コンストラクターでパラメーターを受け取り、クラスプロパティに割り当てる際、一般的には以下のような記載になります。
class Enginner {
readonly area: string;
constructor(area: string) {
this.area = area;
}
}
TypeScriptでは、「コンストラクターで同じ命名、同じ型に割り当てられるプロパティ」 を宣言する構文が用意されています。
class Enginner {
constructor(readonly area: string) {}
}
このようにコンストラクターのパラメータの前に readonly, public, private, protected のいずれかを記載すると、同じ命名、同じ型を持つプロパティを宣言することを表すことができます。
このコードは上記サンプルコードと同様の宣言となります。
Enum型（列挙型）
TypeScriptでもEnum型が用意されています。
enum StatusCode {
OK = 200,
NotFound = 404,
InternalServerError = 500
}
// 200
StatusCode.OK;
値を指定しない場合は0から自動的にインクリメントされた値が使用されます。
enum Code {
First,
Second,
Third
}
console.log(Code.First); // 0
console.log(Code.Second); // 1
console.log(Code.Third); // 2
[応用] const enum
Enum型は多くのランタイムオブジェクトを作成します。
// [出力されたJavaScriptファイル]
"use strict";
var Code;
(function (Code) {
Code[Code["First"] = 0] = "First";
Code[Code["Second"] = 1] = "Second";
Code[Code["Third"] = 2] = "Third";
})(Code || (Code = {}));
console.log(Code.First);
console.log(Code.Second);
console.log(Code.Third);
const 修飾子をつけてenumを定義することで、
コンパイルされるJavaScriptコードからオブジェクト定義と、プロパティ参照を省略することができます。
ランタイムでのオブジェクトアクセスが発生しなくなるため、パフォーマンスが向上します。
const enum Code {
First,
Second,
Third
}
console.log(Code.First);
console.log(Code.Second);
console.log(Code.Third);
↓
// [出力されたJavaScriptファイル]
"use strict";
console.log(0 /* Code.First */);
console.log(1 /* Code.Second */);
console.log(2 /* Code.Third */);
[応用] preserveConstEnums
tsconfigではpreserveConstEnumsオプションが用意されています。
このオプションを有効にすると、const enumで定義したEnumについても、出力ファイルに含まれます。
メリット
- これらの enum をライブラリや他のプロジェクトで再利用することが可能になる
- const enum の実際の値ではなく、名前でデバッグできるため、コードの読みやすさが向上する
まとめ
簡単ですが、以上です！