TypeScript入門（1） | IT工房｜AI入門とWeb開発

TypeScriptはJavaScriptの問題点をカバーするためにマイクロソフト社により開発されたJavaScriptの代替言語です。
TypeScriptはコンパイルすることでJavaScriptに変換することができます。
文法的にはJavascriptがベースになっていますが、ES6に対応しており、また変数や関数などでより型を厳密にしたことや、クラスの概念などJavaライクな仕様になっています。
今回はTypeScriptのポイントを学習していきます。
尚、本家サイトにあるTypeScript Playgroundページではオンライン上でTypeScriptをリアルタイムにJavaScriptに変換してくれますので便利に使えます。

変数のデータ型
ブロックスコープに対応したlet と定数　const
1. let命令
2. const命令
関数
1. 型アサーション
2. アロー関数

変数のデータ型

変数宣言の際に指定する型は次のものがあります。

number　：数値型（整数や浮動小数）
string　：文字列型
boolean　：true / false
symbol :シンボル型
any　：任意の型
オブジェクト　：配列型、タプル型、クラス型、インターフェイス型、関数型

具体的な記述は以下の例のようになります。

var myName: string = "tahara";
var num: number = 8;
var arr: string[] = ['aaa', 'bbbb', 'ccc'];
var arrNum: number[] = [1, 2, 3];
var options: { [key: string]: string } = { 'myname': 'Tahara' };
var data: [number, string, number] = [6, 'Tahara', 7];
var isOpen: boolean = true;
var something: any = 'Tahara';
something = 8;  //型指定を省略すると自動で型指定される

ブロックスコープに対応したlet と定数　const

変数宣言の際にJavaScriptではverを使用ますが、ES6からブロックスコープに対応したlet命令が導入されました。
TypeScriptでもlet命令を使用することができます。
また、定数を宣言するconstも使えるようになっています。

let命令

変数をletで宣言するとブロックスコープに対応します。
ブロックスコープとはif文やfor文などで使われるブロック内、つまり { } 内で宣言された変数はブロック内だけのスコープになります。
let命令の例

if(true){
  let num:number = 5;
  console.log(num); //5
}
console.log(num); //error

letで宣言した変数はスコープ内で同じ名前の変数を宣言できません。
例

if(true){
  let num:number  = 5;
　　　　let num:number  = 1; //error
  console.log(num);
}

const命令

const命令で定数を宣言することができる。初期値を代入したらその後値を入れ替えることができません。
例

const DATA:number = 10;
DATA = 20;  //エラー

ただし、配列の場合はある特定の値だけを入れ替えることはできます。
例

const DATA = [1,2,3];
DATA[1] = 20;
console.log(DATA);

結果
Array(3)
0:1
1:20
2:3

関数

関数にはfunctionを使った関数宣言と、無名関数とも呼ばれる関数リテラルとアロー関数があります。
アロー関数は関数リテラルを簡単に表現したでけのものではありません。主な違いは「this」の意味が違います。
また、仮引数や戻り値にも型指定をします。

例

function log(message: string):string {
    return '渡された値は' + message + 'です。';
}

戻り値にも型指定します。

function greet(name:string):string{
	return 'Hello, ' + name + '!!';
}
document.writeln(greet('Tahara'));

型アサーション

でキャストすることができます。
例

function log(message: string):string {
    return '渡された値は' + message + 'です。';
}
log('10');
log(<any>10);

アロー関数

アロー関数は無名関数を簡潔に表現できます。
例

let triangle = (bottom: number,height:number):number => {
return bottom * height / 2;
};
console.log(triangle(10,5));  //25

アロー関数の特徴はthisの使い方です。
function関数はthisは呼び出し時に決まりますが、アロー関数のthisの値はアロー関数の外側のthisの値となります。

次の例はjQueryでの例なのですが、each（）の中でclick()イベントを設置した例です。最初の例はfunctionを使った無名関数を使って記述し、さらにclickイベントをアロー関数で記述したものです。（本来こんな書き方はしないと思いますが、直感的にわかりやすいものにしました）
もちろん、JavaScriptのみの構文でも同じような結果となります。
例
HTMLコード

<ul>
  <li>AAAA</li>
  <li>BBBB</li>
  <li>CCCC</li>
  <li>DDDD</li>
  <li>EEEE</li>
</ul>
<ul>
  <li>AAAA</li>
  <li>BBBB</li>
  <li>CCCC</li>
  <li>DDDD</li>
  <li>EEEE</li>
</ul>

function関数を使ったjqueryコード
サンプル

$('ul').each(function(){
  $(this).css('color','blue');
  $('li').click(function(){
    $(this).css('color','red');
  })
})

結果はeach文の中の「 $(this).css(‘color’,’blue’)」で全てのリストは青文字になります。この時のthisは2つの「ul」を指します。その後、適当な場所の「li」をクリックするとその色が赤く変わります。これはクリックイベントの中にある「this」は「li」を指していることになります。

アロー関数を使ったjqueryコード
サンプル

$('ul').each(function(){
  $(this).css('color','blue');
 　　$('li').click(()=>{
    $(this).css('color','red');
  })
})

クリック前の結果は最初のサンプルと同様ですが、クリックした時の振る舞いが違います。今度のサンプルは「li」をクリックすると、全ての「li」が赤く変わります。これはクリックイベントの中に設定した「this」は「li」ではなく外側の関数の「ul」を指しているのです。

注意すべき点は次のようにclickイベントの関数にアロー関数を使用した場合です。
サンプル

$('li').click(()=>{
  $(this).css('color','red');
  console.log(this);//window
})

この場合は「this」は「$(‘li’)」を指すのではなくwindowオブジェクトを指しています。そのため、console.logで確認すると「window」と表示されます。そのため、クリックしたli要素の色を赤色にするという期待した動作は行われません。