はじめに
この記事は各々の理由でこれからTypeScriptに関わることになるけど、
ガチガチの入門書とか読みこむのは大変だし、要点さえ掴めれば勝手に自走して身につけられるよ！
っていう忙しい人（めんどくさがり？）向けにざっくりと「TypeScriptとは何ぞや？」のきっかけになる部分を説明します。
前回の記事では「TypeScriptファイルの実行」と「変数の型定義」を説明しました。
今回の記事では「クラス定義」について説明していきます。
前提条件
・プログラミング言語（種類問わず）でのコーディング経験がそれなりにある。
・JavaScriptをある程度理解している。
・オブジェクト指向がなんとなく分かる。
コーディングサンプル
そもそもクラスとはなんぞや？的なのは大体理解している前提のため、スキップして本題に入ります。
とりあえず、
「クラス≒部品の設計図」
「インスタンス≒クラスから生まれた実際に使用する部品」
「オブジェクト≒これらの抽象概念の総称」
だとでも捉えてください。（雑の極み）
では早速サンプルコードを表示します。
// 数値に対応するメッセージを表示するためのクラス
class MessageViewer {
// プロパティ（名前: 型）
compareNum: Number;
// コンストラクタ（インスタンス生成時に実行されるメソッド 省略可能）
constructor() {
// 比較用数値の初期値を設定
this.compareNum = 0;
}
// このクラスの使い方を何故かメソッドで説明してくれる。
manual() {
console.log("messageViewメソッド：");
console.log(" 引数に数値を入れて呼び出すとメッセージが表示されます。");
console.log(" 数値の大きさによってメッセージ内容が変化します。");
console.log("changeCompareNumberメソッド：");
console.log(" 引数に数値を入れて呼び出すとmessageViewメソッドで使用する比較用数値を本メソッドの引数の値に変更します。");
}
// 比較用数値を引数の値に変更する。
changeCompareNumber(argNum: number) {
this.compareNum = argNum;
}
//数値の大きさに対応したメッセージを表示する。
messageView(argNum: number) {
if (argNum < this.compareNum) {
console.log(this.compareNum + "より小さいですね。");
} else if (argNum > this.compareNum) {
console.log(this.compareNum + "より大きいですね。");
} else {
console.log(this.compareNum + "ですね。");
}
}
}
// インスタンスの生成
const messageViewer = new MessageViewer();
// インスタンスの使い方を表示
messageViewer.manual();
// 比較用数値を設定
messageViewer.changeCompareNumber(100);
//メッセージ表示用数値を定義
let argNumber: number;
argNumber = 150;
console.log("メッセージ表示用数値：" + argNumber);
// 対応するメッセージの表示
messageViewer.messageView(argNumber);
// メッセージ表示用数値を変更
argNumber = 77;
console.log("メッセージ表示用数値：" + argNumber);
// 対応するメッセージの表示
messageViewer.messageView(argNumber);
// メッセージ表示用数値を変更
argNumber = 100;
console.log("メッセージ表示用数値：" + argNumber);
// 対応するメッセージの表示
messageViewer.messageView(argNumber);
数値に対応したメッセージを表示させるクラスです。
実用性皆無でナニコレと思われてるかもですが、個人的には動物とか車に例えたやつはなんか理解しにくいので今回はこんな感じでやります。
余計に分かりにくかったらゴメンネ！
まず、以下の箇所がクラス定義です。
// 数値に対応するメッセージを表示するためのクラス
class MessageViewer {
~~~~~~~
~~~~~~~
~~~~~~~
}
次に、以下の箇所がインスタンス生成です。
// インスタンスの生成
const messageViewer = new MessageViewer();
このmessageViewerインスタンスを介してクラス内で定義されている内容を使用します。
コンストラクタに引数が必要な場合は、「new MessageViewer();」の()部分に引数を入れます。
次に、インスタンスからメソッドを呼び出します。
// インスタンスの使い方を表示
messageViewer.manual();
クラス内で定義されているメソッドが使用できます。
「manual()」部分がメソッドです。
クラスの使い方としては、上記の内容で最低限は説明されているかと思います。
サンプルコード内の他の内容については、今回は重要ではないので省略します。（最悪な巻き方）
では、サンプルコードを実行してみます。
実行結果
messageViewメソッド：
引数に数値を入れて呼び出すとメッセージが表示されます。
数値の大きさによってメッセージ内容が変化します。
changeCompareNumberメソッド：
引数に数値を入れて呼び出すとmessageViewメソッドで使用する比較用数値を本メソッドの引数の値に変更します。
メッセージ表示用数値：150
100より大きいですね。
メッセージ表示用数値：77
100より小さいですね。
メッセージ表示用数値：100
100ですね。
頭の5行はMessageViewerクラスのmanualメソッドが呼び出され、本クラスで使用できるメソッドの使い方が説明されます。
（こんなんソース内のコメントに書く内容だからこんな使い方しねーよ！っていうのは置いておく）
その後は、messageViewメソッドの引数を150→77→100の順に書き換えてメッセージを表示する…を繰り返しています。
比較する数値が100なのは、manualメソッドの実行直後にchangeCompareNumberメソッドで比較用数値を100として設定しているためです。
さいごに
今回はTypeScriptのクラス定義について説明しました。
多分、作成者にしか分からない自己満記事な内容だとは思います。ごめんなさいm(__)m
気が向いたら記事内容をリファクタリングしておきます。
こんな糞記事の5000兆倍はわかりやすい参考サイト様を以下に掲載してますので、そちらをぜひご参照ください！
（元も子もないね）
参考サイト様
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
https://typescriptbook.jp/
クラス — 仕事ですぐに使えるTypeScript ドキュメント
https://future-architect.github.io/typescript-guide/class.html