TypeScriptコンパイラである「tsc」を使用して、TypeScriptをJavaScriptにコンパイルします。
手順
以下のコマンドを実行して、必要なパッケージをインストールする。
npm install -D typescriptプロジェクトのルートディレクトリで以下のコマンドを実行して、
Typescriptプロジェクトを初期化する。
npx tsc --initプロジェクトのルートディレクトリにtsconfig.jsonというファイルが作成される。
tsconfig.jsonを以下のように編集する。
{
"compilerOptions": {
"target": "es2022",
"module": "commonjs",
"rootDir": "./src",
"outDir": "./dist",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
},
"include": [
"./src/**/*"
]
}プロジェクトのルートディレクトリに「src」というディレクトリを作成し、
コンパイル対象のTypeScriptファイルを配置する。
以下のコマンドを実行すると、プロジェクトのルートディレクトリに
「dist」というディレクトリが作成され、その中にJavaScriptファイルが出力される。
npx tsc出力されたJavaScriptは以下のようなコマンドで実行できる。
node ./dist/app.js補足
–noEmitオプションを用いることで、
コンパイル時にファイルを出力せずに型チェックのみを行うことができます。
npx tsc --noEmitおまけ
package.jsonを以下のように編集して「build」スクリプトを設定することで、
スクリプトの内容を「npm run build」というコマンドで実行できるようになって便利です。
{
...
"scripts": {
"build": "tsc"
},
...
}参考
- microsoft/TypeScript: TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
https://github.com/microsoft/TypeScript - TypeScript: Documentation – tsc CLI Options
https://www.typescriptlang.org/docs/handbook/compiler-options.html - TypeScript: TSConfig Reference – Docs on every TSConfig option
https://www.typescriptlang.org/tsconfig - scripts | npm Docs
https://docs.npmjs.com/cli/v9/using-npm/scripts
