■TypeScript 1.4

Top
TypeScript は、JavaScript に静的型付けとクラスベースのオブジェクト指向などを加えたスーパーセットとして、マイクロソフトによって開発されたプログラミング言語である。
TypeScript と JavaScript と互換性があり、TypeScript でコーディングしたソースプログラムは Microsoft Visual Studio - 2013 Update 2 以降のIDEを使用することによってコンパイルされ JavaScriptのソースに変換される。またはIDEを使用しない場合は、Playgroundを使用することでJavaScriptのソースに変換できる
実行環境では JavaScript を使用することになるが、クラスを容易に実装できるようになること、型チェックがコンパイル時に行われることなど恩恵は大きい。

2015年6月17日に ECMAScript の バージョン 6 が公開されその仕様を先取りした形で登場した TypeScript だがブラウザ標準スクリプト言語としてTypeScriptが浸透することを期待する。

１．文字列

２．数値型

３．日付型

４．列挙型

５．共用体型

６．定数

７．let

８．配列

９．連想配列( 辞書 )

10．タプル

11．条件分岐

12．ループ

13．関数

14．クラス

15．型定義ファイル

■文字列

文字列型の宣言
TypeScriptでは型注釈さらにコンパイル時の型チェックが可能となる。文字列型に数値を代入しようとするとコンパイルエラーとなる。 
var str1:string = 'abc';

var str2:string = 'def';

var str3:string = 123;   // コンパイルエラー：'number' を 'string' に変換できません。

// 型指定しない場合は型推論により文字列となる
var str4 = 'abc';

str4 = 123;   // コンパイルエラー：'number' を 'string' に変換できません。

文字列長
現在の文字列内の文字数を取得する 
console.log('abc'.length);   // 3

console.log('あいう'.length);   // 3
リファレンス：MDN

文字コードを指定してバイト単位で桁数を取得する。

文字列の連結
+ で連結する 
console.log('abc' + 'def');   // 'abcdef'

文字列の分割
文字列を複数の部分文字列に区切り、文字列の配列に分割する。
区切り文字が見つからない場合は元の文字列を返す。
var str:string = 'abc.def.ghi';
var arr:string[] = str.split('.');
for( var i=0; i<arr.length; i++ )
{
   console.log(arr[i]);
}

// 'abc'
// 'def'
// 'ghi'

var arr:string[] = str.split('def');
for( var i=0; i<arr.length; i++ )
{
   console.log(arr[i]);
}

// 'abc.'
// '.ghi'

var arr:string[] = str.split('/');
for( var i=0; i<arr.length; i++ )
{
   console.log(arr[i]);
}

// 'abc.def.ghi'
リファレンス：MDN

文字列の置換
pattern にマッチした部分文字列の一部または全てを replacement で置き換えた新しい文字列を返す。 
var str:string = 'abc/def/abc/def/ABC';

// 先頭の一か所のみ置換
console.log( str.replace('abc', 'XYZ') );   // 'XYZ/def/abc/def/ABC'

// RegExpクラスの第２引数にgを指定すると検索した文字列をすべて置換する
console.log( str.replace( new RegExp('abc','g'), 'XYZ') );   // 'XYZ/def/XYZ/def/ABC'

// 文字列が見つからない場合
console.log( str.replace('DEF', 'xyz') );   // 'abc/def/abc/def/ABC'

// RegExpクラスの第２引数にiを指定すると大文字小文字区別しないで置換する
console.log( str.replace( new RegExp('abc','gi'), 'XYZ') );   // 'XYZ/def/XYZ/def/XYZ'
リファレンス：MDN

文字列の挿入

文字列の削除

部分文字列の取得
文字列から指定位置の文字を返す。 
var str:string = 'abc/def/abc/def';

console.log( str.charAt(5) );   // 'e'

console.log( str.charAt(20) );   // 例外は発生せず空分を返す
リファレンス：MDN

この文字列の部分文字列である新しい文字列を返す。範囲指定は文字数で行う。 
var str:string = 'abcあ/def';

// 文字列中の指定した文字の位置( 0開始 )で開始し、文字列の末尾まで続く。
console.log( str.substr( 2 ) );   // 'cあ/def'

// 指定された文字の位置( 0開始 )から始まり、指定した文字数分を返す。
console.log( str.substr( 1, 3 ) );   // 'bcあ'

console.log( str.substr( 10, 3 ) );   // 例外にならずに空分を返す

console.log( str.substr( 1, 20 ) );   // 'bcあ/def'( 例外にはならない )
リファレンス：MDN

この文字列の部分文字列である新しい文字列を返す。範囲指定はインデックスで行う。 
var str:string = 'abcあ/def';

// 文字列中の指定した文字の位置( 0開始 )で開始し、文字列の末尾まで続く。
console.log( str.substring( 2 ) );   // 'cあ/def'

// 指定された文字の位置( 0開始 )から始まり、インデックス indexB - 1 にある文字までを返す。
console.log( str.substring( 1, 4 ) );   // 'bcあ'

console.log( str.substring( 10, 11 ) );   // 例外にならずに空分を返す

console.log( str.substring( 1, 20 ) );   // 'bcあ/def'( 例外にはならない )
リファレンス：MDN

この文字列の部分文字列である新しい文字列を返す。引数に正の数を指定した場合はsubstringと同じ動作をするが、負の数を指定した場合の 動作が異なる。 
var str:string = 'abcあ/def';

// 文字列中の指定した文字の位置( 0開始 )で開始し、文字列の末尾まで続く。
console.log( str.slice( 2 ) );   // 'cあ/def'

