abcdefGets

ゲッツ!

jspmでtypescriptの開発をする

jspmからtypescriptの開発をした時の備忘録を書く

typescriptコンパイラ + jspm

まずはjspmでtypescriptをランタイムコンパイルできるようにするため、
plugin-typescriptをインストールする。

cli

jspm install ts

jspm.config.js

SystemJS.config({
  ...
  packages: {
    "/src": {
      "defaultExtension": "ts",
      "meta": {
        "*.ts": {
          "loader": "ts"
        }
      }
    }
  }
});

これだけでtypescriptをランタイムで使う準備ができた。

typescriptのバージョンを変える

typescriptのバージョンを開発環境に合わせて変える。

まず、好みのバージョンのtypescriptをインストールする。

cli

jspm install typescript@2.2.1

インストールしたら、plugin-typescriptのtypescriptを更新する。

jspm.config.js

SystemJS.config({
  ...
  map: {
    "github:frankwallis/plugin-typescript@5.3.1": {
      "map": {
        "typescript": "npm:typescript@<バージョン>"
      }
    },
  }
}

<バージョン>のところに先程インストールしたtypescriptのバージョンを入れる。

typescriptのオプション

これもjspm.config.jsで設定する。

SystemJS.config({
  typescriptOptions: {
    "tsconfig": true, // tsconfigを使う場合はtrueにする
    "typeCheck": false // 型チェックするかどうか
  },
});

tsconfigプロパティがtrueの場合は、ページのルートからtsconfig.jsonを探すので、
ファイルの置き場所に注意。
typeCheckはtrue・false以外に'strict'も指定できる。

tsconfigプロパティがfalseの場合はここに全てのオプションを設定する必要がある。

typescriptの設定

tsconfig.json

module: system

を設定しておけば、import構文が全てSystemJS化するので、 jspm経由でロードできる。

以上