Visual Studioで始めるTypeScript開発入門

Visual Studioで始めるTypeScript開発入門！

きよくらならみ

2014.03.22

MVP Community Camp 2014

自己紹介

• きよくらならみ–@kiyokura

– http://kiyokura.hateblo.jp/

• 岡山生まれ岡山育ちのプログラマー–現在は県内の某製造業で社内SE

• NET系の開発やWebアプリ開発–Microsoft MVP for ASP.NET/IIS

http://kiyokura.hateblo.jp/

• Okayama IT Engineers Community–通称OITECの運営スタッフ–主にMS系のテクノロジを扱う勉強会などを、岡山で開催しています

– site: oitec.vbstation.net

• オープンラボ岡山–去年から主宰を引き継ぎました–岡山でノンジャンルの技術系勉強会を開催– site: olojp.net

コミュニティ

本セッションの目的

• TypeScriptの概要を知っていただく

• Visual Studioを使ってTypeScriptの開発・学習を行うための基礎知識を知っていただく

本セッションのゴール

• TypeScriptの概要を知る

• Visual StudioでTypeScriptをどのように扱えるのかを知っていただく

免責事項

• 本セッションは私、きよくらならみ個人が調査・検証をした結果を発表するものです

• マイクロソフトおよびTypeScript開発者コミュニティ等の公式の見解ではございません

• 万一本資料の記述の誤りに起因する損害が生じた場合においても、発表者はその責任を負いません

重要

バージョンについて

• 本セッションの内容は、後述する、正式版ではないバージョンのソフトウェアをもとにしたものです。

–正式版やそれ以降のバージョンでは変更になる可能性があります。

• 検証に使用したバージョン–Visual Studio 2013 Update 2 CTP 2

– TypeScript 1.0 RC

重要

アジェンダ

• TypeScript概要

• TypeScript on Visual Studio

• まとめ

• リソース・補足等

Part.1

TypeScript概要

TypeScriptって何？

TypeScriptとは

• プログラミング言語です

• どんな言語？

• このパートでは、まず端的な特徴をお話ししたいと思います

オフィシャルサイト

• www.TypeScriptLang.org

オフィシャルサイト曰く

• 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.

1st sentence

TypeScript is a

language for

application-scale

JavaScript

development

注目ポイント

• "application-scale"なJS開発のための言語

• 一番もっとも主張したい特徴

– TypeScriptの開発チーム的に

即ち

• JSでは"application-scale"な開発で問題アリ

–と、この人たちは考えている

• TypeScriptはコレを解決するために生まれた

application-scale？

• （私の解釈）

• 見栄えの制御• 入力値の検証

• ビジネスロジック

• アプリ全体の制御

規模の増大で問題なりやすい点

• 曖昧でもなんとなく動く–動的型–暗黙のセミコロン補完

• スコープ–グローバル汚染–ブロックスコープが無い

• プロトタイプベース–独特で理解しにくい

TypeScriptがどう解決？

• これについては言語仕様の概要として、後程、簡単にご紹介します

2nd sentence

TypeScript is a typed

superset of JavaScript

that compiles to plain

JavaScript

注目ポイント

• JSのTypedなスーパーセット

• JSにコンパイルされる

JSのtypedなスーパーセット

• JSと互換がある

–学習コストが低い

•既存のJSの利用も可能

• 静的型付け

• ECMAScript 6thの仕様先取り

JSへコンパイル

• 最終的な生成物はJSのコード

–しかもリーダブルなJSを出力•可読性が高く、人がメンテ可能

hoge.ts hoge.jsコンパイラ

3rd sentence

•Any browser. Any host.

Any OS. Open Source.

注目ポイント

• あらゆる環境で動く

• オープンソース

あらゆる環境で動く

• 動作環境＝ JSの動作環境–ブラウザ

– Packaged Web Apps• Windowsストア / PhoneGap / etc...

–プラットホーム• node.js / Windows Scripting Host / etc...

オープンソース

• Apache License 2.0

• CodePlexでホスト

– typescript.codeplex.com

–VCSはgit

TypeScript

• JavaScriptによるアプリケーションスケールの開発に対応する為に設計された言語

• JavaScriptのスーパーセットであり、”静的型付け”が大きな特徴コンパイルによりJavaScriptを生成

• 様々なブラウザやプラットホームで動作またオープンソースである

超訳 by kiyokura

作ってるのは？

• Microsoftによるプロダクト

–でもオープンソース

• あのAnders Hejlsbergも関わっている

– Turbo Pascal / Delphi / C#