// 指定された文字の位置( 0開始 )から始まり、インデックス indexB - 1 にある文字までを返す。
console.log( str.slice( 1, 4 ) );   // 'bcあ'

console.log( str.slice( 10, 11 ) );   // 例外にならずに空分を返す

console.log( str.slice( 1, 20 ) );   // 'bcあ/def'( 例外にはならない )
リファレンス：MDN

文字列比較
JavaScriptと同様に == で比較を行う。ただしTypeScriptでは異なる型通しの比較を行うとコンパイルエラーとなる。

大文字小文字区別する。 

var str:string = 'abcあ/def';

if( str == 'abcあ/def' )
{
   console.log( '一致' );
}
else
{
   console.log( '不一致' );
}

if( str == 'abcあ' )
{
   console.log( '一致' );
}
else
{
   console.log( '不一致' );
}

if( str == 'Abcあ/def' )
{
   console.log( '一致' );
}
else
{
   console.log( '不一致' );
}

if( str === 'abcあ/def' )
{
   console.log( '一致' );
}
else
{
   console.log( '不一致' );
}

if( str === 'abcあ' )
{
   console.log( '一致' );
}
else
{
   console.log( '不一致' );
}

if( str === 'Abcあ/def' )
{
   console.log( '一致' );
}
else
{
   console.log( '不一致' );
}


// 一致
// 不一致
// 不一致
// 一致
// 不一致
// 不一致

var str:string = '012';
if( str == 12 )   // コンパイルエラー：操作 '==' を型 'string' および 'number' に適用することはできません。
{
   console.log( '一致' );
}
else
{
   console.log( '不一致' );
}

if( str === 12 )   // コンパイルエラー：操作 '===' を型 'string' および 'number' に適用することはできません。
{
   console.log( '一致' );
}
else
{
   console.log( '不一致' );
}

文字列検索
文字列中で、指定された値が最初に現れたインデックスを返す。fromIndex が指定されている場合は、fromIndex 以降の範囲内で検索する。

値が見つからない場合は -1 を返す。

大文字小文字区別する。 

var str:string = 'abcd efgh/abcd:abcd';

console.log( str.indexOf( 'cd' ) );   // 2

console.log( str.indexOf( 'CD' ) );   // -1

// 指定したインデックス以降の文字列内で検索する
console.log( str.indexOf( 'cd', 12 ) );   // 12

console.log( str.indexOf( 'ab', 17 ) );   // -1

console.log( str.indexOf( 'cd', 20 ) );   // -1( 例外にならない )
リファレンス：MDN

文字列中で、指定された値が最後に現れたインデックスを返す。fromIndex が指定されている場合は、fromIndex 以前の範囲内で検索する。
なお文字列における文字は左から右にインデックス化される。一番最初の文字のインデックスは 0 で、一番最後の文字のインデックスは stringName.length - 1 となる。

値が見つけられない場合、-1 を返す。

大文字小文字区別する。 

var str:string = 'abcd efcd/abcd:abcd';

console.log( str.lastIndexOf( 'cd' ) );   // 17

console.log( str.lastIndexOf( 'CD' ) );   // -1

// 指定した インデックス 以前の文字列内で検索する
console.log( str.lastIndexOf( 'cd', 12 ) );   // 12

console.log( str.lastIndexOf( 'cd', 11 ) );   // 7

console.log( str.lastIndexOf( 'cd', 1 ) );   // -1

console.log( str.lastIndexOf( 'cd', -1 ) );   // -1( 例外にならない )
リファレンス：MDN

大文字変換
任意のロケール固有のケースマッピングに従って、参照文字列の値を大文字に変換して返す。 
var str:string = 'ABC def/あいう.';

console.log( str.toLocaleUpperCase() );   // 'ABC DEF/あいう.'
リファレンス：MDN

小文字変換
任意のロケール固有のケースマッピングに従って、参照文字列の値を小文字に変換して返す。 
var str:string = 'ABC def/あいう.';

console.log( str.toLocaleLowerCase() );   // 'abc def/あいう.'
リファレンス：MDN

全角文字変換

半角文字変換

先頭および末尾のスペースの削除
文字列の両端の空白を削除する。 
var str:string = '  abc def/ghe.アイウｴｵ  ';

console.log( str.trim() );   // 'abc def/ghe.アイウｴｵ'
リファレンス：MDN

文字列の大小判定
2 つの文字列を辞書的に比較する。 
var str1:string = 'abc';
var str2:string = 'def';
var str3:string = 'ABC';

if( str1 > str2 )
{
    console.log( 'str1 > str2' );
}
else if( str1 < str2 )
{
    console.log( 'str1 < str2' );
}
else
{
    console.log( 'str1 = str2' );
}

if( str1 > str3 )
{
    console.log( 'str1 > str3' );
}
else if( str1 < str3 )
{
    console.log( 'str1 < str3' );
}
else
{
    console.log( 'str1 = str3' );
}

// 'str1 < str2'
// 'str1 > str3'

パディング

文字列型へ変換
指定された Number オブジェクトを表す 文字列を返す。 引数の radix は基数を指定する。

なお TypeScript では0から始まる数値は使えない。 

var m1:number = 123;
console.log( m1.toString(10) );   // '123'

console.log( m1.toString(16) );   // '7b'

var m2:number = 0456;   // コンパイルエラー：octal リテラルは ECMAScript 5 以上をターゲットにする場合には使用できません。
console.log( m2.toString(10) );   // '302'

console.log( m2.toString(16) );   // '12e'
リファレンス：MDN

数を固定小数点表記を用いて表現する。 引数の digits は小数点の後に現れる桁の数を指定する。 
var m1:number = 456.789;
console.log( m1.toFixed() );   // '457'

