Angular2のチュートリアルをやり、tscとSystemJSの組み合わせは、TypeScriptで実験的なコードを書くには良いと感じた。

なるだけ最小構成で動かすために試したらこうなったので、メモとして残しておきます。

環境構築

とりま npm init

mkdir ts-sample
cd ts-sample
npm init -y

実験なので、-yで色々スキップ。

gitで管理する際には、package.jsonのrepository周りの情報が埋まるので先に git init を走らせておくのがよさ気。

必要なパッケージを追加する

npm i lite-server typescript typings concurrently --save-dev
npm i systemjs --save

※執筆時点でのバージョンは以下

  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "^1.8.10"
  },
  "dependencies": {
    "systemjs": "^0.19.36"
  }

SystemJSの設定

systemjsの設定ファイルを追加

touch systemjs.config.js

systemjs.config.js

System.config({
    baseURL: '/',
    transpiler: false,
    map: {
        'app': 'src/app' // dist
    },
    packages: {
        'app': { main: 'index.js' , defaultExtension: 'js' }
    }
});

TSCの設定

$(npm bin)/tsc --init

ファイル追加

TypeScriptファイルを追加

せっかくモジュールローダーを使っているので、2ファイル作る

mkdir src
cd src
touch index.ts hello.ts

index.ts

import { Hello } from './hello';

const hello = new Hello();
document.body.innerHTML = hello.message();

hello.ts

export class Hello {
    public message() {
        return 'hello, world!!';
    }
}

index.htmlを追加

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>sample!?</title>
    </head>
    <body>
        <script src="./node_modules/systemjs/dist/system.src.js"></script>
        <script src="./systemjs.config.js"></script>
        <script>
            System.import('app');
        </script>
    </body>
</html>

読み込むのがsystemjs関係のみというのがシンプルで良い感じ

動かす

package.jsonにscriptを書く

package.json

...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" "
  },
...

消耗するので、実験レベルだとタスクランナー使いたくない派

hello, world!

npm run start

をすると、ブラウザが立ち上がり hello, world!!が表示されるはずです。

この状態で、hello, world!!を弄ると、ブラウザに変更が反映されます。
ざっくり仕組みとしては、

lite-server が *.js ファイルの変更を監視
tsc が *.ts ファイルの監視

を行っており、tsファイルをいじるとそれぞれが連動してブラウザに変更が反映されます。イイネ！

まとめ

あんまりさくっとじゃなかった

（参考）ディレクトリ構成

├── index.html
├── node_modules
├── package.json
├── src
│   ├── hello.js
│   ├── hello.ts
│   ├── index.js
│   └── index.ts
├── systemjs.config.js
├── tsconfig.json
└── typings.json

TypeScript + SystemJS + lite-serverでさくっとHello, World!する