LT駆動開発04 5分では分からないTypeScriptのなんとか

LT駆動開発04 5分では分からないTypeScriptのなんとか

LT駆動開発 04で発表したLT資料です。
「5分では分からないTypeScriptのなんとか」

E527d26d27a5769bbc6cdc1fa045feed?s=128

Kazuya Matsubara

June 07, 2014
Tweet

Transcript

  1. 5分では分からない TypeScriptのなんとか 2014/06/07  LT駆動開発04  @Toro_kun

  2. module  SelfIntroduction  {        export  class  Me  extends

     Person  {                  private  name:  string  =  ”松原和也”;                  private  twitterId:  string  =  ”@Toro_kun”;                  private  community:string[]  =  [                          ”⽇日本Androidの会中国⽀支部@staff”,                          ”GDG中国@staff”,                          ”JSers'  Cafe  ZERO@owner”                  ];          }   }  
  3. TypeScriptとは Ê  静的型付け⾔言語   Ê  カターンゼンッ   Ê  2014年年04⽉月02⽇日にversion  1.0がリリース

      Ê  JavaScriptのスーパーセット   Ê  コンパイルしてJavaScriptを⽣生成   Ê  altJS  
  4. altJS ⾔言語 設計/開発 登場時期 影響を受けた⾔言語 CoffeeScript Jeremy  Ashkenas,   et

     al. 2009 JavaScript,  Python,  Ruby,   Haskell TypeScript Microsoft 2012 JavaScript,  Java,  C# Haxe Haxe  Foundation,   Nicolas  Cannasse 2005 ActionScript,  OCaml Dart Google 2011 Java,  C++,  JavaScript,   CoffeeScript,  Go JSX DeNA 2012 JavaScript,  ActionScript モダンな⾔言語でHTML5を開発しよう!  俯瞰して理理解するaltJSの⽐比較  (前篇  –  TypeScript,  CoffeeScript,  Haxe)     http://html5experts.jp/clockmaker/2183/  より  
  5. TypeScriptの何がいいのか Ê  コンパイル時に型の整合性チェックが⾏行行われる   Ê  IDE等で補完機能を使える   Ê  JavaScriptの書き⽅方をしても動く  

    Ê  (この部分は静的型付けは損なわれるが・・・)   Ê  TypeScriptとほぼ⼀一対⼀一で対応するJavaScriptに変換   Ê  ⽣生成されたJavaScriptの可読性がよい  
  6. TypeScriptの開発環境 Ê  Visual  Studio  2013、2012(WIndows)   Ê  WebStorm   Ê 

    Eclipse  +  Eclipse  TypeScript  plug-­‐in   Ê  Sublime  Text  +  T3Sモジュール   Ê  Vim  +  TypeScriptプラグイン   Ê  Emacs  +  TypeScript拡張
  7. つかってみました

  8. enum TypeScript   enum  sample  {    a  =  1,

       b,    c  =  4,    daa   } JavaScript   sample;   (function  (sample)  {          sample[sample["a"]  =  1]  =  "a";          sample[sample["b"]  =  2]  =  "b";          sample[sample["c"]  =  4]  =  "c";          sample[sample["daa"]  =  5]  =  "daa";   })(sample  ||  (sample  =  {}));
  9. enum  (TypeScript)

  10. enum  (JavaScript)

  11. ⽂文字列列を設定すると怒怒られる けどコンパイルしてくれる なんてツンデレさんなんでしょう