🐥

【TypeScript】vscodeでコンパイルする流れ

2022/08/07に公開約2,400字

概要

最近、TypeScriptも普通の流れになってきていて、vscodeで実際にコンパイルするまで流れをメモ。

インストール

コンパイルする先にまずはNode.jsをインストールしておく。
npmを使ったり、TypeScript のトランスパイラである tsc コマンドは、Node.js のパッケージとして提供されているので必要です。

https://nodejs.org/ja/

その後、npmパッケージでTypeScriptをインストールしておく。
どこでも使えるように[-g]でグローバルを指定。

npm install -g typescript

ここまで準備したら実際の流れは移行。

コンパイルまでの流れ

VScodeで適当なプロジェクト作ったらそこに移動しておく。

JSONファイルの作成

まずは、プロジェクトのパッケージ依存関係やビルドスクリプトのための「package.json」と
TypeScript 用のビルド設定ファイルである「tsconfig.json」を作成する。

//package.json
npm init -y

//tsconfig.json
tsc --init

上記を実行するとtsconfig.jsonファイルが作成されて下記のようなファイルが作成される。
*コメントアウトされていた箇所は記載していません

tsconfig.json
{
"compilerOptions": {
    "target": "es2016",
    "module": "commonjs",                     
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,                   
    "skipLibCheck": true                         
    }
}

コンパイル元のファイルとコンパイル先を指定

実際にTypeScriptのファイルをコンパイルするにあたり、どこのフォルダにあるTypeScriptファイルをコンパイルしてどこに書き出すのか指定することができる。

  • index.html
  • src/main.ts
  • dist/main.js

上記のようにしたい場合はtsconfig.jsonファイルのcompilerOptionsにrootDiroutDirがコメントアウトされてるので、そこを指定する。

tsconfig.json
"rootDir": "./src",
"outDir": "./dist",

includeによる階層化したフォルダをコンパイル対象とする

例えば、src配下のファイル全て()がコンパイル対象にしたい場合は以下。

tsconfig.json
"compilerOptions": {
  //ここは省略                  
  },
"include": ["src/**/*"]

上記の場合は、拡張子を指定しない(*のみ)だと、.ts``.tsx``.d.tsの拡張子が対象らしい。
また"allowJs": trueの場合は.js.jsxの拡張子も対象となる。

tsconfig.json
{
"compilerOptions": {
    "/* JavaScript Support */
    "allowJs": true,                        
    }
}

コンパイルしてみる

実際にコンパイルするには、ターミナルで以下を実行してコンパイルする。

tsc

そうすると、distフォルダ内に、main.jsが作成されてるはず。

変更を監視する

TypeScriptファイルを変更して確認するたびにコンパイルもめんどうなので変更して保存したら自動的にJavaScriptファイルへのコンパイルが実行されたほうが楽ですよね。

tsc --watch

npmでも実行できるようにしてみる

よくnpm run devといったコマンドを打つことがあるが、package.jsonのscriptsの箇所にビルドコマンドを登録できる。

package.json
{
  "scripts": {
    "build": "tsc",
    "build:watch": "tsc --watch"
  },
  // ...
}

上記の場合は下記のようなコマンドで実行できる

nmp run build  //tsc
npm run build:watch //tsc--watch

まとめ

駆け足でメモしたが、以下のサイトを参考にしました。
ありがとうございます。

https://qiita.com/nemutas/items/0a266ec58c76ae3ee43a
https://maku.blog/p/ak7u3h3/#nodejs-のインストール
https://qiita.com/ryokkkke/items/390647a7c26933940470

Discussion

ログインするとコメントできます