from wikipedia

言語仕様の概要

言語としての大まかな特徴

• 基本構文はJavaScript

• 静的型• 型推論• クラスベースのオブジェクト指向• ジェネリックス• アロー関数式• Structural Subtyping

– …等々キリが無いので本セッションでは軽くこの程度で許してください

– 詳細はググるbingると色々素敵な解説が出てきます

ざっくりまとめると

• JSで厳しかったあたりを克服–静的型付け

• コンパイル時の型チェック• ジェネリックス

–クラスベース・オブジェクト指向• クラス• インタフェース• 継承

–モジュール• 名前空間的な

ざっくりまとめると

• 簡潔さや柔軟性も–any

–型推論– Structural Subtyping

–アロー関数式

• 既存資産やJSのスキルの活用– JSのスーパーセット– ECMAScript 6仕様の先行実装

開発環境について

TypeScriptの開発・実行環境

開発環境

• 開発環境は無償で構築可能

–Visual Studio

–node.jsで動くコンパイラ

•お好みのエディタ

• Eclipse + プラグイン

–ブラウザ上で

•公式サイトのplay ground

• Visual Studio Online（monaco）

開発環境

• エディタ/IDEのサポート（nodeのコンパイラ利用）

–Sublime Text(*)

–vim

–emacs

–WebMatrix 3

–WebStrom(*)

–Eclipse（プラグイン）

–Visual Studio Online（monaco）*製品自体は有償

今回はVS2013について詳説

• 次のパートで

他の環境についてはググってbingってください

Part.2

TypeScript on Visual Studio

ここからは…

• Visual Studioを使って

• TypeScript開発の第一歩を踏み出す

• そのための情報を紹介します

Visual Studioのバージョンごとのサポート状況

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』は微妙

Visual Studio 2012ファミリ

• Visual Studio 2012–アドオンで対応

• Express 2012は？–多分対応

• ただし現在新規に入手できないかも？• ダウンロードサイトにVS2013しかない？

– MSDNからは落とせるが

• 問題なければExpress 2013使ってください–～ for WebはWindows 7にも入ります

Visual Studio Express版について

• Expressは商用開発に利用可能

–機能限定版（ not 評価版）

おことわり

• ここから先は、原則として下記環境

• Visual Studio Express 2013 for Web

–有償版でも基本的に同じです

• Visual Studio 2013 update 2 CTP 2

を適用– 2014.03.20時点の最新

Visual Studio Express 2013 for Web

によるTypeScript開発環境構築

環境構築のステップ

• Visual Studio Express 2013 for Webのインストール

• Visual Studio 2013 Update 2 CTP 2の適用–あくまでもCTPです–本番環境等への適用はご自身の判断で行ってください

• コンパイラへをPath環境変数に設定–必須ではありません

• でもやっておくと便利

Visual Studio Express 2013 for Web

• ダウンロードしてインストール

–http://www.microsoft.com/ja-

jp/download/details.aspx?id=40747

http://www.microsoft.com/ja-jp/download/details.aspx?id=40747

Visual Studio 2013 Update 2 CTP 2

• 以下のダウンロードからダウンロードしてインストーラーを実行– http://www.microsoft.com/ja-



コンパイラにパスを通す

• 必須ではない• 但し通しておくと楽

–型定義ファイルの自作時–未対応のプロジェクトでの利用

• 1.0RCではパスは以下–C:¥Program Files (x86)¥Microsoft

SDKs¥TypeScript¥0.9¥• 32bit OSでは『(x86)』は不要

–正式版になると、多分「0.9」->「1.0」になりそう？

Visual StudioでのTypeScript開発の基本

まず押さえておく点

• 対応するプロジェクトの種類

• コンパイル方法

• エディタの基本機能

対応するプロジェクトの種類

• TypeScriptプロジェクト

• Webアプリケーションプロジェクト

• 以下は現時点では微妙

–Webサイトプロジェクト

–Windowsストアアプリプロジェクト

TypeScriptプロジェクト




• TypeScript + HTML + CSS


• サンプルコードが展開される


• ［追加］ダイアログにtsファイル


• ファイル保存で自動コンパイル

– jsファイルとmapファイルを生成


• TypeScriptファイルでステップ実行

–ブレークポイント

–変数ウォッチ等

Webアプリケーションプロジェクト


Webアプリケーションプロジェクト

• TypeScriptプロジェクトと同様

–［追加］ダイアログにtsファイル

–ファイル保存で自動コンパイル

– TypeScriptファイルでステップ実行

その他のタイプのプロジェクト


