Hatena::ブログ(Diary)

komiyakの通り道 このページをアンテナに追加 RSSフィード

2017-04-21

TypeScript をプロジェクトに導入する

いま構築している Web アプリケーションJavaScriptTypeScript に置き換えることにした。

久しぶりに JavaScript を書いてみて思ったのは、
JavaScriptプログラムを書く時間と同じくらい、
プログラムのどこに問題があるのかを調べる時間がながい。
エラー表示が適切ではなかったり、問題がどこにあるのかヒントを得るのが大変だったりする。

もう生で JS を書く時代は終わっていたのかもしれない...。

プロジェクトに TypeScript を導入する


何はともあれ、新しい技術を身につけるときはオフィシャルページを見るのが大事。
技術の変遷が早い領域は、特に情報があっという間に古くなる。
英語を読めない=新しい技術を身につけることができないと、
ほぼ同義になってしまうので英語を読む習慣は必須だ。


TypeScriptホームページはこちら。
https://www.typescriptlang.org/

TypeScript は tsc というコマンドが使えるようになっていれば、
利用できる環境が整っている。

$ tsc -v
Version 2.2.2


でなければ、TypeScriptインストールが必要。
Visual Studio を使わない場合は、TypeScriptインストールには npm を使う。
現時点では、npm は node.jsインストールすると勝手についてくる。
node.js を自分の環境にインストールしよう。

Node.js
https://nodejs.org/ja/


Node.jsインストールしたら、TypeScript の公式ページを参考にして
TypeScriptインストールする。

$ npm install -g typescript


TypeScript の書き方


TypeScript の素晴らしいところは、
既存の JS のファイルをそのまま TypeScript に持ってきても、
とりあえずビルドが通るという点だと思う。

何はともあれ、今自分の持っているプロジェクトを ts ファイル(TypeScript のファイル)
に置き換えて、tsc でビルドしてみよう。


私は普段、JetBrains 製の IDE を使っている。
JetBrains の IDE にはほとんど初期状態で TypeScriptビルドする環境が整っている。


tsconfig.json というファイルがある。
これは重要なファイルで、どの TypeScript のファイルをビルドするのか、
どのような設定でビルドするのかが書いてある。

とりあえずデバッグなども必要なので、開発のための設定として次のように記述してみた。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "outDir": "assets/javascripts/",
    "sourceMap": true,
    "inlineSources": true
  },
  "exclude": [
    "node_modules"
  ],
  "files": [
    "ts/core.ts"
  ]
}

JetBrains の IDE は、この tsconfig.json を発見し、この設定に従って自動ビルドをしてくれる。
手動でビルド実行することも可能なので、IDE から設定を見つけ出して頂きたい。


jQuery を使えるようにする


(※ この項は、あまり詳しくない部分なので、説明が正確でない可能性があります)

jQuery を使っている場合、TypeScript 内で構文エラーが発生するかと思う。

DefinitelyTyped という物を導入すると、構文エラーを解決することが出来る。
https://github.com/DefinitelyTyped/DefinitelyTyped

npm から jQuery の定義ファイルをダウンロードするらしい。
TypeScript のプロジェクトルートで、次のコマンドを実行してみる。

$ npm install --save-dev @types/node
$ npm install --save-dev @types/jquery

node_modules ディレクトリ以下に、定義ファイルがダウンロードされる。
jQuery を使っていて、構文エラーが発生しているファイルの先頭に、1行、次のようなコメントを記述する。

/// <reference path="../node_modules/@types/jquery/index.d.ts" />

// It's the entry point for your project.
$(function () {
});

pathダウンロードした定義ファイルの場所を指定すること。
(このあたり、この方法がベストかわからないので、臨機応変に変更して頂ければと思います)



以上で、私の環境で TypeScript の導入が完了した。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/komiyak/20170421/1492752232