TypeScript導入

TypeScript

TypeScript導入

概要

最近C#でWebアプリ開発やれとか言うお達しがでた
=> MicroSoft依存なので、Visual Studioを使わざるを得ない(絶望)
=> あれ？TypeScriptってMicroSoftじゃね？
=> TypeScriptを使う以外ありえないｗｗｗ

ということで、最近TypeScriptやってるので、そのオボエガキです。

インストール

@Linux

  • npmコマンドを入れる(JavaScriptモジュールの管理コマンド)
    • プロキシ等の設定は設定ファイルで行けます。=> ここ
    • 普通にapt-getとかでinstallすればいいと思いますが、コマンド名を変更する必要がある云々かんぬん... => 参考
  • npmを使ってtscを(ローカルに)インストール
    • なほ、現在のディレクトリにnode_modulesとか言うディレクトリができるので注意！
    • 自分専用のPCでない場合はローカルにしましょう！
    • グローバルはオプションとして-gをつければ良いだけ
npm install tsc
# グローバルの場合は下記の様な感じ
# npm install -g tsc
  • 実行コマンドのパスをPATHに追加
    • ローカルにインストールした場合、tscコマンドにパスが通ってないので通す。
    • node_modules直下の.binディレクトリに実行子のうなコマンドが這入っているので、そこへのパスを通す。
# .bashrc に追記する
export $PATH:tscをインストールしたディレクトリのnode_modulesへのパス/.bin

@Windows

  • Visual Studioを入れれば入ってるはず。

    • 注意として2015/11/22現在、Visual Studio付属のtscは--watchに未対応！
      => よって自動コンパイルが出来ません。残念でした。

  • そうは言っても自動コンパイルしたい

    • ここらへんを見ると、node.js/io.js入れてからの奴ならできるよ的な事が書いてあるので、npmとかをWindowsに入れれば出来そうな気がする。
    • （追記 2015/12/13）npm経由でinstallするとWindowsでもできました。
    • ここを参考にすると良いと思います。MinGWとかが必須なので多少面倒ですね。

使い方

基本的な使い方

# 下記コマンドを叩くと、YourFile.jsができる
tsc YourFile.ts

自動コンパイル & 複数ファイルのマージ

  • --watchで対象ファイルの監視
  • --outで出力ファイル名指定
# merged.jsが出力ファイル
# First.ts, Second.tsが分割したTypeScriptファイル
tsc --out merged.js --watch First.ts Second.ts

ファイルのimport(reference)

  • (2015/12/13 追記)
  • reference宣言はTypeScriptのコンパイル時の参照に必要なだけであって、コンパイル後のJSファイルに於けるファイルの参照を強制するものではない。
    => なので、referenceしたからと言って安心しないで、HTML側で元のJSファイルをちゃんと参照する事。
  • referenceで参照するのは、TypeScriptの型定義ファイルと呼ばれるもの(拡張子は.d.ts)で、TypeScriptファイル本体ではないので注意
  • 書き方は下記の様な感じ
/// <reference path="ここに型定義ファイルのパスを記述(相対パスで良い)" />
// 上記のようなコメント文をファイルの先頭に記述しておく。

型定義ファイルの作成

  • 世の中に存在する著名なJavaScriptライブラリの型定義ファイルはMicroSoft公式や有志によって公開されている
    • ここ
    • (注意)上記のページのファイル数が多すぎて、Web上だと参照できないので落としてから探すとよいかも。
  • 独自のライブラリを作った場合は、型定義を作ってくれる有志がいないので自分で作らなければなりません。
    型定義ファイルの作成はそんなに難しくないらしいのですが、非常に手間です。
    そんな時は、コレ(dtsmake)を使いましょう。
  • 使い方としては、取り敢えず下記コマンドを実行するとOKなので楽ですね
    • 但し万能ではないので、エラーが出る場合があります。その時は取り敢えず出来上がったファイルを自分で修正しましょう。
dtsmake -s JSLibFile.js

// ----------------------------------------
// 元ファイル
// ----------------------------------------
function write2Console(x) {
  console.log(x);
}

// ----------------------------------------
// 出力されるファイル
// ----------------------------------------
/**
 * 
 * @param x 
 */
declare function write2Console(x : any): void;