console.log( m1.toFixed(2) );   // '456.79'

console.log( m1.toFixed(10) );   // '456.7890000000'
リファレンス：MDN

書式変換

文字コード取得
与えられたインデックスに位置する文字の Unicode コードポイントを10進数値で返す。 
var str:string = 'あいう';

console.log( str.charCodeAt(0) );   // 12354
リファレンス：MDN

文字列を逆順に変換

■数値型

数値型の宣言
TypeScriptでは型注釈さらにコンパイル時の型チェックが可能となる。数値型に文字列を代入しようとするとコンパイルエラーとなる。 
var num:number = 123;
console.log( num );

var num:number = "123";   // コンパイルエラー：'string' を 'number' に変換できません。
console.log( num );

// 型指定しない場合は型推論により数値型となる
var str4 = 123;

str4 = 'abc';   // コンパイルエラー：'string' を 'number' に変換できません。

四則演算 
// 加算
console.log( 456 + 123 );   // 579

// 減算
console.log( 456 - 123 );   // 333

// 除算
console.log( 456 / 123 );   // 3.707317073170732

console.log( 456 / 0 );   // Infinity

// 乗算
console.log( 456 * 123 );   // 56088

// 余り
console.log( 456 % 123 );   // 87

数値変換
第1引数の文字列を解析(パース)し、第2引数に与えられた基数(数学的記数法の底)にもとづく整数を返す。 例えば、第2引数が16の場合、第1引数は16進数として与えられた数値とみなし10進数に変換した数値を返す。
なお基数は省略可能だが、誤動作を防ぐために必ず基数を渡すようにすること。 
console.log( parseInt('123', 10) );   // 123

console.log( parseInt('123.1', 10) );   // 123

console.log( parseInt('0xAF', 16) );   // 175

console.log( parseInt('a', 10) );   // NaN
リファレンス：MDN

引数として与えられた文字列を解析し、浮動小数点数を返す。 
console.log( parseFloat('123') );   // 123

console.log( parseFloat('123.1') );   // 123.1

console.log( parseFloat('a') );   // NaN
リファレンス：MDN

絶対値
引数として与えた数の絶対値を返す 
console.log( Math.abs(1) );   // 1

console.log( Math.abs(-2) );   // 2

console.log( Math.abs('-1') );   // コンパイルエラー：指定されたパラメーターが呼び出し対象のどのシグネチャとも一致しません: 	型が 'string' の引数 1 に型 'number' を適用できません。
リファレンス：MDN

切り上げ
引数として与えた数以上の最小の整数を返す 
console.log( Math.ceil(5.12) );   // 6

console.log( Math.ceil(5.67 ) );   // 6

console.log( Math.ceil(-5.12) );   // -5

console.log( Math.ceil(-5.67) );   // -5
リファレンス：MDN

切り下げ
引数として与えた数以下の最大の整数を返す 
console.log( Math.floor(5.12) );   // 5

console.log( Math.floor(5.67 ) );   // 5

console.log( Math.floor(-5.12) );   // -6

console.log( Math.floor(-5.67) );   // -6
リファレンス：MDN

最大値取得
可変長引数として与えた複数の数の中で最大の数を返す。 
console.log( Math.max( 1, 2, 5, 10, 3 ) );   // 10
リファレンス：MDN

最小値取得
可変長引数として与えた複数の数の中で最小の数を返す。 
console.log( Math.min( 1, 2, 5, 10, 3 ) );   // 1
リファレンス：MDN

べき乗
base を exponent 乗した値、つまり、baseexponent の値を返す。 
console.log( Math.pow( 2, 4 ) );   // 16
リファレンス：MDN

乱数
[0,1) 、……つまり、0 以上 1 未満の範囲で疑似乱数を返す。Java と同様に、現在時刻をシードとして乱数を生成する。 
// 0 〜 9 の範囲内で乱数取得
console.log( Math.floor( Math.random() * 10 ) );
リファレンス：MDN

丸め処理
引数として与えた数を銀行丸めではなく四捨五入して、最も近似の整数を返す。 
console.log( Math.round(12.4) );   // 12

console.log( Math.round(13.4) );   // 13

console.log( Math.round(12.5) );   // 13

console.log( Math.round(13.5) );   // 14
リファレンス：MDN

平方根
引数として与えた数の平方根を返す。 
console.log( Math.sqrt(2) );   // 1.4142135623730951
リファレンス：MDN

■日付型

現在日時取得
JavaScriptの場合は他言語のような便利なFormatメソッドがない模様。

なお月は + 1 する必要があることに注意。 

var datetime: Date = new Date();

var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
var hour = datetime.getHours();
var minute = datetime.getMinutes();
var second = datetime.getSeconds();

console.log(year + "/" + month + "/" + date + " " + hour + ":" + minute + ":" + second);
リファレンス：MDN

任意の日付型を作成する
Date型のコンストラクタに日時を渡す。 
var datetime: Date = new Date(2011, 3, 20, 15, 30, 20);

var year = datetime.getFullYear();
var month = datetime.getMonth();
var date = datetime.getDate();
var hour = datetime.getHours();
var minute = datetime.getMinutes();
var second = datetime.getSeconds();

console.log(year + "/" + month + "/" + date + " " + hour + ":" + minute + ":" + second);   // 2011/3/20 15:30:20
リファレンス：MDN

現在の曜日を取得
指定された日時の「曜日」のインデックスを返す。日曜日が 0、月曜日が 1、火曜日が 2 ... となる。 
enum DAYS { '日', '月', '火', '水', '木', '金', '土' };

