3日時間をもらったのでTypeScriptを触ってみた

24,473 views

Published on

Microsoft社の新言語TypeScriptについて社内の自主研究発表会で発表した内容です。
対象バージョンは V0.9(2013年10月時点の最新)。
比較対象としてCoffeeScript, Haxe, Dartなどにも触れています。

Published in: Technology
0 Comments
42 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
24,473
On SlideShare
0
From Embeds
0
Number of Embeds
2,674
Actions
Shares
0
Downloads
75
Comments
0
Likes
42
Embeds 0
No embeds

No notes for slide

3日時間をもらったのでTypeScriptを触ってみた

  1. 1. 3日時間をもらったので TypeScriptを触ってみた イースト株式会社 コンテンツビジネス事業部 加藤靖 初版 2013年10月10日 最終更新 2013年10月15日
  2. 2. AGENDA 1. TypeScriptとは 1. 概要 2. 視点 2. TypeScriptの言語機能 3. 比較 1. 2. CoffeeScript 3. Haxe 4. 4. C# Dart まとめ
  3. 3. 前提知識  使用経験 JavaScript C# Visual Studio
  4. 4. TypeScriptとは
  5. 5. TypeScript概要  Microsoft謹製の新しいプログラミング言語  JavaScriptのスーパーセット  開発者は Anders Hejlsberg 氏=C#の生みの親  特徴  クラスベースオブジェクト指向  静的型付け  JavaScriptに変換されて動作する(トランスコンパイル型)  微妙な仕様はそのまま    アナウンスは行っているが いわゆる言語デザイナではなさそう。 (2013/10/15追記) 変数の巻き上げ、for文のスコープ、etc… ECMAScript 6の仕様を意識。 Node.jsとVisual Studio 2012/2013の公式パッケージ
  6. 6. ライバル JavaScriptの代替となる言語をaltJSと俗称する。 よく話題になるのは以下。  CoffeeScript  ActionScript 3 (Adobe)  Haxe (AS3派生)  Dart (Google) 現時点ではCoffeeScriptが知名度・実用事例ともにNo. 1 。
  7. 7. 視点  プログラミング言語の新地平  MicrosoftによるWeb界の領土拡大  従来のWindows/C#プログラマをWebプログラマに転身させる  よそのWebプログラマを自社陣営に取り込む Wiindows 8~ IE/Safari/Chrome/Firefox C# TypeScript JavaScript Visual Studio 201X
  8. 8. TypeScriptとVisual Studioの足並み 2012/8/15 Visual Studio 2012リリース 2012/10/1 TypeScript発表。同時にVS2012に対応。 2013/6/20 TypeScript Ver. 0.9リリース。大幅な機能強化。 2013/6/26 Visual Studio 2013Previewリリース 2013/6/28 TypeScript Ver. 0.9.0.1リリース 2013/7/23 TypeScript VS2013Preview対応 2013/8/6 TypeScript Ver. 0.9.1リリース。 2013/8/21 TypeScript Ver. 0.9.1.1リリース。 2013/9/9 Visual Studio 2013RCリリース 2013/9/9 TypeScript VS2013RC対応
  9. 9. VS2013とのシームレスな連携  プロジェクトテンプレート  コード補完  リアルタイムエラー表示  ビルド・デバッグ起動ボタン  デバッガ  Visual Studio上で TypeScriptのままデバッグできる
  10. 10. Chromeでもデバッグできちゃいました SourceMaps を利用しているため ふつうにTypeScriptのままデバッグできます。 ※SourceMapsとは  もともとはJavaScriptやCSS(SCSS)ファイルの最小化・結合を行った際に、 ソースの対応づけを行う仕組み。  Chrome, Firefox, Operaがサポート。
  11. 11. と思ったら CoffeeScript がいつのまにか SourceMaps に対応していた。 もうCoffeeScriptとChromeデバッガでいいのでは? 使い慣れた VS 上でデバッグできるのは TypeScript のみ。 また、型チェック・コード補間もろもろとのシナジーもある。 オールインワンの環境としては VS + TS に及ぶものはない。 専用IDEは、Haxe, Dart にもあるが(Flash Studio, Dart Editor―eclipse派生)、 VS 並に普及するのはだいぶ先だろう。
  12. 12. TypeScriptの言語機能 自分で触りたい人はこちら↓
  13. 13. 言語機能一覧(Ver. 0.9時点)  型アノテーション  構造的部分型  any型  引数プロパティ宣言  型アサーション  関数オーバーロード  クラス、インターフェース  デフォルト引数  継承、実現  可変長引数  ジェネリクス  定数によるオーバーロード  アクセス修飾子  アロー関数式  列挙型  モジュール機構  オブジェクト型リテラル  アンビエント宣言  型推論  ドキュメントコメント
  14. 14. 静的型付け  型アノテーション  TypeScriptの心臓。  コンパイラによる型チェック  IDEによるコード補完  コンパイル後は残らない。  使わないというオプション。  any型 = ただのJavaScript Object
  15. 15. クラス、インターフェースは慣れたもの ただしいくつか注意が必要 TypeScript JavaScript
  16. 16. 継承、実現の記法がJava!  extends, implements キーワード  “:”ではない!  型アノテーションと重なったのか、 予約語があったからなのか…… ECMA Script 5 の仕様に従っただけと思われる。 (2013/10/15追記)
  17. 17. アクセス修飾子はpublicとprivateだけ  protected はロードマップにある。  internal(package)は モジュール機構で制御する。
  18. 18. Thisの意味とアロー関数式  通常のfunction式    Thisを引き継がない。 JavaScript互換。 アロー関数式  記法はC#のラムダ式に準ずる。  Thisを外のスコープから引き継ぐ。
  19. 19. プロパティ(set/get)  本物のプロパティ。  JavaScriptの関数方式ではない。  実装はdefineProperty. (ECMAScript 5)  オールドブラウザでは動かない。
  20. 20. オブジェクト型リテラル  ユニーク  C#の用語を使うと 「メンバへの代入が可能な 匿名インターフェース」  型安全性を保ったまま JS流のコードが書ける。   というかコード補完が効く。 右以外のシグニチャ  メソッドの代替記法 a():string / a: ()=>string  関数呼び出し ()  インデックス []  コンストラクタ new()
  21. 21. 構造的部分型  クラスAがクラスBと継承関係になくても シグニチャさえ満たしていればBとして振る舞える機能。   関連:nominal typing, duck typing Ocaml(F#の元)の特徴。    C++テンプレート Scala オブジェクト型リテラルと組み合わせてJavaScript流儀のコードが書ける。 ※そもそもオブジェクト型リテラルにextends/implements書けない。  組み込み型やライブラリコードへの適用。
  22. 22. 型推論は信じるに値しない • 宣言と同時に初期化される変数以外 すべて型アノテーションを付ける のが吉。 • 暇な人は 右のコードを試してみてください。
  23. 23. 関数オーバーロードとその仲間たち  微妙 とだけ憶えてください。  定義部分は一つで、引数の型判別は 全部自分で書かないといけない。  あくまで外部向けという感じ。  仕様変更も多い。
  24. 24. 定数オーバーロード  ユニーク  Ver. 0.9から。  引数の定数値で振り分ける オーバーロード。  Visual Studio上でも同様の 型チェック・コード補完が働く。
  25. 25. JavaScriptでも使えた! TypeScriptプロジェクト内に限り、 JavaScriptで書いていても同じように認識される。 TypeScriptの新機能というよりは Visual Studioの機能強化ありきと見るべき?
  26. 26. モジュールと名前空間 期待通りの振る舞い TypeScript ※名前空間のネストにも対応。 JavaScript
  27. 27. import/export  コード例は略。  よろしくない。実装を急いだ感じ。  ECMAScript 6に劣る機能と互換性のない文法。  ロードマップにはECMAScript 6にあわせる旨がある。  Usingの見た目とNode.jsサポートを優先したのでは?
  28. 28. JavaScriptのライブラリも使えます。  外部ファイルに型情報を記述する(アンビエント宣言という)。   有名どころは有志がメンテ。   ファイルの拡張子はd.ts jQuery, knockout, underscore, backbone, … 自社ライブラリはがんばるしかない。
  29. 29. 他言語との比較 TypeScriptの何が不満なのか
  30. 30. Microsoft言語の中核 ― C#  演算子オーバーロード  ユーザー定義型変換  abstract, sealed, override  readonly, const  ジェネリクスの制約。  yield   ECMAScript 6にiterator(for-of)とgenerator(function*, yield)がある。 LINQ  APIとしては同様のものがある(map/filter in ECMAScript 5)。   フォーラムではiterator/generatorでやるべきという意見も。 メタデータ(属性)   C#でも新しい機能(~>3.5)ばかり。 入るべきものは将来入るだろう。 ECMAScript 5, 6にプロパティ属性がある。あくまで処理系向けで、ユーザー定義のものではなかった気がするが。 拡張メソッド  mixinがロードマップにある。
  31. 31. 明日から勉強しようと思ってX年 ― CoffeeScript  narrow arrow(->)  range型, 配列スライス  存在演算子(?)  文字列補間  ヒアドキュメント  if 修飾子  配列内包表記 どれも「とても便利なシンタックスシュガー」 機能としては負けてない。 TSとCSで姿勢が対極的。
  32. 32. えー、これFlashなのぉ? ― Haxe 機能だけならaltJS随一。 Flashが地盤であることが惜しまれる。  Flash出力、Flash Studio対応。  C++出力、PHP出力、etc  強力な型推論  mixin  代数的データ型(Powerful enumと呼ばれる)  メタデータ  イテレータ  マクロ  インライン関数  最適化
  33. 33. えっと、これもうJavaScriptじゃないですよね .NET共通言語基盤(CLI)の ― Dart 競合相手と見るべきでは。  ドキュメントコメントの markdown文法 final(readonly), const  エントリポイント(main関数) 組み込みのList, Mapとコレクション リテラル  並行実行モデル(Erlang-like)  専用のVM  ビット演算子  標準ライブラリ  カスケード演算子(..)  dart:collection, dart:io, dart:async  演算子オーバーロード  dart:html, dart:svg, dart:indexed_db  Lexical scope  文字列補間  typedef  メタデータ  C++/Java系の文法  抽象クラス    クライアントアプリケーション フレームワーク  モジュール化とオンライン共有  最適化
  34. 34. まとめ
  35. 35. MSDNのコードサンプルが C#とTypeScriptになってからが本番  あって当然の機能が揃ったところ。 プレ.NET 2.0感  強みはVisual Studio.  現状プロダクトユースに使うには怖い。  バグが多い。  破壊的変更も頻繁 Ver. 0.9でboolがbooleanに!
  36. 36. 一方、その戦略的価値は高い ディベロッパ向けの戦略の情報源として  Microsoft は Web をどうするつもりなのか 将来の技術的礎の先取りとして  次期 Visual Studio の JavaScript サポート  .NETファミリーの新機能
  37. 37. Appendix A 参考リンク
  38. 38. ファーストガイド  インストール  まずはブラウザ上で動かしてみよう。   Visual Studio で動かしたい人はこちらから。   http://www.typescriptlang.org/Playground/ http://www.microsoft.com/en-us/download/details.aspx?id=34790 参考  MSDNの入門記事   http://msdn.microsoft.com/ja-jp/magazine/jj883955.aspx 公式チュートリアル  http://www.typescriptlang.org/tutorial/
  39. 39. より詳しく知りたい人  公式ページ    http://www.typescriptlang.org/ http://typescript.codeplex.com/ TypeScript クイックガイド   http://phyzkit.net/typescript/ 日本 TypeScript ユーザー会  https://groups.google.com/forum/#!forum/typescript-japan
  40. 40. altJS  CoffeeScript   Haxe   http://haxe.org/ref Dart   http://coffeescript.org/#language https://www.dartlang.org/docs/dart-up-and-running/contents/ch02.html 比較記事をいくつか   http://www.infoq.com/jp/news/2012/10/typescript-debate   http://html5experts.jp/clockmaker/2183/ http://codeforhire.com/2013/06/18/coffeescript-vs-typescript-vs-dart/ Thoughworks Rader  http://thoughtworks.fileburst.com/assets/technology-radar-may-2013.pdf CoffeeScriptがTrialに。Dartは今期Holdから落選。TypeScriptは触れられてもいない。
  41. 41. Appendix B スライドで紹介できなかったTypeScriptの機能
  42. 42. 型付けなしの世界  any型  すべての型チェックが スルーされる。  要はJavaScriptのObject.  用途  JavaScriptとのやり取り  戻り値の型が不定な関数(Mixed)  コンパイルエラーの回避
  43. 43. 型変換  暗黙の型変換は基本なし。    安全より Date型とかで困る。 明示的に変換したい場合  演算子 <T>  型アサーションと呼ばれる。  コンパイル後は何も残らない。  Any経由でどんな変換も可能。
  44. 44. スコープ  varなしはグローバル。  {}はスコープを作らない。  メンバ参照時はthis必須。  静的メンバ参照時はクラス名必須。  要するにイケてない。
  45. 45. 引数プロパティ宣言  コンストラクタ引数に アクセス修飾子をつけると 自動的にメンバ変数ができる  CoffeeScriptを意識?  F#(Ocaml)のレコード型を思い出す
  46. 46. 列挙型はC#そのまま    Ver. 0.9から。 列挙型自身はオブジェクトに、 列挙値はそのプロパティに コンパイルされる。 enum NodeType { ELEMENT_NODE = 1, ATTRIBUTE_NODE, TEXT_NODE, } 実行時の型はnumber.  相互変換が可能。  値の指定が可能。 if (node.nodeType == NodeType.ELEMENT_NODE) { ... }
  47. 47. ジェネリクスもほぼC#  Ver. 0.9から  記法は<T>  関数、クラス、インターフェース、 クロージャ  Array<T>, NodeListOf<T>(DOM)  制約はまだextendsのみ?
  48. 48. ドキュメントコメントはほぼC#  Visual Studioのサポート!  /** … */の形式。  /// はあるのか?  タグは現状@paramのみらしい。

×