Visual Studioで始めるTypeScript開発入門

9,820 views
9,557 views

Published on

MVP Copmmunity Camp 2014 広島会場の同名セッションの発表資料
当日のUst録画:
前半 : http://www.ustream.tv/recorded/45150865
後半 : http://www.ustream.tv/recorded/45152045

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

No Downloads
Views
Total views
9,820
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
51
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

Visual Studioで始めるTypeScript開発入門

  1. 1. Visual Studioで始める TypeScript開発入門! きよくら ならみ 2014.03.22 MVP Community Camp 2014
  2. 2. 自己紹介 • きよくら ならみ – @kiyokura – http://kiyokura.hateblo.jp/ • 岡山生まれ岡山育ちのプログラマー – 現在は県内の某製造業で社内SE • NET系の開発やWebアプリ開発 – Microsoft MVP for ASP.NET/IIS
  3. 3. • Okayama IT Engineers Community – 通称OITECの運営スタッフ – 主にMS系のテクノロジを扱う勉強会など を、岡山で開催しています – site: oitec.vbstation.net • オープンラボ岡山 – 去年から主宰を引き継ぎました – 岡山でノンジャンルの技術系勉強会を開催 – site: olojp.net コミュニティ
  4. 4. 本セッションの目的 • TypeScriptの概要を知っていただく • Visual Studioを使ってTypeScriptの 開発・学習を行うための基礎知識を 知っていただく
  5. 5. 本セッションのゴール • TypeScriptの概要を知る • Visual StudioでTypeScriptをどのよ うに扱えるのかを知っていただく
  6. 6. 免責事項 • 本セッションは私、きよくらならみ個人 が調査・検証をした結果を発表するもの です • マイクロソフトおよびTypeScript開発者 コミュニティ等の公式の見解ではござい ません • 万一本資料の記述の誤りに起因する損害 が生じた場合においても、発表者はその 責任を負いません 重要
  7. 7. バージョンについて • 本セッションの内容は、後述する、正式 版ではないバージョンのソフトウェアを もとにしたものです。 – 正式版やそれ以降のバージョンでは変更に なる可能性があります。 • 検証に使用したバージョン – Visual Studio 2013 Update 2 CTP 2 – TypeScript 1.0 RC 重要
  8. 8. アジェンダ • TypeScript概要 • TypeScript on Visual Studio • まとめ • リソース・補足等
  9. 9. Part.1 TypeScript概要
  10. 10. TypeScriptって何?
  11. 11. TypeScriptとは • プログラミング言語です • どんな言語? • このパートでは、まず端的な特徴を お話ししたいと思います
  12. 12. オフィシャルサイト • www.TypeScriptLang.org
  13. 13. オフィシャルサイト曰く • TypeScript is a language for application-scale JavaScript development. • TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. • Any browser. Any host. Any OS. Open Source.
  14. 14. 1st sentence TypeScript is a language for application-scale JavaScript development
  15. 15. 注目ポイント • "application-scale"なJS開発 のための言語 • 一番もっとも主張したい特徴 –TypeScriptの開発チーム的に
  16. 16. 即ち • JSでは "application-scale"な開発で問題ア リ –と、この人たちは考えている • TypeScriptはコレを解決するために 生まれた
  17. 17. application-scale? • (私の解釈) • 見栄えの制御 • 入力値の検証 • ビジネス ロジック • アプリ全体 の制御
  18. 18. 規模の増大で問題なりやすい点 • 曖昧でもなんとなく動く – 動的型 – 暗黙のセミコロン補完 • スコープ – グローバル汚染 – ブロックスコープが無い • プロトタイプベース – 独特で理解しにくい
  19. 19. TypeScriptがどう解決? • これについては言語仕様の概要とし て、後程、簡単にご紹介します
  20. 20. 2nd sentence TypeScript is a typed superset of JavaScript that compiles to plain JavaScript
  21. 21. 注目ポイント • JSのTypedなスーパーセット • JSにコンパイルされる
  22. 22. JSのtypedなスーパーセット • JSと互換がある –学習コストが低い • 既存のJSの利用も可能 • 静的型付け • ECMAScript 6thの仕様先取り
  23. 23. JSへコンパイル • 最終的な生成物はJSのコード –しかもリーダブルなJSを出力 • 可読性が高く、人がメンテ可能 hoge.ts hoge.jsコンパイラ
  24. 24. 3rd sentence • Any browser. Any host. Any OS. Open Source.
  25. 25. 注目ポイント • あらゆる環境で動く • オープンソース
  26. 26. あらゆる環境で動く • 動作環境= JSの動作環境 – ブラウザ – Packaged Web Apps • Windowsストア / PhoneGap / etc... – プラットホーム • node.js / Windows Scripting Host / etc...
  27. 27. オープンソース • Apache License 2.0 • CodePlexでホスト –typescript.codeplex.com –VCSはgit
  28. 28. TypeScript • JavaScriptによるアプリケーションス ケールの開発に対応する為に設計された 言語 • JavaScriptのスーパーセットであり、” 静的型付け”が大きな特徴 コンパイルによりJavaScriptを生成 • 様々なブラウザやプラットホームで動作 またオープンソースである 超訳 by kiyokura
  29. 29. 作ってるのは? • Microsoftによるプロダクト –でもオープンソース • あのAnders Hejlsbergも 関わっている –Turbo Pascal / Delphi / C# from wikipedia
  30. 30. 言語仕様の概要
  31. 31. 言語としての大まかな特徴 • 基本構文はJavaScript • 静的型 • 型推論 • クラスベースのオブジェクト指向 • ジェネリックス • アロー関数式 • Structural Subtyping – …等々キリが無いので本セッションでは軽くこの程度で許 してください – 詳細はググるbingると色々素敵な解説が出てきます
  32. 32. ざっくりまとめると • JSで厳しかったあたりを克服 – 静的型付け • コンパイル時の型チェック • ジェネリックス – クラスベース・オブジェクト指向 • クラス • インタフェース • 継承 – モジュール • 名前空間的な
  33. 33. ざっくりまとめると • 簡潔さや柔軟性も – any – 型推論 – Structural Subtyping – アロー関数式 • 既存資産やJSのスキルの活用 – JSのスーパーセット – ECMAScript 6仕様の先行実装
  34. 34. 開発環境について
  35. 35. TypeScriptの開発・実行環境
  36. 36. 開発環境 • 開発環境は無償で構築可能 –Visual Studio –node.jsで動くコンパイラ • お好みのエディタ • Eclipse + プラグイン –ブラウザ上で • 公式サイトのplay ground • Visual Studio Online(monaco)
  37. 37. 開発環境 • エディタ/IDEのサポート(nodeのコンパイラ利用) –Sublime Text(*) –vim –emacs –WebMatrix 3 –WebStrom(*) –Eclipse(プラグイン) –Visual Studio Online(monaco) *製品自体は有償
  38. 38. 今回はVS2013について詳説 • 次のパートで 他の環境についてはググってbingっ てください
  39. 39. Part.2 TypeScript on Visual Studio
  40. 40. ここからは… • Visual Studioを使って • TypeScript開発の第一歩を踏み出す • そのための情報を紹介します
  41. 41. Visual Studioの バージョンごとのサポート状況
  42. 42. Visual Studio 2013ファミリ • Visual Studio 2013 – Visual Studio 2013 Update 2より • 更新プログラム適用でビルトインされる • 2014.03.20現在はCTP 2 – 『Express 2013 for Web』も対応 • 無償 – Windows ストアアプリ向けの 『Express 2013 for Windows』は微妙
  43. 43. Visual Studio 2012ファミリ • Visual Studio 2012 – アドオンで対応 • Express 2012は? – 多分対応 • ただし現在新規に入手できないかも? • ダウンロードサイトにVS2013しかない? – MSDNからは落とせるが • 問題なければExpress 2013使ってください – ~ for WebはWindows 7にも入ります
  44. 44. Visual Studio Express版について • Expressは商用開発に利用可能 –機能限定版( not 評価版 )
  45. 45. おことわり • ここから先は、原則として下記環境 • Visual Studio Express 2013 for Web – 有償版でも基本的に同じです • Visual Studio 2013 update 2 CTP 2 を適用 – 2014.03.20時点の最新
  46. 46. Visual Studio Express 2013 for Web によるTypeScript 開発環境構築
  47. 47. 環境構築のステップ • Visual Studio Express 2013 for Webのイ ンストール • Visual Studio 2013 Update 2 CTP 2の適 用 – あくまでもCTPです – 本番環境等への適用はご自身の判断で行っ てください • コンパイラへをPath環境変数に設定 – 必須ではありません • でもやっておくと便利
  48. 48. Visual Studio Express 2013 for Web • ダウンロードしてインストール –http://www.microsoft.com/ja- jp/download/details.aspx?id=40747
  49. 49. Visual Studio 2013 Update 2 CTP 2 • 以下のダウンロードからダウンロー ドしてインストーラーを実行 – http://www.microsoft.com/ja- jp/download/details.aspx?id=42023
  50. 50. コンパイラにパスを通す • 必須ではない • 但し通しておくと楽 – 型定義ファイルの自作時 – 未対応のプロジェクトでの利用 • 1.0RCではパスは以下 – C:¥Program Files (x86)¥Microsoft SDKs¥TypeScript¥0.9¥ • 32bit OSでは『(x86)』は不要 – 正式版になると、多分「0.9」->「1.0」になりそ う?
  51. 51. Visual StudioでのTypeScript開 発の基本
  52. 52. まず押さえておく点 • 対応するプロジェクトの種類 • コンパイル方法 • エディタの基本機能
  53. 53. 対応するプロジェクトの種類 • TypeScriptプロジェクト • Web アプリケーションプロジェクト • 以下は現時点では微妙 –Webサイトプロジェクト –Windowsストアアプリプロジェクト
  54. 54. TypeScriptプロジェクト Visual StudioでのTypeScript開発の基本
  55. 55. TypeScriptプロジェクト
  56. 56. TypeScriptプロジェクト • TypeScript + HTML + CSS
  57. 57. TypeScriptプロジェクト • サンプルコードが展開される
  58. 58. TypeScriptプロジェクト • [追加]ダイアログにtsファイル
  59. 59. TypeScriptプロジェクト • ファイル保存で自動コンパイル –jsファイルとmapファイルを生成
  60. 60. TypeScriptプロジェクト • TypeScriptファイルでステップ実行 –ブレークポイント –変数ウォッチ等
  61. 61. Web アプリケーション プロジェクト Visual StudioでのTypeScript開発の基本
  62. 62. Web アプリケーションプロジェクト • TypeScriptプロジェクトと同様 –[追加]ダイアログにtsファイル –ファイル保存で自動コンパイル –TypeScriptファイルでステップ実行
  63. 63. その他のタイプのプロジェクト Visual StudioでのTypeScript開発の基本
  64. 64. Webサイトプロジェクト • テキストエディタは対応 – シンタックスハイライト – インテリセンス • 以下は現時点では未対応 – [追加]でtsファイルは出てこない – 自動コンパイルされない • オプション設定で自動コンパイルは可能 • いくつか制限等アリ • 詳細は「補足資料」を参照 Update 2 CTP 2
  65. 65. Windowsストアアプリ • Visual Studioのエディションで状況が異なる • Express – 未対応? – Update 2 CTP 2では、まったく機能しない • 以前のバージョンではそれなりに動作していたが… • Update 2 RTWで改善するかも? • Professional以上 – 概ね、Webサイトプロジェクトと同様 • 詳細は「補足資料」を参照 Update 2 CTP 2
  66. 66. 基本機能
  67. 67. TypeScript開発の基本機能 • コンパイラの実行 • エディタの対応 • デバッグ機能
  68. 68. コンパイラの実行 • TypeScript対応プロジェクト –ソース保存時に自動コンパイル –プロジェクトのビルド時にコンパイル • 対応したプロジェクトであれば特に 気に意識せずに扱える
  69. 69. コンパイラの実行 • 未対応のプロジェクト –以下のどれか • コマンドラインから手動コンパイル • オプション設定の変更で保存時コンパイル • ビルドスクリプトに記述してビルド時にコ ンパイル
  70. 70. コンパイラの実行 • コマンドラインから手動コンパイル –手動でtsc.exeを実行 • あらかじめパスを通しておくと良い • パッケージマネージャーコンソールお勧め –もちろんcmdでも良い • 例:「tsc.exe hoge.ts」
  71. 71. コンパイラの実行 • オプション設定の変更で 保存時コンパイル – [ツール] - [オプション] - [テキスト エディター] - [TypeScript] - [プロジェクト] – [保存時にコンパイル]をチェック
  72. 72. コンパイラの実行 • ビルドスクリプトに記述して ビルド時にコンパイル – csproj / vbproj に記述 – 詳細は割愛 • すみません、Update 2 CTP 2で検証ができて いません…… • Webサイトプロジェクトでは不可 – なので実質的にはWindow ストアアプリ プロジェクトの場合のみ
  73. 73. エディタの対応 • シンタックスハイライト • アウトライン表示・非表示 • intellisense • リアルタイムエラー検出 • コード間移動 • などなど。 – 他にもVS共通の機能として色々
  74. 74. シンタックスハイライト • キーワードを色分け表示
  75. 75. アウトライン表示・非表示 • コードをブロックで折りたたむ
  76. 76. intellisense • コード補完 • 型情報の表示 • ドキュメントコメントの表示
  77. 77. intellisense
  78. 78. リアルタイムエラー検出 • リアルタイムでエラーを表示 –波線等で表示 –ポイントすると詳細を表示
  79. 79. コード間移動 • 定義へ移動 – クラスや関数などの定義へ移動 • 戻る/進む – 定義へ移動等で移動した履歴を辿る • 全ての参照の検索 – 該当の識別の参照をすべてピックアップ
  80. 80. Update 2 CTP 2時点では • まだちょっと機能が弱い – 学習には十分だが • まだ実装が始まったばかりなので期待 – まだCommunity Technology Previewです – すぐにJavaScriptで利用できる機能くらいには実 装されるのではなか(希望的観測) • 有償版なら… – Web Essentialsも併用 – ReSharperも8.2で対応
  81. 81. デバッグ機能 • TypeScriptファイルに対して デバッグ実行可能 –ステップ実行 –変数ウォッチ
  82. 82. ステップ実行
  83. 83. 変数ウォッチ • クイックウォッチ
  84. 84. 変数ウォッチ • ビジュアライザー
  85. 85. 変数ウォッチ • ローカル変数ウォッチ
  86. 86. 変数ウォッチ • ウォッチ式による監視
  87. 87. 変数ウォッチ • 変数の書き換え
  88. 88. こんな時どうするの?
  89. 89. こんな時どうしよう? • 自作のJSのコードを使いたい • 著名なJSライブライを使いたい • 自作ライブラリでインテリセンスを 活用したい
  90. 90. JavaScriptのコードを使いたい こんな時どうするの?
  91. 91. JSのコードを使いたい • "全ての JavaScript は TypeScript" • 但しそのままでは通らないケースも –型情報が無い
  92. 92. 選択肢 1. TypeScriptに移植する 2. 型宣言のみを別途行う
  93. 93. 1. TypeScriptに移植する • コンパイルが通るよう改変する • こんな時 –既存のコードの一部をtsに取り込む –.jsファイルを.tsファイル移植 • 今後もTypeScriptとしてメンテナン スするならこちらがオススメ
  94. 94. そのまま移植してみる • そのまま移植してみると… • *.jsを*.tsにリネーム • tsファイルにコードを張り付ける • 案外そのまま行けたりする –但し型推論できないところはanyになる • 引数は基本any
  95. 95. そのまま移植してみると… • 型推論出来るとき
  96. 96. そのまま移植してみると… • 型推論できないとき
  97. 97. 型を指定可能なら指定する • 出来れば型を与えていくほうが良い –静的型付けのメリットを享受 • 無理ならanyで
  98. 98. それだけではダメなケース • 例:変数に互換のない型を代入 – JavaScriptだと通る
  99. 99. anyで宣言してやる • 変数をanyで宣言してやる –初来的にはリファクタリングをお勧め
  100. 100. 2. 型宣言のみを別途行う • 既存のJSに手を入れない –利用するTSのコンパイルを可能に • こんな時 –今後もJSとしてメンテナンスされる –外部製のJSライブラリを利用する場合 • JS自体に手を入れることが出来ない のであればこちら
  101. 101. 型宣言ファイルを利用する • 型宣言(型定義)ファイル –Declaration File –変数・関数などの宣言する –拡張子 : .d.ts –C言語のヘッダファイルのイメージ
  102. 102. 型宣言ファイルを利用する • 型宣言ファイルにより –jsファイルはそのまま利用可能 • そもそもTSをコンパイルしたらJSになる –コンパイル時にはd.tsのみを参照する
  103. 103. 型宣言ファイルの例 • declareキーワード –d.tsに宣言のみを記述
  104. 104. 型宣言ファイルの例 • 元のJavaScriptファイル
  105. 105. 定宣言の参照 • tsファイルに宣言参照を追加 /// <reference path="hoge.d.ts" />
  106. 106. d.tsを作るときに少しだけ楽をする • 少しなら手作業でもいい –沢山あると大変 • 少しだけ楽をする –あんまり楽出来ない時もある
  107. 107. コンパイラの-dオプション • tcs.exeのd.tsを出力するオプション –"-d " または " --declaration" –コンパイル時にd.tsも出力する • これを利用
  108. 108. 手順 • 対象のjsファイルをコピーしておく • jsファイルの拡張子をtsに変える • -dオプションでコンパイル • 出来上がったd.tsファイルを編集
  109. 109. ファイルの退避 • 元ファイルを一旦、コピーして退避 –hoge.jsをコピー&リネームして、 hoge.js.org等にしておく
  110. 110. 拡張子をtsに変更 • 元のjsファイルをリネームしてtsに
  111. 111. -dオプションでコンパイル • -dオプションでtcsを実行 –エラーが出る場合は… • コメントアウトで逃げるとか適当に対処
  112. 112. d.tsファイルを確認 • .d.tsが出来る • 必要に応じて編集
  113. 113. 著名なJavaScript製ライブラリを 使いたい こんな時どうするの?
  114. 114. 著名なライブラリを使う時は… • 公開されている 型宣言を利用する – 有志によりgithubで公開されている • borisyankov/DefinitelyTyped • 今後は… – TypeScriptが普及するとオフィシャルに提 供されるケースが増えるかも? • NuGetで公開されている場合も
  115. 115. 自動で型定義を探す
  116. 116. 自作ライブラリでインテリセン スを活用したい こんな時どうするの?
  117. 117. ドキュメントコメント • Intellisenseに注釈等を表示する
  118. 118. JSDoc形式で記述 • /** ~ */のJSDoc形式 vsdoc形式では無い点に注意
  119. 119. ただし… • VS2013 Update 2 CTP 2では対応が微妙 – @param程度しかまともに機能していない? – 今後の改善に期待 • ビルド後のJsにもjsdocは付加される – 但しvsのJavaScriptエディタも対応が今一つ • 一応、コメント全文がそのまま表示されるので意 味はある – 今後の改善に期待
  120. 120. Web Essentialsの紹介 おまけ
  121. 121. Web Essentials 2013 • 無償のプラグイン • Webに関連する便利な機能を実装 • Professional以上で利用可能 –Expressではアドオン利用に制限アリ
  122. 122. TypeScript関連機能 • プレビュー機能 • コードregion • d.tsのd&d対応
  123. 123. まとめ
  124. 124. TypeScriptとは • JavaScriptにコンパイルされる 静的型付けの言語 – JavaScriptのスーパーセット – クラスベースのオブジェクト指向 • マルチプラットホーム – JavaScriptが動くところで動く • オープンソース – git on CodePlex / Apache License 2.0
  125. 125. Visual StudioでのTypeScript • VSのビルトイン機能としてサポート – VS2013 Update 2 より • 各種機能 – 自動コンパイル – インテリセンス – デバッグ機能 • 機能が足りていない部分は今後に期待 – まだサポートが始まったばかり
  126. 126. TypeScriptに対する個人的見解 • もうどんどん使えばいいと思う –『型が指定が出来るJavaScript』レベ ルでもいいのでは • デメリットもほとんどない(と思う) –出力されるJavaScriptの可読性も高い • 納品はJavaScriptだけしてもいい
  127. 127. JavaScript is Assembly Language
  128. 128. JavaScript is Assembly Language • by Scott Hanselman – http://www.hanselman.com/blog/JavaScriptIsAs semblyLanguageForTheWebSematicMarkupIsDe adCleanVsMachinecodedHTML.aspx • JSの偉大な導師達「大体あってる」 – Mike Shaver / Brendan Eich / Douglas Crockford – http://www.hanselman.com/blog/JavaScriptisAs semblyLanguagefortheWebPart2MadnessorjustIn sanity.aspx
  129. 129. Let's enjoy TypeScript
  130. 130. ご清聴ありがとうございました
  131. 131. リソース・補足等
  132. 132. TypeScript公式 • オフィシャルサイト –http://www.typescriptlang.org/ • プロジェクトサイト –https://typescript.codeplex.com/
  133. 133. Visual Studio 2013 Update 2 CTP 2 について • ダウンロードサイト – http://www.microsoft.com/ja- jp/download/details.aspx?id=42023 • サポート情報 – http://support.microsoft.com/kb/2927432/ja • マイクロソフト エバンジェリスト井上氏のblog – http://blogs.msdn.com/b/chack/archive/2014/ 02/27/typescript-1.0-rc-visual-studio-2013- update-2-ctp2-windows-azure-japan-geo.aspx
  134. 134. 重要:情報を探すときは… • バージョンに注意! – Visual Studio – Visual Studio Update – TypeScriptプラグイン – Web Essentials • バージョンごとにいろいろかなり違う – TypeScript自体の機能 – VSのインテグレートの状況 • Webアプリプロジェクトでも、C#のテンプレートでは対応してい るがVB.NETには無い等 – 機能が実装されている箇所 • TypeScriptプラグイン or Visual Studio or Web Essentials  Update 2 CTP 2でおおむね固まった感はある
  135. 135. Webサイトプロジェクトの TypeScript対応状況 • プロジェクトテンプレートとしては TypeScript対応機能がビルトインされない – ファイルタイプの追加に出てこない – TypeScriptの自動ビルドが行われない • (規定では) • 使えないわけでは無い – 手動でファイルを追加 – オプション設定の変更で自動コンパイル • もしくは手動コンパイル – テキストエディタは対応 • シンタックスハイライト • インテリセンス Update 2 CTP 2
  136. 136. Webサイトプロジェクトの TypeScript対応状況 • オプションで保存時コンパイルを有効に するとsource mapが生成されない – そのままではブレークポイントの設定等が できない – source mapの生成を行いたい場合は、コ マンドラインからコンパイルを行う • tsc.exe hoge.ts --sourcemap • source mapファイルさえできていれば tsファイルでデバッグ実行可能 Update 2 CTP 2
  137. 137. Windowsストアアプリプロジェクトの TypeScript対応状況 • プロジェクトテンプレートとしては TypeScript対応機能がビルトインされない – ファイルタイプの追加に出てこない – TypeScriptの自動ビルドが行われない • (規定では) • Professional以上は手動設定等で開発は可能 – 詳細は後述 • Expressは(現時点のUpdate 2 CTP 2では)対応が微妙過ぎる – 以前のバージョンで出来ていたことができなくなっている – 拡張子tsのファイルを追加するとエラーが出る場合もある – 不具合の可能性もあるのでRTWで修正されることを期待 Update 2 CTP 2
  138. 138. Windowsストアアプリプロジェクトの TypeScript対応状況 • Professional以上は手動設定等で開発は 可能 – 手動でファイルを追加 – オプション設定の変更で自動コンパイル • もしくは手動コンパイル • プロジェクトファイルの設定変更でも行ける かも? – 以前は出来たがUpdate 2 CTP 2では未確認 – テキストエディタは対応 • シンタックスハイライト • インテリセンス Update 2 CTP 2
  139. 139. Windowsストアアプリプロジェクトの TypeScript対応状況 • どちらにせよ… • Update 2 CTP 2ではTypeScriptでのストアアプ リ開発は少し微妙な雰囲気 • 本格利用はちょっと待っても良いかも – きっとそのうち正式に対応するハズ • 多分… • こちらのMSDNマガジンの記事も参照 – 詳細はこちらの記事を参照 • http://msdn.microsoft.com/ja- jp/magazine/dn201754.aspx • 特に『Visual Studio の TypeScript 用オプション』の 項は目を通しておくと良いかも? Update 2 CTP 2
  140. 140. 著名ライブラリのd.ts • borisyankov/DefinitelyTyped –著名なJavaScriptライブラリの型定義 ファイルが集まるリポジトリ –https://github.com/borisyankov/Defi nitelyTyped
  141. 141. Web Essentialsについて • VS拡張のWeb Essentialsが便利 – Webに関するかなり便利な拡張機能集 • VSでWeb関連の開発を行うなら必須 – http://vswebessentials.com/ • TypeScript関連機能もある – Web Essentials 2013 v1.9時点のTypeScript関連機能 • Preview windowによりtsとjsを並べて表示 • Custom regions • 等々 – 詳細はこちら • http://vswebessentials.com/features/typescript • 注意:Update 2 CTP 2 の対応 – Web Essentials 2013 v1.9ではCTP2に未対応 – Nightly Buildで対応 • Web Essentials 2013 のNightly Buildの導入は下記を参照 • http://vswebessentials.com/download Update 2 CTP 2 v 1.9
  142. 142. デプロイについて • プロジェクトのデプロイ機能 – VS2013 Update 2 CTP 2での対応 • Webアプリプロジェクト • TypeScriptアプリプロジェクト – TypeScriptを意識したデプロイをする • tsファイルを含めない • jsファイルを含める – MSBuildをカスタマイズすれば.mapをデ プロイパッケージに含めるとかも多分でき る – はず。きっと。 Update 2 CTP 2
  143. 143. MSBuildのパラメータとか • (このあたりは殆ど個人的メモ) –プロジェクトファイル等で参照してい る既定のMSBuildのプロパティ等はこの あたりのパスの下にある • C:¥Program Files (x86)¥MSBuild¥Microsoft¥VisualStudio¥v 12.0¥TypeScript Update 2 CTP 2
  144. 144. Visual Studio Online (monaco) • ブラウザだけでTypeScriptの開発と ホストが可能 • 興味がある方はこちら参照 –http://kiyokura.hateblo.jp/entry/2014 /02/18/213150

×