うごく生ゴミプログラマの備忘録

うごく生ゴミ 〜再臨〜

TypeScriptの環境を整えた話

TypeScript用開発環境を整えたのでメモ

TypeScript用開発環境を整えるのでなんやかんや試して、自分なりにミニマムで開発しやすい環境を作れたので、それのメモ。 個人的には一番 IntelliJ IDEA 上でステップ実行できたってのがでかい。

一応作ったソースとか設定とかはGitHub上にあげておきます。

github.com

やりたいこと

  • TypeScriptを書きたい
  • ソースはモジュール化しておきたい
  • import/export などを解決したい
  • 今回はフロントエンドに使用したいので、jQueryも使えるようにしておきたい
  • IntelliJ IDEA 上でステップ実行したい

やったこと

まずは作業ディレクトリに移動

$ cd <作業ディレクトリのパス>

なにはともあれ npm init

$ npm init

とりあえずEnter連打。 細かいところはあとから修正します。

typescriptをインストール

$ npm install typescript -g

webpackをインストール

今回は依存関係の解決にwebpackを使用するのでwebpackもインストールします。 一緒に、webpackでtypescriptを扱うためのts-loaderもインストールします。

$ npm install webpack -g
$ npm install ts-loader --save-dev

webpack.confing.jsを作成

次にwebpack用設定ファイルを作成する。

// コマンドメモ
// --watch : ファイルの変更を監視 ビルドの自動化
// $ webpack --progress --colors --watch

var path = require('path');

module.exports = {
    // エントリーポイント
    entry: './script/src/main.ts',
    // ソースマップ出力
    devtool: "#source-map",
    // 出力先設定
    output: {
        path: __dirname,
        filename: './script/dist/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'ts-loader'
            }
        ]
    },
    resolve: {
        // ここに登録した拡張子は import時に省略できる
        extensions: ['', '.ts', '.js']
    }
};

tsconfig.json を作成

TypeScriptからJavaScriptへ変換する際の設定ファイル(とお思います。) とりあえず以下のコピペで問題ない(と思います。)

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": true
  },
  "exclude": [
    "typings/main.d.ts",
    "typings/main",
    "node_modules"
  ]
}

その2 に続く