ざっとこのようになります。ちなみにyarn
を使います。
package.json
を作ってプロジェクト化するtypescript
インストールTypeScript の設定ファイルを作る
適当に
.ts
ファイルを作る変換して
.js
ファイルを作る
package.json を作ってプロジェクト化する
適当なディレクトリに移動するか作成して、yarn init -y
でpackage.json
を生成します。
以下の例では/tmp/ts2js
というディレクトリで作業する想定です。
mkdir -p /tmp/ts2js
cd /tmp/ts2js
yarn init -y
typescript インストール
/tmp/ts2js
ディレクトリ上で以下でインストールします。
yarn add -D typescript
package.json
にdevDependencies
セクションにtypescript
が追加されれば完了です。
{
"devDependencies": {
"typescript": "^3.4.4"
}
}
TypeScript の設定ファイルを作る
/tmp/ts2js/tsconfig.json
となるようにtsconfig.json
を作ります。これは「どのファイルを変換対象にするか」や「どこまで TypeScript の機能を使うか」などを設定する為のファイルです。
ここでは/tmp/ts2js/src/index.ts
をこれから作り、/tmp/ts2js/dist/index.js
となるように出力させたいと思います。なのでそのindex.ts
が変換対象できるような設定を追加します。
これにはinclude
セクションとcompilerOptions.outDir
セクションをtsconfig.json
へ置きます。それぞれ、「どのファイルを変換対象にするか」と「どこへ出力するか」の設定です。
{
"include": ["src"],
"compilerOptions": {
"outDir": "dist"
}
}
src
と設定していますがこれはsrc/**/*
のようなものでそのディレクトリ以下すべてのファイルという意味になります。
では確認するためにindex.ts
ファイルを作ります。
mkdir -p /tmp/ts2js/src/
touch /tmp/ts2js/src/index.ts
yarn tsc --showConfig
yarn tsc --showConfig
は先ほど作ったtsconfig.json
を見てちゃんと設定されているか確認するためのコマンドです。実はinclude
というのは動的なオプションで変換コマンド実行時にsrc
以下のファイルをチェックして都度変換ファイルに含めてくれるセクションです。
うまく行けばこのようにfiles
というセクションが追加された状態のものが表示されると思います。これが動的に設定された変換対象ファイルになります。
{
"compilerOptions": {
"outDir": "dist"
},
"files": [
"./src/index.ts"
],
"include": [
"src"
]
}
index.ts ファイルを編集する
確認のために型を使う簡単な.ts
ファイルを作ります。こんな感の1
足すだけのplusOne
を定義・使ってみました。
const plusOne = (num: number) => num + 1;
console.log(plusOne(2));
変換して JavaScript ファイルを作る
これも以下を実行するだけです。
yarn tsc
問題が無ければ/tmp/ts2js/dist/index.js
というファイルが作られているはずです。ついでに実行してみます。
node dist/index.js
# 3
ちゃんと3
が得られたのでうまく動いてるようです。