function foo()
{
    var datetime: Date = new Date();

    console.log(DAYS[datetime.getDay()]);
}
リファレンス：MDN

日付の加減算
Date型のset系メソッドを使用することで日時を更新する。計算結果が無効な日時の場合、つじつまが合うように更新を行う。 
var datetime: Date = new Date();

// 日付加算
datetime.setDate(datetime.getDate() + 30);

var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
var hour = datetime.getHours();
var minute = datetime.getMinutes();
var second = datetime.getSeconds();

console.log(year + "/" + month + "/" + date + " " + hour + ":" + minute + ":" + second);   // 現在の日時の30日後の日時を出力。有効な日を超える場合、月も更新される。

var datetime: Date = new Date();

// 時間減算
datetime.setHours(datetime.getHours() - 30);

var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
var hour = datetime.getHours();
var minute = datetime.getMinutes();
var second = datetime.getSeconds();

console.log(year + "/" + month + "/" + date + " " + hour + ":" + minute + ":" + second);   // 現在の日時の30時間前の日時を出力。時間が負の数となる場合、日も更新される。
リファレンス：MDN

日付の大小比較
< または > を使用して日付型の大小判定を行う。 
var datetime1: Date = new Date();
var datetime2: Date = new Date( 2015, 9, 12, 19, 5, 1);

console.log(datetime1);
console.log(datetime2);

if (datetime1 > datetime2)
{
    console.log('datetime1 > datetime2');
}
else if (datetime1 < datetime2)
{
    console.log('datetime1 < datetime2');
}
else
{
    console.log('datetime1 = datetime2');
}

■列挙型

列挙型
TypeScript固有の機能。 
enum DAYS { '日', '月', '火', '水', '木', '金', '土' };

function foo()
{
    var datetime: Date = new Date();

    console.log(DAYS[datetime.getDay()]);   // '月'

    console.log( DAYS['日'] );   // 0
}

■共用体型

共用体型
TypeScript固有の機能。同一名称の引数または戻り値に複数の型を指定できる。 
function func(x: number): string | number
{
    if (x % 2 == 0)
    {
        return 'a';
    }
    else
    {
        return 1;
    }
}

console.log(func(10));   // 'a'

console.log(func(11));   // 1

■定数

定数
TypeScript固有の機能。 
const str:string = 'abc';

str = 'def';   // コンパイルエラー：Left-Hand side of assignment expression cannot be a constant.

■let

let
var 変数のスコープ範囲は関数単位であるのに対し、let 変数はブロック単位に制限できる。ブロック外で誤って変数を参照する事故を防げる。
TypeScript固有の機能。 
var str1 : string = "abc";
function func()
{
   console.log( str1 );   // 参照できる
   var str2 : string = "def";
}

console.log( str2 );   // 関数外のため参照できない

let str3 : string = "ghi";

for( var i=0; i<3; i++ )
{
   console.log( str1 );   // 参照できる

   console.log( str3 );   // 参照できる

   var str4 : string = "jkl";

   let str5 : string = "mno";
}

console.log( str4 );   // 参照できる

console.log( str5 );   // let 変数はスコープ外のため参照できない

■配列

配列の初期化
[] を使用して配列オブジェクトとして宣言する。 
var arr: string[] = new Array(3);

arr[0] = 'abc';
arr[1] = 'def';
arr[2] = 'ghi';

console.log(arr);   // 0: 'abc'、1: 'def'、2: 'ghi'

var arr: string[] = 'abc';   // コンパイルエラー：string を string[] に変換できません: 	型 'String' に型 'string[]' のプロパティ 'join' がありません。

var arr: string[] = ['abc', 'def', 'ghi',];
console.log(arr);   // 0: 'abc'、1: 'def'、2: 'ghi'

var arr: Array<string> = ['abc', 'def', 'ghi',];
console.log(arr);   // 0: 'abc'、1: 'def'、2: 'ghi'

配列の要素数を取得
配列の要素数を表す符号なし 32 ビット整数 とリファレンスにはあるが、実際にはインデックスの 最大値 + 1 を返す。 
var arr: string[] = ['abc', 'def', 'ghi',];

console.log(arr.length);   // 3

arr[10] = 'jkl';
console.log(arr.length);   // 11
リファレンス：MDN

配列に要素を追加
配列に要素を追加する。指定するインデックスは連続する必要はないが、連続してないと使いにくいだけなのでこの方法はお勧めできない。 
var arr: string[] = ['abc', 'def', 'ghi',];

arr[3] = 'jkl';

console.log(arr);   // 0: 'abc'、1: 'def'、2: 'ghi'、3:'jkl'

arr[5] = 'mno';

console.log(arr);   // 0: 'abc'、1: 'def'、2: 'ghi'、3:'jkl'、5:'mno'

配列の末尾に1つ以上の要素を追加する。また戻り値として新しい配列の要素数を返す。 
var arr: string[] = ['abc', 'def', 'ghi',];

console.log( arr.push( 'jkl' ) );   // 4

console.log(arr);   // 0: 'abc'、1: 'def'、2: 'ghi'、3:'jkl'
リファレンス：MDN

配列の最初に 1 つ以上の要素を追加し、新しい配列の長さを返す。 
var arr: string[] = ['abc', 'def', 'ghi',];

console.log( arr.unshift( 'jkl' ) );   // 4

console.log(arr);   // 0:'jkl'、1: 'abc'、2: 'def'、3: 'ghi'
リファレンス：MDN

配列に他の配列や値をつないでできた新しい配列を返す。 
var arr1: string[] = ['abc', 'def', 'ghi',];

