ローカルにTypeScriptの動作確認環境をNode.jsで作成したメモ

TypeScriptの動作確認を簡単にするなら、TypeScript Playground をブラウザから使うのが簡単

typescript_playground

ではあるんだけれど、軽くローカルでも動かしたいので設定したのだが、ちょっと面倒だったのでメモ。

Node.jsTypeScript は設定しておく。

1.TypeScriptとNode.jsの環境作成

1.1 npm package.json ファイルを生成

プロジェクトディレクトリ(今回はsample)を作成し、以下のコマンドで、package.jsonファイルが生成される

$ npm init -y
Wrote to /Users/hirotoyagi/Workspaces/Node/sample/package.json:
 
{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

1.2 TypeScriptのインストールと動作確認

TypeScript をインストールして、tsc コンパイラが呼び出せるか確認

$ npm install --save-dev typescript
$ node_modules/.bin/tsc --version
Version 3.9.7

1.3 package.json を編集してTypeScriptをコンパイルできるように

"scripts": {
   "build": "tsc",
   "watch": "tsc --watch"
 },

1.4 プロジェクトディレクトリをTypeScriptに初期化する

tsconfig.json が作成される

$ node_modules/.bin/tsc --init
message TS6071: Successfully created a tsconfig.json file.

1.5 Node.jpの型定義のインストール

$ npm install --save @types/node

1.6 いったんTypeScriptをコンパイルしてNode.jsのファイルが生成できるようになった

(1) app.ts ファイルを作成し以下を記述

console.log("test");

(2) ビルド

TypeScriptをNode.jsにコンパイルする

$ npm run build
app.js が生成される。

(3) 実行

以下で、Node.jsアプリケーションとして実行する

$ node app

2.ブラウザで動かす準備

2.1 Http Serverのインストール

$ npm install -g http-server

2.2 TypeScriptの設定

tsconfig.json

  • lib に、DOM を指定。
  • WebWorkerの動作確認をしたいのでWebworkerも追加
  • tsをコンパイルしてできるjsファイルをpublicに指定する
  • ルートは srcディレクトリ
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["DOM", "WebWorker", "ES5"],
    "outDir": "./public",
    "rootDir": "./src",
  }
}

2.3 package.json で起動コマンドを追加する

  • del_script : スクリプトをいったん削除
  • build、watch : コンパイルまえに、del_script を指定し、いったんスクリプトを消す
  • start:Http Serverを起動する
  "scripts": {
    "del_script": "rm ./public/scripts/*.*",
    "build": "npm run del_script && tsc",
    "watch": "npm run del_script && tsc --watch",
    "start": "http-server -o"
  },

3.構造と実行

3.1構造

  • /src/scripts に TypeScriptのファイルを置く
  • コンパイルすると /public/scripts にNode.js(JavaScriptファイルが生成される)
  • /public 直下にブラウザで起動するための index.htmlを置いとく

ts_script

3.2 コンパイルと実行

コンパイル

$ npm run build

ブラウザで実行

$ npm run start

ブラウザで、で動作確認用に記述した、WebWorkerのプログラムが動作した!

runbrowse

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です