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