Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual Studioで始めるTypeScript開発入門

12,329 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×