TypeScriptでマルいJavaScriptを型くする

初めてのTypeScriptネタ。間違ってたら優しく教えて下さい。

Transcript

1. で
   いJavaScriptを
   くする
   2015-12-16
   Takeru Ichii
   型
   

   View Slide

2. おしながき
   •  JavaScriptとは
   •  JavaScriptつらい
   •  TypeScriptとは
   •  ちょっとやってみる
   

   View Slide

3. JavaScriptとは
   •  いわゆる ECMA-262 5.1 edition で規定されている言語仕様
   •  元々はブラウザ等で各々の仕様が異なるJavaScriptを共通化　　
   するために作られたもの
   •  弱い動的型付けのマルチパラダイムプログラミング言語
   

   View Slide

4. JavaScriptとは
   •  いわゆる ECMA-262 5.1 edition で規定されている言語仕様
   •  元々はブラウザ等で各々の仕様が異なるJavaScriptを共通化　　
   するために作られたもの
   •  弱い動的型付けのマルチパラダイムプログラミング言語
   JavaScriptつらい！！！！
   

   View Slide

5. JavaScriptつらい
   •  ダックタイピングな言語はソースが巨大化した時に何がデータ　　　
   として挿入されるかわからない
   •  オブジェクト指向言語でもあるが、プロトタイプベース
   •  クラスベースになれた人にとっては表現がしづらい
   ダックタイピング: 「もしもそれがアヒルのように歩き、アヒルのように鳴くのなら、それはアヒルである」な感じ
   

   View Slide

6. TypeScriptとは
   •  JavaScriptに以下の要素を付加した言語（またはAltJS）
   •  ECMAScript6の機能先取り
   •  class/lambda/デフォルト引数/let/const etc…
   •  ECMAScript7（策定中）のデコレーター機能
   •  型注釈/型推論の充実
   •  インターフェイスの記述
   https://ja.wikipedia.org/wiki/TypeScript
   http://www.buildinsider.net/language/quicktypescript/01#type-inference
   

   View Slide

7. ちょっとやってみる
   •  TypeScript公式にPlaygroundが用意されている
   •  TypeScriptを書いたらそのJavaScriptコンパイル結果と実行ができる
   •  URLで独自コードをいつでも参照可能
   •  デモコードのURLはノートに記載
   •  以下のデモをご用意
   •  型注釈/型推論/インターフェイス/デフォルト引数/const/let
   •  アロー関数/テンプレート文字列
   •  クラスベースオブジェクト指向言語
   

   View Slide

8. ちょっとやってみる
   型注釈
   
   /*  
    *  1  Type  annotation  
    *  1.1  String  
    */  
   var  sampleStr:  string;  
   sampleStr  =  "string";  //success  
   sampleStr  =  1;                //Type  mismatch  error  
    
   /*  
    *  1.2  number  
    */  
   var  sampleNum:  number;  
   sampleNum  =  1;            //integer  
   sampleNum  =  1.2;        //float?  
   sampleNum  =  -­‐1.234;  //float?  
   sampleNum  =  "";          //Type  mismatch  error  
   /*  
    *  1.3  boolean  
    */  
   var  sampleBool:  boolean;  
   sampleBool  =  true;    //success  
   sampleBool  =  false;  //success  
   sampleBool  =  "";        //Type  mismatch  error  
   sampleBool  =  1;          //Type  mismatch  error  
   •  型注釈によって変数の型を束縛
   •  プリミティブ型として３つを用意
   •  string
   •  number
   •  boolean
   

   View Slide

9. ちょっとやってみる
   型推論
   
   /*  
    *  2  Type  inference  
    */  
   var  sampleInfer1  =  1;  
   alert(typeof  sampleInfer1);  //number  
    
   var  sampleInfer2  =  "hoge";  
   alert(typeof  sampleInfer2);  //string  
   •  変数宣言時に特に型宣言をしない場合、
   適当な型を選択
   •  一度宣言したら、再代入時に型を一致　
   させる必要がある
   

   View Slide

10. ちょっとやってみる
    インターフェイス
    
    /*  
     *  3  Interface  
     */  
    interface  sampleInterface  {  
     name:  string;  //  required  parameter  -­‐?  ":"  
     sex?:  string;  //  optional  parameter  -­‐>  "?:"  
     age:  number;  
    }  
     
    function  getUserSuccess1():  sampleInterface  {  
     return  {  
       name:  "takeru",  
       sex:  "male",  
       age:  24  
     }  
    }  
    function  getUserSuccess2():  sampleInterface  {  
     //  omit  optional  parameter  "sex"  
     return  {  
       name:  "takeru",  
       age:  24  
     }  
    }  
     
    function  getUserError():  sampleInterface  {  
     //  Error:  required  parmeter  "age"  is  not  defined  
     return  {  
       name:  "takeru"  
     }  
    }  
    •  インターフェイスを宣言できる
    •  省略可能な要素は”?:”を使う
    

    View Slide