var arr2: string[] = ['jkl', 'mno', 'pqr',];

var arr3: number[] = [1, 2, 3,];

console.log(arr1.concat( arr2 ));   // 0: 'abc'、1: 'def'、2: 'ghi'、3:'jkl'、4:'mno'、5:"pqr"

console.log(arr1.concat( arr3 ));   // コンパイルエラー：指定されたパラメーターが呼び出し対象のどのシグネチャとも一致しません:
リファレンス：MDN

古い要素を取り除きつつ新しい要素を追加することで、配列の内容を変更する。

第1引数は取り除く要素の開始位置、第2引数は取り除く要素数、第3引数以降は可変長引数で追加する要素となる。
splice 実行後もとの配列は、第1引数、第2引数の範囲で取り除いた要素で更新される。戻り値は取り除かれた残りの要素に第3引数を追加した要素となる。 

var arr: string[] = ['abc', 'def', 'ghi', 'jkl', 'mno', ];

console.log(arr.splice(2));   // 0: 'ghi'、1: 'jkl'、2: 'mno'
console.log(arr);             // 0: 'abc'、1: 'def'

var arr: string[] = ['abc', 'def', 'ghi', 'jkl', 'mno', ];

console.log(arr.splice(1, 3));   // 0: 'def'、1: 'ghi'、2: 'jkl'
console.log(arr);                // 0: 'abc'、1: 'mno'

var arr: string[] = ['abc', 'def', 'ghi', 'jkl', 'mno', ];

console.log(arr.splice(1, 2, "xyz"));   // 0: 'def'、1: 'ghi'
console.log(arr);                       // 0: 'abc'、1: "xyz"、2: 'jkl'、3: 'mno'

var arr: string[] = ['abc', 'def', 'ghi', 'jkl', 'mno', ];

console.log(arr.splice(1, 0));   // 要素数0
console.log(arr);                // 0: 'abc'、1: 'def'、2: 'ghi'、3: 'jkl'、4: 'mno'

var arr: string[] = ['abc', 'def', 'ghi', 'jkl', 'mno', ];

console.log(arr.splice(1, 0, "xyz"));   // 要素数0
console.log(arr);                       // 0: 'abc'、1: "xyz"、2: 'def'、3: 'ghi'、4: 'jkl'、5: 'mno'
リファレンス：MDN

配列の要素を削除
配列から最後の要素を取り除き、その要素を返す。 
var arr: string[] = ['abc', 'def', 'ghi',];

console.log( arr.pop() );   // 'ghi'

console.log(arr);   // 0: 'abc'、1: 'def'
リファレンス：MDN

配列から最初の要素を取り除き、その要素を返します。このメソッドは配列の長さを変える。 
var arr: string[] = ['abc', 'def', 'ghi',];

console.log( arr.shift() );   // 'abc'

console.log(arr);   // 0: 'def'、1: 'ghi'
リファレンス：MDN

部分配列の取得
配列の一部を取り出して新しい配列を返す。end は インデックス - 1 までの範囲となる。 
var arr: string[] = ['abc', 'def', 'ghi', 'jkl', 'mno', ];

console.log( arr.slice( 1 ) );   // 0: 'def'、1: 'ghi'、2: 'jkl'、3: 'mno'

console.log( arr.slice( 1, 2 ) );   // 0: 'def'
リファレンス：MDN

配列の検索
引数に与えられた内容と同じ内容を持つ配列要素の内、最初のものの添字を返す。存在しない場合は -1 を返す。 
var arr: string[] = ['abc', 'def', 'ghi', 'abc', 'def', ];

console.log( arr.indexOf( 'def' ) );   // 1

console.log( arr.indexOf( 'xyz' ) );   // -1
リファレンス：MDN

配列中で与えられた要素が見つけられた最後の添字を返す。もし存在しなければ -1 を返す。配列は fromIndex から逆向きに検索される。 
var arr: string[] = ['abc', 'def', 'ghi', 'abc', 'def', ];

console.log( arr.lastIndexOf( 'def' ) );   // 4

console.log( arr.lastIndexOf( 'xyz' ) );   // -1
リファレンス：MDN

配列の連結
配列のすべての要素を繋いで文字列にする。 
var arr: string[] = ['abc', 'def', 'ghi', 'jkl', 'mno', ];

console.log( arr.join() );   // 'abc,def,ghi,jkl,mno'

console.log( arr.join( '\t' ) );   // 'abc	def	ghi	jkl	mno'
リファレンス：MDN

配列を逆順に変換
配列の要素を反転させる。 
var arr: string[] = ['abc', 'def', 'ghi', 'jkl', 'mno', ];

console.log( arr.reverse() );   // 0: 'mno'、1: 'jkl'、2: 'ghi'、3: 'def'、4: 'abc'
リファレンス：MDN

配列をソートする
配列の要素をソートする。compareFunction (比較関数) が与えられなかった場合、要素はそれぞれの文字列に変換したものを比較して辞書順にソートされる。 
var arr1: string[] = ['mno', 'abc', 'ghi', 'jkl', 'def', ];

var arr2: number[] = [ 3, 2, 14, 5, 0, 12 ];

console.log(arr1.sort());   // 0: 'abc'、1: 'def'、2: 'ghi'、3: 'jkl'、4: 'mno'

console.log(arr2.sort());   // 0: 0、1: 12、2: 14、3: 2、4: 3、5: 5

console.log(arr2.sort( (n1: number, n2: number): number => n1 - n2 ));   // 0: 0、1: 2、2: 3、3: 5、4: 12、5: 14

