クラスを実装する - TypeScript
TypeScriptでクラスを実装するコードを紹介します。
概要
TypeScriptでクラスを実装する場合は、class キーワードを利用します。
書式
コンストラクタがある場合
class (クラス名){
constructor( (コンストラクタの引数) ){
}
}
プログラム例
下記のHTMLファイルとTypeScriptファイルを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="MyClass.js"></script>
<script type="text/javascript">
function buttonClick() {
a = document.getElementById('Text1').value;
b = document.getElementById('Text2').value;
result = exec(a, b);
document.getElementById('output').innerHTML = 'Result=(' + result.value_1 + ',' + result.value_2 + ')';
}
</script>
</head>
<body>
<input id="Text1" type="text" /><br/>
<input id="Text2" type="text" /><br />
<input id="Button1" type="button" value="button" onclick="buttonClick();"/>
<div id="output"></div>
</body>
</html>
function exec(a: number, b: number) {
let mc = new MyClass(Number(a), Number(b));
let result = new TwoValue();
result.value_1 = mc.add();
result.value_2 = mc.sub();
return result;
}
class MyClass {
value1: number;
value2: number;
constructor(in1: number, in2: number) {
this.value1 = in1;
this.value2 = in2;
}
add() {
return this.value1 + this.value2;
}
sub() {
return this.value1 - this.value2;
}
}
class TwoValue {
value_1: number;
value_2: number;
}
解説
MyClass.ts ファイルの下記のコードがクラスの実装になります。下記のコードでは、value1, value2 2つのメンバ変数をクラスに宣言しています。
コンストラクタは2つの引数を受け取り、受け取った値を value1, value2 のメンバ変数に代入します。
MyClassには2つのメソッドを実装しています。add() メソッドはvalue1 と value2 の値を加算した値を返すメソッドです。 sub() メソッドはvalue1 から value2 を引いた値を返すメソッドです。
class MyClass {
value1: number;
value2: number;
constructor(in1: number, in2: number) {
this.value1 = in1;
this.value2 = in2;
}
add() {
return this.value1 + this.value2;
}
sub() {
return this.value1 - this.value2;
}
}
クラスのインスタンスを作成しメソッドを呼び出す関数です。MyClass のインスタンスを作成し、exec関数の第一引数と第二引数の値でMyClassのメンバ変巣の値を設定します。その後 add() メソッドと Sub() メソッドを呼び出しそれぞれのメソッドの戻り値を取得します。取得した値は、TwoValue クラスに値を設定して関数の戻り値で呼び出し元に返します。~
function exec(a: number, b: number) {
let mc = new MyClass(Number(a), Number(b));
let result = new TwoValue();
result.value_1 = mc.add();
result.value_2 = mc.sub();
return result;
}
execクラスの戻り値で利用する Twovalue クラスの実装になります。2つのメンバ変数を持つクラスです。
class TwoValue {
value_1: number;
value_2: number;
}
HTMLファイルでは、[button]ボタンがクリックされると、2つのテキストに入力した値を用いて、exec() 関数を呼び出します。
実行結果
上記のプロジェクトを実行し、HTMLファイルをWebブラウザで開きます。下図のページが表示されます。
テキストボックスに数値を入力します。今回は8と3を入力します。入力後[button]ボタンをクリックします。
ボタンの下にメッセージが表示されます。"Result=(11,5)" の表示となり、入力した2つの数値を足した値と引いた値が結果として表示されていることがわかります。
classキーワードを利用してTypeScriptでクラスを実装できました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2019-06-26
作成日: 2019-06-24
