はじめに
Typescriptで、変数の型で何度か悩んだので忘れない為にメモ。
基本の型
- number・・・数値
- string・・・文字列
- boolean・・・真偽値
型の定義方法
変数の型定義方法
//var 変数名: 型名
var hoge:number;
関数の型定義方法
//function 関数名 (引数名:引数の型) : 関数の戻り値の型 {}
function hoge(str:string):string{
return '私の名前は'+ str + 'です。';
}
var s:string = hoge('ポンチ');
any型
any型を使うと、通常のjavascriptのように、
変数に文字列でも、数字でも自由に入れることができる。
var n:number = 12345;
n = '12345';//コンパイルエラー
var hoge:any = 12345;
hoge = '12345';//any型の場合コンパイルエラーにならない
//nullも、undefinedもコンパイルエラーにならない
hoge = undefined;
hoge = null;
any型は何でも入れられるが、コンパイラーの型チェックなどが効かなくなる。
ライブラリを使用した際に、型定義ファイルが無い場合などに使用する。
型推論
全てに型定義の記載をすると、コードが長くなる場合がある。
その場合はコードの文脈（変数の初期化や、戻り値の型など）によって、型が推測できる場合は、
型定義を省略できる。
var str = '';
str = 123;//初期化時に文字列を入れている為、変数の型定義無しでもコンパイルエラーとなる。
function hoge(n:number):void{
alert(n *10);
}
var num = 10;
hoge(num);
var str = 'あいうえお';//引数の型定義をしている為、変数の型定義無しでもコンパイルエラーとなる。
hoge(str);
変数にオブジェクトを入れる場合の型定義方法
基本的には下記のように定義する。
var obj: {key: string} = {key:'string'};
引数としてオブジェクトを渡す場合
function hoge(obj: { key1: string; key2: number; }): void {
}
hoge({ key1: "ABC", key2: 123 });
◎プロパティを省略する
下記のように指定したプロパティのキー（key）の定義が無いとコンパイルエラーになる。
省略可の識別子として?を使用することで、型定義済みのキーを省略してもエラーが発生しなくなる。
var obj: {key: string} = {};//エラーになる
var obj2: {key?: string} = {};//省略してもエラーにならない
変数に配列を入れる場合の型定義方法
基本的には下記のように定義する。
var array:string[] = ['A','B','C'];
var array2:number[] = [1,2,3];
◎2次元配列
var array:string[][] = [['A','B'],['C','D']];
◎配列にオブジェクトを入れる
var array : {key:string}[] = [{key:'ABC'},{key:'EFG'}];
var array2 : {key?:string}[] = [{},{}];
◎オブジェクトに配列を入れる
var obj:{key:string[]} = {key:['ABC']};
void型
関数の戻り値が無い場合に使う。（それ以外での使いどころがわからなかった・・・）
function hoge(str:string):void{
alert(str);
}
hoge('test');
型定義ファイル
既存のJSライブラリを使う場合などに、ライブラリのクラスやオブジェクトに型定義を行います。
Typescript標準で用意されている型以外は、型定義ファイルを別途読み込む必要があります。
◎jQueryを使ってみる
下記の記載だとコンパイルエラーになる。
var j = $('body');
型を定義してみても、コンパイルエラーとなる。
var j:JQuery = $('body');
コンパイルを通すには、jQueryの型定義をする必要があります。
①まず型定義ファイルを用意します。
下記から、jquery.d.tsをダウンロードします。
tsd（型定義ファイル管理ツール）コマンドを使ってもインストールできます。
tsd install jquery
tsdのインストール、使い方については下記が分かりやすかったです。
②referenceタグを使用して、ダウンロードしたjQueryの型定義ファイルを読み込みます。
/// <reference path="jquery/jquery.d.ts" />
こちらだと、コンパイルエラーにならない。
/// <reference path="jquery/jquery.d.ts" />
var j = $('body');
var j2:JQuery = $('body');
※ jquery.d.tsは型定義用の為、jQueryのライブラリは別途読み込む必要があります。