Webサイトプロジェクト

• テキストエディタは対応–シンタックスハイライト–インテリセンス

• 以下は現時点では未対応–［追加］でtsファイルは出てこない–自動コンパイルされない

• オプション設定で自動コンパイルは可能• いくつか制限等アリ

• 詳細は「補足資料」を参照

Update2

CTP 2

Windowsストアアプリ

• Visual Studioのエディションで状況が異なる

• Express– 未対応？– Update 2 CTP 2では、まったく機能しない

• 以前のバージョンではそれなりに動作していたが…• Update 2 RTWで改善するかも？

• Professional以上– 概ね、Webサイトプロジェクトと同様

• 詳細は「補足資料」を参照

Update2

CTP 2

基本機能

TypeScript開発の基本機能

• コンパイラの実行

• エディタの対応

• デバッグ機能

コンパイラの実行

• TypeScript対応プロジェクト

–ソース保存時に自動コンパイル

–プロジェクトのビルド時にコンパイル

• 対応したプロジェクトであれば特に気に意識せずに扱える


• 未対応のプロジェクト

–以下のどれか

•コマンドラインから手動コンパイル

•オプション設定の変更で保存時コンパイル

•ビルドスクリプトに記述してビルド時にコンパイル


• コマンドラインから手動コンパイル

–手動でtsc.exeを実行

•あらかじめパスを通しておくと良い

•パッケージマネージャーコンソールお勧め

–もちろんcmdでも良い

•例：「tsc.exe hoge.ts」


• オプション設定の変更で保存時コンパイル– [ツール] - [オプション] - [テキストエディター] -

[TypeScript] - [プロジェクト]

– ［保存時にコンパイル］をチェック


• ビルドスクリプトに記述してビルド時にコンパイル– csproj / vbprojに記述–詳細は割愛

• すみません、Update 2 CTP 2で検証ができていません……

• Webサイトプロジェクトでは不可–なので実質的にはWindowストアアプリプロジェクトの場合のみ

エディタの対応

• シンタックスハイライト

• アウトライン表示・非表示

• intellisense

• リアルタイムエラー検出

• コード間移動

• などなど。–他にもVS共通の機能として色々

シンタックスハイライト

• キーワードを色分け表示

アウトライン表示・非表示

• コードをブロックで折りたたむ

intellisense

• コード補完

• 型情報の表示

• ドキュメントコメントの表示

intellisense

リアルタイムエラー検出

• リアルタイムでエラーを表示

–波線等で表示

–ポイントすると詳細を表示

コード間移動

• 定義へ移動

–クラスや関数などの定義へ移動

• 戻る／進む

–定義へ移動等で移動した履歴を辿る

• 全ての参照の検索

–該当の識別の参照をすべてピックアップ

Update 2 CTP 2時点では

• まだちょっと機能が弱い– 学習には十分だが

• まだ実装が始まったばかりなので期待– まだCommunity Technology Previewです– すぐにJavaScriptで利用できる機能くらいには実装されるのではなか（希望的観測）

• 有償版なら…– Web Essentialsも併用– ReSharperも8.2で対応

デバッグ機能

• TypeScriptファイルに対してデバッグ実行可能

–ステップ実行

–変数ウォッチ

ステップ実行

変数ウォッチ

• クイックウォッチ

変数ウォッチ

• ビジュアライザー

変数ウォッチ

• ローカル変数ウォッチ

変数ウォッチ

• ウォッチ式による監視

変数ウォッチ

• 変数の書き換え

こんな時どうするの？

こんな時どうしよう？

• 自作のJSのコードを使いたい

• 著名なJSライブライを使いたい

• 自作ライブラリでインテリセンスを活用したい

JavaScriptのコードを使いたい


JSのコードを使いたい

• "全ての JavaScriptは TypeScript"

• 但しそのままでは通らないケースも

–型情報が無い

選択肢

1. TypeScriptに移植する

2. 型宣言のみを別途行う

1. TypeScriptに移植する

• コンパイルが通るよう改変する

• こんな時

–既存のコードの一部をtsに取り込む

– .jsファイルを.tsファイル移植

• 今後もTypeScriptとしてメンテナンスするならこちらがオススメ

そのまま移植してみる

• そのまま移植してみると…• *.jsを*.tsにリネーム

• tsファイルにコードを張り付ける

• 案外そのまま行けたりする

–但し型推論できないところはanyになる

•引数は基本any

そのまま移植してみると…

• 型推論出来るとき

そのまま移植してみると…

• 型推論できないとき

型を指定可能なら指定する