11. ちょっとやってみる
    デフォルト引数
    
    /*  
     *  4  default  argument  
     */  
    function  sampleFunc1(inputString:  string  =  "default  argument"):  void{  
     alert(inputString);  
    }  
     
    sampleFunc1("hogehoge");  //  alert  "hogehoge"  
    sampleFunc1();  //  alert  "default  argument”  
    JavaScriptではできなかった関数等のデフォルト引数を設定できる
    

    View Slide

12. ちょっとやってみる
    const/let
    
    /*  
     *  5  const  
     */  
    const  constVar  =  "const";  
    constVar  =  "cannot  reassign  const  var";  
     
    /*  
     *  6  let  
     */  
    function  sampleLet1():  void  {  
     for(var  i:  number  =  1;  i<10;  i++){  
       continue;  
     }  
     alert(i);//10  
    }  
     
    function  sampleLet2():  void  {  
     for(let  i:  number  =  1;  i<10;  i++){  
       continue;  
     }  
     alert(i);  //undefined  
    }
    Const
    •  定数宣言できる。
    •  再代入は不可
    •  型推論可能
    Let
    •  変数のスコープを縛ることができる
    

    View Slide

13. ちょっとやってみる
    アロー関数/テンプレート文字列
    
    /*  
     *  7  allow  function  
     */  
     
    //JavaScript  like  
    var  addJs  =  function(a,b){  
     return  a  +  b;  
    }  
    alert(addJs(1,2));//3  
     
    //arrow  function  
    var  addType  =  (a:  number,  b:number):  number  =>  a  +  b;  
    alert(addType(1,2))//3  
     
    /*  
     *  8  template  literals  
     */  
     
    alert("今日は${Math.random()  <  0.5  ?  '良い'  :  '悪い'}日だ。");
    アロー関数
    •  例ではJavaScriptとTypeScriptの
    比較を行っている
    文字列テンプレート
    •  文字列中に”${}”を入れることに
    よって変数挿入したりできる
    

    View Slide

14. ちょっとやってみる
    クラスベースオブジェクト指向言語
    
    /*  
     *  9  class  base  object-­‐oriented  programming    
     */  
    interface  Data  {  
     name:  string;  
     age:  number;  
    }  
     
    class  sampleClass  {  
     private  data:  Data;  
       
     constructor()  {  
       this.data  =  {  
         name:  "takeru",  
         age:  38  
       }  
     }  
       
     get  name():  string  {  
       return  this.name;  
     }  
    }  
     
    var  sampleInstance  =  new  sampleClass;  
    alert(sampleInstance.name);
    JavaScriptではプロトタイプベース
    のみのサポートだったが、
    TypeScriptによってクラスベースオ
    ブジェクト指向の記述が可能に
    

    View Slide

