環境構築から JavaScript に変換まで

関連

ざっとこのようになります。ちなみに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が得られたのでうまく動いてるようです。