• 出来れば型を与えていくほうが良い

–静的型付けのメリットを享受

• 無理ならanyで

それだけではダメなケース

• 例：変数に互換のない型を代入

– JavaScriptだと通る

anyで宣言してやる

• 変数をanyで宣言してやる

–初来的にはリファクタリングをお勧め

2.型宣言のみを別途行う

• 既存のJSに手を入れない–利用するTSのコンパイルを可能に

• こんな時–今後もJSとしてメンテナンスされる

–外部製のJSライブラリを利用する場合

• JS自体に手を入れることが出来ないのであればこちら

型宣言ファイルを利用する

• 型宣言（型定義）ファイル

–Declaration File

–変数・関数などの宣言する

–拡張子： .d.ts

–C言語のヘッダファイルのイメージ

型宣言ファイルを利用する

• 型宣言ファイルにより

– jsファイルはそのまま利用可能

•そもそもTSをコンパイルしたらJSになる

–コンパイル時にはd.tsのみを参照する

型宣言ファイルの例

• declareキーワード

–d.tsに宣言のみを記述

型宣言ファイルの例

• 元のJavaScriptファイル

定宣言の参照

• tsファイルに宣言参照を追加

/// <reference path="hoge.d.ts" />

d.tsを作るときに少しだけ楽をする

• 少しなら手作業でもいい

–沢山あると大変

• 少しだけ楽をする

–あんまり楽出来ない時もある

コンパイラの-dオプション

• tcs.exeのd.tsを出力するオプション

– "-d " または " --declaration"

–コンパイル時にd.tsも出力する

• これを利用

手順

• 対象のjsファイルをコピーしておく

• jsファイルの拡張子をtsに変える

• -dオプションでコンパイル

• 出来上がったd.tsファイルを編集

ファイルの退避

• 元ファイルを一旦、コピーして退避

–hoge.jsをコピー＆リネームして、hoge.js.org等にしておく

拡張子をtsに変更

• 元のjsファイルをリネームしてtsに

-dオプションでコンパイル

• -dオプションでtcsを実行

–エラーが出る場合は…

•コメントアウトで逃げるとか適当に対処

d.tsファイルを確認

• .d.tsが出来る

• 必要に応じて編集

著名なJavaScript製ライブラリを使いたい


著名なライブラリを使う時は…

• 公開されている型宣言を利用する–有志によりgithubで公開されている

• borisyankov/DefinitelyTyped

• 今後は…– TypeScriptが普及するとオフィシャルに提供されるケースが増えるかも？

• NuGetで公開されている場合も

自動で型定義を探す

自作ライブラリでインテリセンスを活用したい


ドキュメントコメント

• Intellisenseに注釈等を表示する

JSDoc形式で記述

• /** ～ */のJSDoc形式

vsdoc形式では無い点に注意

ただし…

• VS2013 Update 2 CTP 2では対応が微妙

– @param程度しかまともに機能していない？

–今後の改善に期待

• ビルド後のJsにもjsdocは付加される

–但しvsのJavaScriptエディタも対応が今一つ

• 一応、コメント全文がそのまま表示されるので意味はある

–今後の改善に期待

Web Essentialsの紹介

おまけ

Web Essentials 2013

• 無償のプラグイン

• Webに関連する便利な機能を実装

• Professional以上で利用可能

–Expressではアドオン利用に制限アリ

TypeScript関連機能

• プレビュー機能

• コードregion

• d.tsのd&d対応

まとめ

TypeScriptとは

• JavaScriptにコンパイルされる静的型付けの言語– JavaScriptのスーパーセット–クラスベースのオブジェクト指向

• マルチプラットホーム– JavaScriptが動くところで動く

• オープンソース– git on CodePlex / Apache License 2.0

Visual StudioでのTypeScript

• VSのビルトイン機能としてサポート– VS2013 Update 2 より

• 各種機能–自動コンパイル–インテリセンス–デバッグ機能

• 機能が足りていない部分は今後に期待–まだサポートが始まったばかり

TypeScriptに対する個人的見解

• もうどんどん使えばいいと思う

–『型が指定が出来るJavaScript』レベルでもいいのでは

• デメリットもほとんどない（と思う）

–出力されるJavaScriptの可読性も高い

•納品はJavaScriptだけしてもいい

JavaScript is Assembly Language

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

http://www.hanselman.com/blog/JavaScriptIsAssemblyLanguageForTheWebSematicMarkupIsDeadCleanVsMachinecodedHTML.aspx

