TypeScriptでマルいJavaScriptを型くする

Transcript

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

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

3. JavaScriptとは •  いわゆる ECMA-262 5.1 edition で規定されている言語仕様 •  元々はブラウザ等で各々の仕様が異なるJavaScriptを共通化　　 するために作られたもの

   •  弱い動的型付けのマルチパラダイムプログラミング言語

4. JavaScriptとは •  いわゆる ECMA-262 5.1 edition で規定されている言語仕様 •  元々はブラウザ等で各々の仕様が異なるJavaScriptを共通化　　 するために作られたもの

   •  弱い動的型付けのマルチパラダイムプログラミング言語 JavaScriptつらい！！！！

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

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

7. ちょっとやってみる •  TypeScript公式にPlaygroundが用意されている •  TypeScriptを書いたらそのJavaScriptコンパイル結果と実行ができる •  URLで独自コードをいつでも参照可能 •  デモコードのURLはノートに記載 • 

   以下のデモをご用意 •  型注釈/型推論/インターフェイス/デフォルト引数/const/let •  アロー関数/テンプレート文字列 •  クラスベースオブジェクト指向言語

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

9. ちょっとやってみる 型推論 /*    *  2  Type  inference    */

     var  sampleInfer1  =  1;   alert(typeof  sampleInfer1);  //number     var  sampleInfer2  =  "hoge";   alert(typeof  sampleInfer2);  //string   •  変数宣言時に特に型宣言をしない場合、 適当な型を選択 •  一度宣言したら、再代入時に型を一致　 させる必要がある

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"    }   }   •  インターフェイスを宣言できる •  省略可能な要素は”?:”を使う

11. ちょっとやってみる デフォルト引数 /*    *  4  default  argument    */

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

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 •  変数のスコープを縛ることができる

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の 比較を行っている 文字列テンプレート •  文字列中に”${}”を入れることに よって変数挿入したりできる

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によってクラスベースオ ブジェクト指向の記述が可能に

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 •  クラスベースオブジェクト指向言語