ローカルに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!

コメントを残す

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