吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【TypeScript】型について

2014年10月10日 / category : typescript

TypeScriptの型について、まとめてみます。
まず、型とは。

TypeScript
var str:string = 'hello';

赤い箇所が、「型」です。はい。
どんな型指定があるかというと、まずはプリミティブ型の真偽値(boolean)、文字列(string)、数値(number)です。

TypeScript
var str:string = 'hello';
var num:number = 123;
var flag:boolean = true;

こんな感じ。はい。
次に、any型というものがあります。どんな型の値を代入しても良い型指定です。

TypeScript
var str:any = 'hello';
var num:any = 123;
var flag:any = true;

次に、関数の返り値の型指定で、returnをしない関数で指定するvoid型。

TypeScript
function hello():void{
	console.log('返り値がありません。');
}

こんな感じ。はい。
ここまでは簡単。

次の型指定は、コンパイルエラーになります。

TypeScript
var str:string = new String('hello'); //コンパイルエラー

むむ、なんでだ。

TypeScript
var strA:string = 'hello';
var strB:string = String('hello');
var strC:string = new String('hello'); //コンパイルエラー

変数strA、変数strBは問題ない。変数strCだけ、コンパイルエラー。
typeof演算子で調べてみる。

TypeScript
console.log( typeof('hello'), typeof(String('hello')), typeof(new String('hello')) );

‘string string object’
と出力される。最後だけ’object’。
そうなんです。new String(‘hello’)は、objectなんです。

TypeScript
var strC:object = new String('hello'); //コンパイルエラー

じゃ~、こうか。
と思ったら、コンパイルエラー。
object型という型指定はないのです。
では、どうするか。

TypeScript
var strC:Object = new String('hello');

こうやります。
さっきと何が違うか?
objectだとコンパイルエラー。
Objectだと問題ない。
大文字だとセーフ?
そうです、これをラッパ型と言います。
Object型は、全てのベースとなる型指定です。

TypeScript
var str:Object = 'hello';
var num:Object = 123;
var flag:Object = true;

なので、こんな型指定もありです。(たぶん、実際はしないと思いますが・・・。)
でも、先ほどの

TypeScript
var strC:Object = new String('hello');

これは、なんかしっくりこない。
new演算子でStringオブジェクトを生成してるのに、型指定がObject。
なんかしっくりこない。

ラッパ型、他にもあります。
Stringオブジェクトの場合は、String。
Numberオブジェクトの場合は、Number。
Booleanオブジェクトの場合は、Boolean。

TypeScript
var str:String = new String('hello');
var num:Number = new Number(123);
var flag:Boolean = new Boolean(true);

こんな感じ。はい。
これでスッキリ。

スッキリ?
でも、冷静に考えると、実際にコードを書くとき、変数に文字列を代入するときに、わざわざnew演算子でStringオブジェクトを生成するか?

TypeScript
var str:string = 'hello';
var num:number = 123;
var flag:boolean = true;

こう書きますよね?
なので、ラッパ型の型指定もあるよ~、という感じで覚えておくだけで良いと思います。

型指定は、これで全てか?
いや、まだあります。

TypeScript
interface IHello{
	str:string;
	num:number;
	flag:boolean;
}
class Hello{}

var helloA:IHello = {str:'hello', num:123, flag:true};
var helloB:Hello = new Hello();

interface(インターフェイス)や、class(クラス)を型指定しています。
これらは、後ほど改めて記事にしようと思っているので、とりあえず割愛します。。。

そして、最後に。
配列の型指定。

TypeScript
var strList:string[] = ['a', 'b', 'c', 'b'];

こんな感じ。はい。
配列の要素の型 + []
という記述です。
上のコードの場合、配列の要素は全て文字列なので、string。
で、[]を付ける。

配列の要素が全て同じ型ではない場合は、どうするか。
['hello', 123, true]
こんな配列の場合。

TypeScript
var arr = ['hello', 123, true];

型をつけない。
うん、潔い。

型推論と言って、コンパイラが自動的に型を推測してくれる機能があります。
潔く、型推論に頼る。

ただ、型指定した変数に代入することができない・・・。

TypeScript
var arr = ['hello', 123, true];
var value:string = arr[0]; //コンパイルエラー

なぜコンパイルエラーになるか。
配列の型推論は、{}[]型となるらしい。
上のコードの場合、変数の型をstringにしているため、{}をstringに代入することができないため、コンパイルエラーになるらしい。

では、どうするか。

TypeScript
var arr:any[] = ['hello', 123, true];
var value:string = arr[0];

any[]
この型指定をすると、コンパイルエラーをせず問題なく参照できる。

さて、次の問題。
入れ子構造の配列の場合、どのような型指定になるか。

[
['a', 'b', 'c'],
['d', 'e', 'f'],
['g', 'h', 'i']
]

こんな感じの配列の場合、

TypeScript
var arr:string[][] = [
['a', 'b', 'c'],
['d', 'e', 'f'],
['g', 'h', 'i']
];

string + [] + []
こんな感じ。はい。

以上が、TypeScriptの型についての基本知識。