console.log(arr2.sort( (n1: number, n2: number): number => n2 - n1 ));   // 0: 14、1: 12、2: 5、3: 3、4: 2、5: 0
リファレンス：MDN

■連想配列( 辞書 )

連想配列の初期化
keyと値を使用して辞書を作成する。: の左がkey、右が値となる。 
var dic: Object = new Object(3);

dic['abc'] = 'ABC';
dic['def'] = 'DEF';
dic['ghi'] = 'GHI';
console.log(dic);   // abc: 'ABC'、def: 'DEF'、ghi: 'GHI'

var dic1: Object = { 'abc': 'ABC', 'def' : 'DEF', 'ghi' : 'GHI' };
console.log(dic1);   // abc: 'ABC'、def: 'DEF'、ghi: 'GHI'

var dic2: { [key: string]: string; } = { 'abc': 'ABC', 'def': 'DEF', 'ghi': 'GHI' };
console.log(dic2);   // abc: 'ABC'、def: 'DEF'、ghi: 'GHI'

var dic3: { [key: string]: string; } = { 0: 'ABC', 1: 'DEF', 2: 'GHI' };
console.log(dic3);   // 0: 'ABC', 1: 'DEF', 2: 'GHI'

var dic4: { [key: string]: number; } = { 0: 'ABC', 1: 'DEF', 2: 'GHI' };   // { 0: string; 1: string; 2: string; [key: string]: {}; } を { [key: string]: number; } に変換できません: 

var dic5: { [key: number]: string; } = { 'abc': 'ABC', 'def': 'DEF', 'ghi': 'GHI' };   // keyの型を数値型で指定しているが、文字列型で初期化してもコンパイルエラーにならない。バグ？

連想配列の要素数
連想配列の要素数を取得する。 
var dic: Object = { 'abc': 'ABC', 'def': 'DEF', 'ghi': 'GHI' };

console.log( Object.keys(dic).length);   // 3
リファレンス：MDN

連想配列の検索
keyの値を使用して検索する。 
var dic: Object = { 'abc': 'ABC', 'def': 'DEF', 'ghi': 'GHI' };

console.log( dic['abc'] );   // ABC

console.log( dic['xyz'] );   // undefined

連想配列の修正
keyの値を使用して対象の要素を修正する。 
var dic: Object = { 'abc': 'ABC', 'def': 'DEF', 'ghi': 'GHI' };

dic['abc'] = 'xyz';   

console.log( dic );   // abc: 'xyz'、def: 'DEF'、ghi: 'GHI'

連想配列に追加
keyと値を使用して要素を追加する。 
var dic: Object = { 'abc': 'ABC', 'def': 'DEF', 'ghi': 'GHI' };

dic['xyz'] = 'XYZ';

console.log(dic);   // abc: 'ABC'、ghi: 'GHI'、xyz: 'XYZ'

連想配列の削除
keyの値を使用して要素を削除する。 
var dic: Object = { 'abc': 'ABC', 'def': 'DEF', 'ghi': 'GHI' };

delete dic['def'];

console.log( dic );   // abc: 'ABC'、ghi: 'GHI'

delete dic['xyz'];

console.log(dic);   // abc: 'ABC'、ghi: 'GHI'
リファレンス：MDN

■タプル

タプルとは複数の構成要素からなる組を総称する一般概念。プログラミング的には、複数の異なる型を配列としてひとまとめにすることを示す。
なおJavaScriptの場合は、配列がもともとタプルの性質を持っているようである。したがって配列で使用できるメソッドはそのまま使用できるようである。( 気が向いたら確認するってことで )

タプルの初期化
複数の型を指定して初期化する。 
var tuple: [string, number] = ["one", 1, "two", 2];

■条件分岐

if 文 
var str : string = 'abc';

if( str == 'def' )
{
   console.log( 'def' );
}

else if( str == 'ghi' )
{
   console.log( 'ghi' );
}

else
{
   console.log( 'else' );
}

// 'else'

switch 文 
var str : string = 'abc';

switch( str )
{
   case 'def':
      console.log( 'def' );
      break;

   case 'ghi':
      console.log( 'ghi' );
      break;

   default:
      console.log( 'default' );
}

// 'default'

三項演算子 
var str : string = 'abc';

console.log( str == 'abc' ? true : false )

// true

■ループ

for 文 
var arr: string[] = ['abc', 'def', 'ghi', 'jkl', 'mno', ];

for( var i=0; i<arr.length; i++ )
{
   console.log( arr[i] );
}

// 'abc'
// 'def'
// 'ghi'
// 'jkl'
// 'mno'

while 文 
var arr: string[] = ['abc', 'def', 'ghi', 'jkl', 'mno', ];
var i: number = 0;

while( i < arr.length )
{
   console.log( arr[i] );
   i++;
}

// 'abc'
// 'def'
// 'ghi'
// 'jkl'
// 'mno'

do while 文 
var arr: string[] = ['abc', 'def', 'ghi', 'jkl', 'mno', ];
var i: number = 0;

do
{
   console.log( arr[i] );
   i++;
}while( i < arr.length );

// 'abc'
// 'def'
// 'ghi'
// 'jkl'
// 'mno'

for in 文
連想配列の key および 値 を列挙する。 
var dic: Object = { 'abc': 'ABC', 'def': 'DEF', 'ghi': 'GHI' };

// keyの列挙       
for (var obj in dic)
{
   console.log( obj );
}

// 'abc'
// 'def'
// 'ghi'


// 値の列挙       
for (var obj in dic)
{
   console.log( dic[obj] );
}

// 'ABC'
// 'DEF'
// 'GHI'

