できらぁ！(様式美)
ということでローカルにTypeScriptの実行環境を作ります。すぐできます。
TypeScriptを使うだけなら、TypeScript playground等を使えばいいと思うのですが、「○○のパッケージを試したい。ついでだからTypeScriptも使いたい」という欲張りさんはローカルに環境構築したくなることもあるでしょう。え？ codesandbox? 知らんなぁ。
とにかくローカルにTypeScriptの実行環境を作っていきます。ゴールは「コンパイルして出来たjsファイルをnodeコマンドで実行するところ」までです。
事前準備
以下は事前に準備できてるとします。出来てない方は適当にググってください。
- node, npm(yarn)
ローカルにTypeScriptの実行環境を作成
ここから本題です。
あと私はyarn派なのでyarnを使います。
プロジェクトの作成
プロジェクトディレクトリを作成して、package.jsonを作りましょう。
$ mkdir typescript_try
$ cd typescript_try/
$ yarn init
yarn init後に色々聞かれますが、とりあえず全部Enterで良いです。(ちゃんと設定したい人はしてください)
TypeScriptのインストール
$ yarn add -D typescript @types/node
typescript等はもちろん開発でしか使わないので、-Dはつけましょう(すぐ忘れる)
tsconfig.json
これが無いとコンパイル出来ないので作ります。ルートディレクトリに置いて下さい。
$ touch tsconfig.json
{
"compilerOptions": {
"lib": ["ESNext"],
"module": "CommonJS",
"outDir": "dist", // コンパイル後に生成されるJSファイルの置き場所をTSCに指示
"sourceMap": true,
"strict": true,
"target": "ES2015"
},
"include": ["src"] // TSCがTypeScriptファイルを見つけるためにどのディレクトリを探せば良いか？の指定
}
なおこの内容は、オライリーのTypeScript本の2.3.1 tsconfig.json に記載された内容をベースに作成しました。(yarn tsc --initでも内容は異なりますが最低限のものを作れます。こっちの方が普通かも？)
詳細は割愛しますが、以降の説明に関連する2つのパラメータに関してはjsonのコメントに説明を記載しました。なおTSCはTypeScriptのコンパイラのことです。
他の項目に関してはググってください。もしくはオライリー本を買って下さい！ 超良書です。
またこの時点では、"src"/"dist" フォルダが無いため、エディタによってはエラーが表示されるかもしれませんが、そこは一旦スルーして下さい。
TSファイルの作成
実行したいTypeScriptファイルを作成します。
tsconfig.jsonのincludeで指定した通り、srcディレクトリを作成して、その下に作って下さい。
$ mkdir src
$ touch src/index.ts
const hello: string = 'Hello TypeScript!'
console.log(hello)
コンパイル後に生成されるJSファイルの置き場所を作成
ディレクトリを作るだけでOKです。
$ mkdir dist
もし先ほどtsconfig.jsonでエラーが出ていた場合は、この後エラーが消えていることを確認して下さい。
TSファイルのコンパイル
作成したTypeScriptファイルをコンパイルします。
$ yarn tsc
yarn run v1.22.4
$ node_modules/.bin/tsc
✨ Done in 1.39s.
生成されたJSファイルはdist下に保存されているはずです。確認してみましょう。
"use strict";
const hello = 'Hello TypeScript!';
console.log(hello);
//# sourceMappingURL=index.js.map
それっぽく出来てますね！
生成されたJSファイルの実行
nodeコマンドで生成されたJSファイルを実行します。
$ node dist/index.js
Hello TypeScript!
これでローカル環境でTypeScriptのコードを実行できました。簡単でしたね！
さいごに
「手元でJavaScript周りのパッケージの動作確認等をする時、サラッとTypeScript使えてたらカッコよくない？」という不純な気持ちで書きました。
ただパッケージによっては、別途TypeScript用の設定が必要だったりするのでそこはご注意くださいm(_ _)m