Posted at

TypeScriptを簡単に動かす環境構築

More than 1 year has passed since last update.

この記事は、TypeScript始めたいけどなにしたらいいのかわかんね、という人向けです。


前提として必要なもの


  • Node.js(npmを使います)

  • 好きなエディタ(VSCodeが標準でTypeScriptをサポートしてるので便利)

  • Macで検証しています


TypeScriptのインストール

$ npm install -g typescript

エラーでたらsudoつけてみてください。

成功したら

$ tsc --version でバージョンをチェックしてみましょう。

Version 2.9.2とか表示されたらOKです。


コンパイル環境を作る

ここからはVSCodeを使う前提で書いていきます。違うエディタを使いたい人は調べてみてください。多分、方法はそんなに変わらないはずですが、他のエディタでは未検証です。


package.jsonの作成

TypeScriptを使うプロジェクトフォルダに移動して

$ npm init

でpackage.jsonを作成します。色々質問されるので、適当に解答します。だいたいの項目は必須ではないので空でもOKです。

そうして出来たpackage.jsonは初期状態はこんな感じになってますが…

{

"name": "hoge",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}

こう、変更します。nameとかversionは適当でいいです。

{

"name": "hoge",
"version": "1.0.0",
"private": true, // モジュールを公開する必要がなければtrueにしておきます
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc", // ここにTypeScriptを指定しておく
"watch": "tsc -w" // あとで自動コンパイルのために必要になります
}
}


tsconfig.jsonの作成

$ tsc --init

でtsconfig.jsonを作成します。

作成されたtsconfig.jsonにはたくさん項目がありますが、最低限は以下です。

{

"compilerOptions": {
/* Basic Options */
"target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"outDir": "./dist/js", /* Redirect output structure to the directory. */
"rootDir": "./src/ts", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
"strict": true, /* Enable all strict type-checking options. */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

},
"exclude": [
"node_modules"
]
}

rootDirにはTypeScriptファイルを置く場所を指定し、outDirにはコンパイルしたJavaScriptファイルを出力する場所を指定します。このへんはプロジェクトの構造に合わせてお好みで。

以上のファイルをプロジェクトの直下に置いておきます。


自動コンパイル

ここまで出来たら適当な.tsファイルを用意します。

今回はサンプルとしてこんな風にしました。

const test: string = "world!";

console.log(`Hello ${test}`);

JavaScriptが出力されるか確認するだけなので、console.logだけでもOKですが、せっかくなのでconstを使います。

そしたらプロジェクトの階層で

$ npm run watch

を実行します。

tsc -w が呼ばれているでしょうか。

エラーがなく成功すれば、outDirとして指定したフォルダにJavaScriptファイルが生成されていると思います。

エラーが出る場合はだいたいpackage.jsonが間違っていたりするときなので見直してみましょう。

これで.tsファイルを保存するたびに.jsファイルが更新されるようになりました。停止したいときはcontrol+Cで。

以上で簡単にTypeScriptを作る環境が出来ました。今回はMacOS,VSCodeで検証しています。あくまで最低限です。もっと詳細が知りたい!という方は以下の記事が参考になると思います。


参考記事

https://qiita.com/kurogelee/items/cf7954f6c23294600ef2