for of 文
配列の 値 を列挙する。ただし Visual Studio 2013 Update 4 では未対応の模様。Playground では使える。 
var arr: string[] = ['abc', 'def', 'ghi', 'jkl', 'mno', ];

for (var obj of arr)
{
   console.log(obj);
}

// 'abc'
// 'def'
// 'ghi'
// 'jkl'
// 'mno'

■関数

関数 
function add( x : number, y : number ) : number
{
   return x + y;
}

console.log( add( 1, 2 ));

無名関数( 匿名関数 )
オブジェクトの一種である関数を変数に格納して利用する。他言語でいうところの関数ポインタ。 JavaScriptでは主にイベントへの代入に使用する。 
// ボタンのクリックイベントに処理を代入
button.onclick = function(){
   alert( 'test' );
};

ラムダ式
TypeScript固有の機能。無名関数を簡潔に記述できるようになる。 
// ボタンのクリックイベントに処理を代入
button.onclick = () =>{
   alert( 'test' );
};

即時実行関数
その場で即時実行する関数。 
var dataset:number[] = [ 5, 10, 35, 12, 25 ];

var max = ( () => {
         var n:number = 0;

        for( var obj of dataset ){
           if( n < obj ){
              n = obj;
           }
        }

        return n;
})();

console.log(max);   // 35

引数のオプション設定
TypeScript固有の機能。?をつけた引数は省略可能となる。?は複数の引数に設定することができるが、?つき引数の次に?なし引数を記述することはできない。 
function calc(price: number, count: number, taxRate?: number): number
{
    console.log('taxRate -> ' + taxRate);

    if (taxRate != undefined )
    {
        return price * count * (1.0 + taxRate / 100.0);
    }

    else
    {
        return price * count;
    }
}

console.log(calc(1200, 10));   // 12000

console.log(calc(1200, 10, 8));   // 12960

引数の規定値
TypeScript固有の機能。引数のオプション設定と同様に引数を省略できる。違いは規定値を設定した引数を省略した場合 undefined ではなく 規定値が入力されることである。 
function calc(price: number, count: number, taxRate: number = 0): number
{
    console.log('taxRate -> ' + taxRate);

    return price * count * (1.0 + taxRate / 100.0);
}

console.log(calc(1200, 10));   // 12000

console.log(calc(1200, 10, 8));   // 12960

可変長引数
TypeScript固有の機能。関数を呼び出すときに複数のデータを渡せる。 
function add( ...m : number[]): number
{
   var ret : number = 0;
   
   for( var i=0; i<m.length; i++ )
   {
      ret += m[i];
   }
   
   return ret;
}

console.log(add(10, 20, 30));   // 60

関数のオーバーロード
TypeScript固有の機能。実装なし行の引数リストと戻り値の型だけを指定したオーバーロード関数を続けて書き、 最後にいずれの形式の関数呼び出しにも対応できるような実装行を１行記述する。

戻り値の型はすべて一致させる必要がある。

実装行の引数リストの数は、実装なし行の引数リストの数の最大値と同じにする必要がある。( 少なくしても動作するがあえて少なくする必要性はどこにもない ) 実装なし行の引数リストの数が実装行の引数リストの数より少ない行がある場合、オプションないし規定値を使用してどのパターンでも対応できるように実装する必要がある。 

function calc( x: string, y: string ): number;
function calc( x: number, y: string ): number;
function calc( x: string, y: number ): number;
function calc( x: number, y: number ): number;
function calc( x: any, y: any ): number
{
   var x2: number = 0;
   var y2: number = 0;
   
   if( typeof( x ) == 'string' )
   {
      x2 = parseInt( x, 10 );
   }
   else
   {
      x2 = x;
   }

   if( typeof( y ) == 'string' )
   {
      y2 = parseInt( y, 10 );
   }
   else
   {
      y2 = y;
   }
   
   return x2 + y2;
}

console.log(calc('10', '20'));   // 30

console.log(calc(10, '20'));   // 30

console.log(calc('10', 20));   // 30

console.log(calc(10, 20));   // 30

console.log(calc(new Date(), 20));   // コンパイルエラー：指定されたパラメーターが呼び出し対象のどのシグネチャとも一致しません: 

function calc2( x: number, y: number ): number;
function calc2( x: number, y: number ): string;   // コンパイルエラー：戻り値の型のみが異なるオーバーロードは使用できません。
function calc2( x: any, y: any ): number
{
   return x * y;
}

function calc3(x: string, y: number, z: string): number;
function calc3(x: number, y: number): number;   // コンパイルエラー：呼び出しシグネチャのパラメーターは 2 個以下にする必要があります。
function calc3(x: any, y: any, z: any): number
{
   return x * y;
}

function calc4(x: number, y: number, z: number): number;
function calc4(x: number, y: number): number;
function calc4(x: number, y: number, z?: number): number
{
   var num:number = x * y;
   
   if( z != undefined )
   {
      num *= z;
   }
   
   return num;
}

console.log(calc4(1, 2));   // 2

console.log(calc4(1, 2, 3));   // 6

ジェネリックス
TypeScript固有の機能。データ型を仮に決めておき、実際に使用するデータ型を呼び出し時に変えられるようにする機能で、総称型とも呼ばれる。 さまざまなデータ型の引数に対してきめ細かく処理を分けるためではなく、どのデータ型に対しても同じような処理をしたい場合に使う。 
function func<T>( data: T ): T
{
   return data;
}

console.log( func<string>( 'abc' ) );   // 'abc'

console.log( func<number>( 60 ) );   // 60

