コンテンツにスキップ

TypeScriptの環境構築

tsxを使う

tsxはNode.jsでTypeScriptを実行する拡張機能であり、ホットリロードに対応している。

1
2
3
4
$ read -p "Project name:" name && echo $name && mkdir -p $name && cd $_ && touch .env && npm init -y && npm i -D typescript tsx @types/node && npx tsc --init && mkdir src && echo 'console.log("Hello, World!");' > src/app.ts


$ mkdir -p {projectName} && cd $_ && npm init -y && npm i -D typescript tsx @types/node && npx tsc --init && mkdir src && echo 'console.log("Hello, World!");' > src/app.ts

package.jsonに以下マージする。

package.json
1
2
3
4
5
{
  "scripts": {
    "dev": "tsx watch --env-file=.env src/app.ts"
  }
}

環境変数は.envからprocess.env.VARIABLE_NAMEで読み込み可能である。

Node.js 20.6以降もしくはtsxでは明示的にファイル名を指定することで.envを読み込むことができる。

明示的なので.envもしくはexport済みの環境変数どちらかを自動で参照させる場合はdotenvをインストールする必要がある。

package.jsonのバージョンを取得する

以下をマージする。

tsconfig.json
1
2
3
{
  "resolveJsonModule": true
}

コード内で以下のようにバージョンを取得する。

1
2
3
import { version } from "../package.json";

console.log(version);

ts-nodeとnodemonを使う

ts-nodeを使うとNode.jsでTypeScriptを実行することができる。nodemonを使うとホットリロードができる。

1
$ npm init -y && npm i -D typescript ts-node nodemon && npx tsc --init && mkdir src && touch src/app.ts

package.jsonに以下マージする。

package.json
1
2
3
4
5
{
  "scripts": {
    "dev": "nodemon src/app.ts"
  }
}

npm run devを実行する。

nodemon.jsonを作成し、以下のように内容を記述することで、nodemonの監視対象から外すことができる。

nodemon.json
1
2
3
{
  "ignore": ["settings.json"]
}