読者です 読者をやめる 読者になる 読者になる

もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

TypeScriptを試してみた 2

JavaScript TypeScript

前回に引き続きTypeScriptの話

前回はこちら
http://rei19.hatenablog.com/entry/2013/07/14/183311

今回は変数について書きます。

使える変数の型

プリミティブな型はJavaScriptと同じものが使えるみたいです。

module TSTest{
    export class TypeTest{
        // 型変換のためのモジュール
        private text : string;   // string型
        private num : number;    // number型
        private judge : boolean; // boolean型
        private obj : any;       // any(なんでもあり)
	private text2 = '';      // 型指定無し String
	private num2 = 0;        // 型指定無し Number
	private judge2 = false;  // 型指定無し Boolean
        // 後は特殊な型のnullとundefined
        constructor(){
            this.text='';
            this.num=0;
            this.judge=true;
            this.obj=function(){};
        }
        showProperty() : void{
              console.log('textの型 : ' + typeof this.text);
              console.log('numの型 : ' + typeof this.num);
              console.log('judgeの型 : ' + typeof this.judge);
              console.log('objの型 : ' + typeof this.obj);
              console.log('text2の型 : ' + typeof this.text2);
              console.log('num2の型 : ' + typeof this.num2);
              console.log('judge2の型 : ' + typeof this.judge2);
        }
    }
}
var typeTest : TSTest.TypeTest = new TSTest.TypeTest();
typeTest.showProperty();
// 出力結果
// textの型 : string
// numの型 : number
// judgeの型 : boolean
// objの型 : function
// text2の型 : string
// num2の型 : number
// judge2の型 : boolean

注目すべきはanyですね。他の型は一般的なクラスベースの言語と同じで、代入時に厳格な型チェックが行われますが、anyについては既存のJavaScriptと同じ扱いになっているのでStringが入っている変数にNumberを入れても動くというものです。ただ、これはTypeScriptの良さを消してしまっているので基本的には使わない方がよいでしょう。

上記のコードでは型宣言する形としない形それぞれで変数を定義してみました。型宣言しない場合は暗黙の型推論が行われ、型が決まります。コンパイル上は問題なく動きますが、text2にnum2を代入しようとしたりすると型が違うのでエラーになります。ただ、これは宣言と同時に初期値を設定した場合のみで、宣言した後に値を入れるとTypeScript上ではanyとなるようなので、先に述べた型変換のエラーは起きなくなります。まあ、TypeScriptを使っている以上、あえて型宣言を省略する意味はないかと思うので、JavaScriptからの移行中とかでない限りは厳密に型を書いた方がよいでしょう。

おまけ

TypeScriptの実行確認をする時、都度、コンパイルして画面に読み込ませて実行とかnode.js立ち上げて実行とかするとだるいのですが、以下のコマンドを使うとtsファイルのまま実行してくれます。
ちょっとした確認なんかには便利ですね

tsc -e (ファイルパス).ts

次回に続く

おもったよりボリューム多い!

WEB+DB PRESS Vol.75

WEB+DB PRESS Vol.75