15. ちょっとやってみる
    デモコードURL
    http://www.typescriptlang.org/Playground#src=%0A%2F*%0A%20*%201%20Type%20annotation%0A%20*%201.1%20String%0A%20*%2F%0Avar%20sampleStr%3A%20string%3B%0AsampleStr%20%3D%20%22string%22%3B%20%2F%2Fsuccess%0AsampleStr%20%3D%201%3B
    %20%20%20%20%20%20%20%20%2F%2FType%20mismatch%20error%0A%0A%2F*%0A%20*%201.2%20number%0A%20*%2F%0Avar%20sampleNum%3A%20number%3B%0AsampleNum%20%3D%201%3B%20%20%20%20%20%20%2F%2Finteger%0AsampleNum%20%3D%201.2%3B%20%20%20%20%2F
    %2Ffloat%3F%0AsampleNum%20%3D%20-1.234%3B%20%2F%2Ffloat%3F%0AsampleNum%20%3D%20%22%22%3B%20%20%20%20%20%2F%2FType%20mismatch%20error%0A%0A%0A%2F*%0A%20*%201.3%20boolean%0A%20*%2F%0Avar%20sampleBool%3A%20boolean%3B%0AsampleBool%20%3D
    %20true%3B%20%20%2F%2Fsuccess%0AsampleBool%20%3D%20false%3B%20%2F%2Fsuccess%0AsampleBool%20%3D%20%22%22%3B%20%20%20%20%2F%2FType%20mismatch%20error%0AsampleBool%20%3D%201%3B%20%20%20%20%20%2F%2FType%20mismatch%20error%0A%0A%2F*%0A%20*
    %202%20Type%20inference%0A%20*%2F%0Avar%20sampleInfer1%20%3D%201%3B%0Aalert(typeof%20sampleInfer1)%3B%20%2F%2Fnumber%0A%0Avar%20sampleInfer2%20%3D%20%22hoge%22%3B%0Aalert(typeof%20sampleInfer2)%3B%20%2F%2Fstring%0A%0A%2F*%0A%20*%203%20Interface%0A%20*
    %2F%0Ainterface%20sampleInterface%20%7B%0A%09name%3A%20string%3B%20%2F%2F%20required%20parameter%20-%3F%20%22%3A%22%0A%09sex%3F%3A%20string%3B%20%2F%2F%20optional%20parameter%20-%3E%20%22%3F%3A%22%0A%09age%3A%20number%3B%0A%7D%0A%0Afunction
    %20getUserSuccess1()%3A%20sampleInterface%20%7B%0A%09return%20%7B%0A%09%09name%3A%20%22takeru%22%2C%0A%09%09sex%3A%20%22male%22%2C%0A%09%09age%3A%2024%0A%09%7D%0A%7D%0A%0Afunction%20getUserSuccess2()%3A%20sampleInterface%20%7B%0A%09%2F%2F
    %20omit%20optional%20parameter%20%22sex%22%0A%09return%20%7B%0A%09%09name%3A%20%22takeru%22%2C%0A%09%09age%3A%2024%0A%09%7D%0A%7D%0A%0Afunction%20getUserError()%3A%20sampleInterface%20%7B%0A%09%2F%2F%20Error%3A%20required%20parmeter%20%22age
    %22%20is%20not%20defined%0A%09return%20%7B%0A%09%09name%3A%20%22takeru%22%0A%09%7D%0A%7D%0A%0A%2F*%0A%20*%204%20default%20argument%0A%20*%2F%0Afunction%20sampleFunc1(inputString%3A%20string%20%3D%20%22default%20argument%22)%3A%20void%7B%0A
    %09alert(inputString)%3B%0A%7D%0A%0AsampleFunc1(%22hogehoge%22)%3B%20%2F%2F%20alert%20%22hogehoge%22%0AsampleFunc1()%3B%20%2F%2F%20alert%20%22default%20argument%22%0A%0A%2F*%0A%20*%205%20const%0A%20*%2F%0Aconst%20constVar%20%3D%20%22const%22%3B
    %0AconstVar%20%3D%20%22cannnot%20reassign%20const%20var%22%3B%0A%0A%2F*%0A%20*%206%20let%0A%20*%2F%0Afunction%20sampleLet1()%3A%20void%20%7B%0A%09for(var%20i%3A%20number%20%3D%201%3B%20i%3C10%3B%20i%2B%2B)%7B%0A%09%09continue%3B%0A%09%7D%0A
    %09alert(i)%3B%2F%2F10%0A%7D%0A%0Afunction%20sampleLet2()%3A%20void%20%7B%0A%09for(let%20i%3A%20number%20%3D%201%3B%20i%3C10%3B%20i%2B%2B)%7B%0A%09%09continue%3B%0A%09%7D%0A%09alert(i)%3B%20%2F%2Fundefind%0A%7D
    
    http://www.typescriptlang.org/Playground#src=%2F*%0A%20*%207%20allow%20function%0A%20*%2F%0A%0A%2F%2FJavaScript%20like%0Avar%20addJs%20%3D%20function(a%2Cb)%7B%0A%09return%20a%20%2B%20b%3B%0A%7D%0Aalert(addJs(1%2C2))%3B%2F%2F3%0A%0A%2F%2Farrow%20function
    %0Avar%20addType%20%3D%20(a%3A%20number%2C%20b%3Anumber)%3A%20number%20%3D%3E%20a%20%2B%20b%3B%0Aalert(addType(1%2C2))%2F%2F3%0A%0A%2F*%0A%20*%208%20template%20literals%0A%20*%2F%0A%0Aalert(%22%E4%BB%8A%E6%97%A5%E3%81%AF
    %24%7BMath.random()%20%3C%200.5%20%3F%20'%E8%89%AF%E3%81%84'%20%3A%20'%E6%82%AA%E3%81%84'%7D%E6%97%A5%E3%81%A0%E3%80%82%22)%3B%0A
    
    http://www.typescriptlang.org/Playground#src=%2F*%0A%20*%209%20class%20base%20object-oriented%20programming%20%0A%20*%2F%0Ainterface%20Data%20%7B%0A%09name%3A%20string%3B%0A%09age%3A%20number%3B%0A%7D%0A%0Aclass%20sampleClass%20%7B%0A%09private%20data%3A
    %20Data%3B%0A%09%0A%09constructor()%20%7B%0A%09%09this.data%20%3D%20%7B%0A%09%09%09name%3A%20%22takeru%22%2C%0A%09%09%09age%3A%2038%0A%09%09%7D%0A%09%7D%0A%09%0A%09get%20name()%3A%20string%20%7B%0A%09%09return%20this.name%3B%0A%09%7D
    %0A%7D%0A%0Avar%20sampleInstance%20%3D%20new%20sampleClass%3B%0Aalert(sampleInstance.name)%3B
    •  アロー関数/テンプレート文字列
    •  型注釈/型推論/インターフェイス/デフォルト引数/const/let
    •  クラスベースオブジェクト指向言語
    

    View Slide