http://www.hanselman.com/blog/JavaScriptisAssemblyLanguagefortheWebPart2MadnessorjustInsanity.aspx

Let's enjoy TypeScript

ご清聴ありがとうございました

リソース・補足等

TypeScript公式

• オフィシャルサイト

–http://www.typescriptlang.org/

• プロジェクトサイト

–https://typescript.codeplex.com/

http://www.typescriptlang.org/

https://typescript.codeplex.com/

Visual Studio 2013

Update 2 CTP 2について

• ダウンロードサイト– http://www.microsoft.com/ja-


• サポート情報– 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


http://support.microsoft.com/kb/2927432/ja

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

重要：情報を探すときは…

• バージョンに注意！– 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でおおむね固まった感はある

WebサイトプロジェクトのTypeScript対応状況

• プロジェクトテンプレートとしてはTypeScript対応機能がビルトインされない– ファイルタイプの追加に出てこない– TypeScriptの自動ビルドが行われない

• （規定では）

• 使えないわけでは無い– 手動でファイルを追加– オプション設定の変更で自動コンパイル

• もしくは手動コンパイル

– テキストエディタは対応• シンタックスハイライト• インテリセンス

Update2

CTP 2

WebサイトプロジェクトのTypeScript対応状況

• オプションで保存時コンパイルを有効にするとsource mapが生成されない

–そのままではブレークポイントの設定等ができない

– source mapの生成を行いたい場合は、コマンドラインからコンパイルを行う

• tsc.exe hoge.ts --sourcemap

• source mapファイルさえできていればtsファイルでデバッグ実行可能

Update2

CTP 2

WindowsストアアプリプロジェクトのTypeScript対応状況

• プロジェクトテンプレートとしてはTypeScript対応機能がビルトインされない– ファイルタイプの追加に出てこない– TypeScriptの自動ビルドが行われない

• （規定では）

• Professional以上は手動設定等で開発は可能– 詳細は後述

• Expressは（現時点のUpdate 2 CTP 2では）対応が微妙過ぎる– 以前のバージョンで出来ていたことができなくなっている– 拡張子tsのファイルを追加するとエラーが出る場合もある– 不具合の可能性もあるのでRTWで修正されることを期待

Update2

CTP 2


• Professional以上は手動設定等で開発は可能–手動でファイルを追加–オプション設定の変更で自動コンパイル

• もしくは手動コンパイル• プロジェクトファイルの設定変更でも行けるかも？–以前は出来たがUpdate 2 CTP 2では未確認

–テキストエディタは対応• シンタックスハイライト• インテリセンス

Update2

CTP 2


• どちらにせよ…• Update 2 CTP 2ではTypeScriptでのストアアプリ開発は少し微妙な雰囲気

• 本格利用はちょっと待っても良いかも– きっとそのうち正式に対応するハズ

• 多分…

• こちらのMSDNマガジンの記事も参照– 詳細はこちらの記事を参照

• http://msdn.microsoft.com/ja-jp/magazine/dn201754.aspx

• 特に『Visual Studio の TypeScript 用オプション』の項は目を通しておくと良いかも？

Update2

CTP 2

http://msdn.microsoft.com/ja-jp/magazine/dn201754.aspx

著名ライブラリのd.ts

• borisyankov/DefinitelyTyped

–著名なJavaScriptライブラリの型定義ファイルが集まるリポジトリ

–https://github.com/borisyankov/Defi

nitelyTyped

https://github.com/borisyankov/DefinitelyTyped

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

http://vswebessentials.com/

http://vswebessentials.com/features/typescript

デプロイについて

• プロジェクトのデプロイ機能–VS2013 Update 2 CTP 2での対応

• Webアプリプロジェクト• TypeScriptアプリプロジェクト

– TypeScriptを意識したデプロイをする• tsファイルを含めない• jsファイルを含める

–MSBuildをカスタマイズすれば.mapをデプロイパッケージに含めるとかも多分できる

–はず。きっと。

Update2

CTP 2

MSBuildのパラメータとか

• （このあたりは殆ど個人的メモ）

–プロジェクトファイル等で参照している既定のMSBuildのプロパティ等はこのあたりのパスの下にある

• C:¥Program Files

(x86)¥MSBuild¥Microsoft¥VisualStudio¥v

12.0¥TypeScript

Update2

CTP 2

Visual Studio Online (monaco)

• ブラウザだけでTypeScriptの開発とホストが可能

• 興味がある方はこちら参照

–http://kiyokura.hateblo.jp/entry/2014

/02/18/213150

http://kiyokura.hateblo.jp/entry/2014/02/18/213150