Edited at

Typescriptの変数の型定義メモ

More than 3 years have passed since last update.


はじめに

Typescriptで、変数の型で何度か悩んだので忘れない為にメモ。


基本の型


  • number・・・数値

  • string・・・文字列

  • boolean・・・真偽値


型の定義方法

変数の型定義方法


typescript

//var 変数名: 型名

var hoge:number;


関数の型定義方法


typescript

//function 関数名 (引数名:引数の型) : 関数の戻り値の型 {}

function hoge(str:string):string{
return '私の名前は'+ str + 'です。';
}

var s:string = hoge('ポンチ');



any型

any型を使うと、通常のjavascriptのように、

変数に文字列でも、数字でも自由に入れることができる。


typescript

var n:number = 12345;

n = '12345';//コンパイルエラー

var hoge:any = 12345;
hoge = '12345';//any型の場合コンパイルエラーにならない

//nullも、undefinedもコンパイルエラーにならない
hoge = undefined;
hoge = null;


any型は何でも入れられるが、コンパイラーの型チェックなどが効かなくなる。

ライブラリを使用した際に、型定義ファイルが無い場合などに使用する。


型推論

全てに型定義の記載をすると、コードが長くなる場合がある。

その場合はコードの文脈(変数の初期化や、戻り値の型など)によって、型が推測できる場合は、

型定義を省略できる。


typescript

var str = '';

str = 123;//初期化時に文字列を入れている為、変数の型定義無しでもコンパイルエラーとなる。


typescript

function hoge(n:number):void{

alert(n *10);
}

var num = 10;
hoge(num);

var str = 'あいうえお';//引数の型定義をしている為、変数の型定義無しでもコンパイルエラーとなる。
hoge(str);



変数にオブジェクトを入れる場合の型定義方法

基本的には下記のように定義する。

var obj: {key: string} = {key:'string'};

引数としてオブジェクトを渡す場合


typescript

function hoge(obj: { key1: string; key2: number; }): void {

}
hoge({ key1: "ABC", key2: 123 });



◎プロパティを省略する

下記のように指定したプロパティのキー(key)の定義が無いとコンパイルエラーになる。

省略可の識別子として?を使用することで、型定義済みのキーを省略してもエラーが発生しなくなる。


typescript

var obj: {key: string} = {};//エラーになる

var obj2: {key?: string} = {};//省略してもエラーにならない


変数に配列を入れる場合の型定義方法

基本的には下記のように定義する。


typescript

var array:string[] = ['A','B','C'];

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


◎2次元配列


typescript

var array:string[][] = [['A','B'],['C','D']];



◎配列にオブジェクトを入れる


typescript

var array : {key:string}[] = [{key:'ABC'},{key:'EFG'}];

var array2 : {key?:string}[] = [{},{}];


◎オブジェクトに配列を入れる


typescript

var obj:{key:string[]} = {key:['ABC']};



void型

関数の戻り値が無い場合に使う。(それ以外での使いどころがわからなかった・・・)


typescript

function hoge(str:string):void{

alert(str);
}

hoge('test');



型定義ファイル

既存のJSライブラリを使う場合などに、ライブラリのクラスやオブジェクトに型定義を行います。

Typescript標準で用意されている型以外は、型定義ファイルを別途読み込む必要があります。


◎jQueryを使ってみる

下記の記載だとコンパイルエラーになる。


typescript

var j = $('body');


型を定義してみても、コンパイルエラーとなる。


typescript

var j:JQuery = $('body');


コンパイルを通すには、jQueryの型定義をする必要があります。

①まず型定義ファイルを用意します。

下記から、jquery.d.tsをダウンロードします。


https://github.com/borisyankov/DefinitelyTyped


tsd(型定義ファイル管理ツール)コマンドを使ってもインストールできます。

tsd install jquery

tsdのインストール、使い方については下記が分かりやすかったです。


TypeScriptの型定義ファイル管理ツールtsdを使ってみた


②referenceタグを使用して、ダウンロードしたjQueryの型定義ファイルを読み込みます。


typescript

/// <reference path="jquery/jquery.d.ts" />


こちらだと、コンパイルエラーにならない。


typescript

/// <reference path="jquery/jquery.d.ts" />

var j = $('body');
var j2:JQuery = $('body');

※ jquery.d.tsは型定義用の為、jQueryのライブラリは別途読み込む必要があります。