TypeScriptでWSHを書いちゃおう #visualstudio – @masaru_b_cl

この記事はVisual Studio Advent Calendar 2012 : ATNDへの参加エントリーです。

昨日は@kazukさんの「Visual Studio 2012 でのパフォーマンスプロファイリング « kazuk は null に触れてしまった」でした。

 

TypeScriptいいですよね

今年10/1に突然Microsoftから発表されたTypeScriptですが、型安全でラムダ式も使えたりして、良いですよね。

TypeScriptは「コンパイルされてJavaScriptを吐き出す」ということで、WSH(Windows Script Host)のJScriptも書けるんじゃないの?というのがこのエントリーの趣旨です。

 

何はともあれインストール

TypeScriptを書くからにはVisual Studioがいいですよね。ということで、「TypeScript for Visual Studio 2012」をインストールしましょう。

可能ならPro以上のEditionにして「Web Essentials」もインストールするとなお良いですね。

 

プロジェクト作成

さて、無事TypeScriptのインストールが終わったところで、早速TypeScript用のプロジェクトを作成しましょう。「Visual C#」のテンプレートに「HTML Application with TypeScript」というテンプレートがありますので、選択してプロジェクトを作成します。今回は"WSHSample"という名前にしました。

え?Webアプリじゃないよって?気にせず行きましょう!w

image

 

余分なファイルの削除

プロジェクトが作成されると、既定で次の3つの項目が作成されています。が、WSHには不要なので、ソッコー削除します。

image

 

クラスファイルの作成

ではWSH用のクラスを定義するファイルを作成しましょう。

「新しい項目の追加」ダイアログを開き、これまた「Visual C#」の中にある「TypeScript File」テンプレートを選択し、"greeter"という名前で追加します。

 

image

 

「Web Essentials」を入れているとこんな感じでtsファイルと生成されたjsファイルが横に並んで表示されます。

image

とりあえず既定のコードは全部削除して、次のコードを入力して保存します。

またもやWeb Essentialsの力により、即座にコンパイルされてjsファイルが生成されます。

image

 

メイン処理スクリプト作成

TypeScriptで書いたクラスですから、TypeScriptでメイン処理も書いてしまった方が何かと楽です。

そんなわけで、greeter.tsと同じようにmain.tsを作成して、次のコードを入力して保存します。

 

 

もちろんmain.jsが作成されますが、main.tsとほとんど変わらないので省略。

ちなみにコード中の

 

/// <reference path="greeter.ts"/>

 

はgreeter.tsを参照するためのもので、これを入れるとコード補完が普通に利くようになります。

 

image

 

実行用wsfファイル作成

最後に、生成されたgreeter.js、main.jsを参照したwsfファイルを次のように作成して終了です。

 

 

execute.wsfをダブルクリックして実行すると、次のようにちゃんと実行されてWScript.Echoの結果が表示されます。

 

image

 

まとめ

  • TypeScriptでWSHはイケる。
    • TypeScript for Visual Studio 2012を入れる。
    • Web Essentialsも入れると何かと捗る。
    • Webプロジェクトだけどただのフォルダ、ファイルの組み合わせなので問題なし。
  • メインロジックもtsで書いて、実行はwsfで行う。
    • TypeScriptの恩恵をフルに受けることが可能。

 

最終日はアンカーの@tashinmuさんにバトンタッチです。

Visual Studio Adevent Calender 2012 – Visual Studio が対応するアプリケーション タイプ – Days with Microsoft Platform – Site Home – MSDN Blogs

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中