console.log( func<number>( 'abc' ) );   // コンパイルエラー：'call' 式に対するオーバーロードを選択できません。

クロージャー
関数の中に関数を定義し、その際に、外側の関数で宣言された変数を内側の関数で操作すること。 クロージャーの主な利点としてはグローバル変数の削減が挙げられる。 
function func()
{
    var x:number = 1;

    return ( n: number ): number =>
    {
        return x+=n;
    }
}

var f = func();

alert(f(1));  // 2
alert(f(2));  // 4
alert(f(3));  // 7

■クラス

クラス
TypeScript固有の機能。クラスとはある目的に従っていくつかの変数や関数をまとめたものを示す。以下のサンプルではアクセサ、コンストラクタ、オーバーロードの例を示す。 
class Player
{
   private _id: number;
   private _name: string;
   private _life: number;

   public constructor();   // コンストラクタとオーバーロード
   public constructor(id: number, name: string, life: number);
   public constructor(id?: number, name?: string, life?: number)
   {
      if (id != undefined){ this._id = id; }

      if (name != undefined){ this._name = name; }

      if (life != undefined){ this._life = life; }
   }

   public get id(): number { return this._id }
   public set id( value: number){ this._id = value; }

   public get name(): string { return this._name }
   public set name( value: string){ this._name = value; }

   public get life(): number { return this._life }
   public set life( value: number){ this._life = value; }
   
   public get()
   {
      return this._id + ',' + this._name + ',' + this._life;
   }
}

var player = new Player();

player.id = 1;
player.name = 'test1';
player.life = 100;
console.log(player.get());   // '1,test1,100'

player = new Player( 2, 'test2', 300 );
console.log(player.get());   // '2,test2,300'

継承
TypeScript固有の機能。継承とは元のクラス（親クラス）の機能を全て受け継いだ新しいクラス（子クラス）を定義すること。
多重継承はサポートしない。
class Human
{
   private _id: number;
   protected _name: string;
   
   public constructor();
   public constructor(id: number, name: string);
   public constructor(id?: number, name?: string)
   {
      if (id != undefined){ this._id = id; }

      if (name != undefined){ this._name = name; }
   }

   public get id(): number { return this._id }
   public set id( value: number){ this._id = value; }

   public get name(): string { return this._name }
   public set name( value: string){ this._name = value; }
 
   public get()
   {
      return this._id + ',' + this._name;
   }
}

class Player extends Human
{
   private _shield: number;
   
   // コンストラクタはスーパークラスのコンストラクタをオーバーライドしている
   public constructor();
   public constructor(id: number, name: string, shield: number);
   public constructor(id?: number, name?: string, shield?:number)
   {
      // スーパークラスのコンストラクタを呼び出し
      super( id, name );
	  
      if (shield != undefined){ this._shield = shield; }
   }  

   public get shield(): number { return this._shield }
   public set shield( value: number){ this._shield = value; }
   
   public get()
   {
//      return this._id + ',' + this._name + ',' + this._shield;   // スーパークラスの private スコープの変数にはアクセスできないためコンパイルエラーになる
      return this.id + ',' + this.name + ',' + this._shield;
   }
}

var player = new Player();

//player._id = 1;   // スーパークラスの private スコープの変数にはアクセスできないためコンパイルエラーになる
//player._name = 'test1';   // スーパークラスの protected スコープの変数にはアクセスできないためコンパイルエラーになる
//player._shield = 100;   // サブクラスの private スコープの変数にはアクセスできないためコンパイルエラーになる

player.id = 1;
player.name = 'test1';
player.shield = 100;   // サブクラスの private スコープの変数にはアクセスできないためコンパイルエラーになる
console.log(player.get());   // '1,test1,100'

player = new Player( 2, 'test2', 200 );
console.log(player.get());   // '2,test2,200'

インターフェース
TypeScript固有の機能。
インターフェースとは、クラスの設計図のようなもので、そのクラスがどのような機能を持つかを定義する。
インターフェースとして定義したクラスのメソッドはサブクラス側で必ずオーバーライドして実体化する必要がある。
インターフェースのインスタンスを作成することはできない。
インターフェイス内で宣言されるメソッドおよび変数は全てpublicである必要がある。
多重継承が可能である。
interface Human
{
   move( _x:number, _y:number );
}

interface Wepon
{
   attack(): string;
}

class Player implements Human, Wepon
{
    public x: number;
    public y: number;
    public wepon: string;
    
    public constructor(_x: number, _y: number, _wepon: string)
    {
        this.x = _x;
        this.y = _y;
        this.wepon = _wepon;
    }

   public move( _x: number, _y: number )
   {
      this.x += _x;
      this.y += _y;
   }

   public attack(): string
   {
      return this.wepon;
   }
}

//var human = new Human();   // コンパイルエラー：シンボル 'Human' が見つかりません。

var player = new Player(1, 2, 'handgun');

console.log(player.x + ',' + player.y);   // '1,2'

player.move( 3, 4 );

console.log(player.x + ',' + player.y);   // '4,6'

console.log( player.attack() );   // 'hundgun'

■型定義ファイル

型定義ファイル
jQueryのようなライブラリを使用する場合、$のようにライブラリ内部で定義されている変数などが使用できずコンパイルエラーとなる。 型定義ファイルを使用することによりライブラリ内部で使用されている変数などをコンパイラに通知し、コンパイルできるようにする。
型定義ファイルを Visual Studio 2013 Update 4 に追加する手順

NUGetパッケージの管理

jquery DefinitelyTyped

ソースファイルにjqueryの型定義ファイルを指定

コンパイルエラーがなくなる

Top
inserted by FC2 system