はじめに
TypeScriptを仕事で使うことになったので最近勉強を始めました。
そのときのメモです。
TypeScriptをインストールする
公式サイトにインストールの手順が書いてあります。
自分の環境では以下のコマンドを使いました。--save-devでTypeScriptコンパイラをローカル(プロジェクトフォルダ内)にインストールしています。
npm init -y
npm install typescript --save-devTypeScriptプロジェクトの設定 (tsconfig.json)
tsconfig.jsonという名前のファイルをプロジェクトのルートフォルダに作り、その中にコンパイラオプションなどの設定を書きます。
詳しくはこちらを参照。
tsconfig.json
{"compilerOptions":{"target":"es5","module":"commonjs","sourceMap":true}}インテリセンスが効いているのでCtr+Spaceで入力候補を表示してその中から選ぶと良さそうです。
ビルドタスクを構成する
ターミナル(T) -> 既定のビルドタスクの構成...から tsc: ビルド tsconfig.jsonを選択します。
ビルドタスクの設定(tasks.json)は.vscodeフォルダ中にあります。
.vscode>tasks.json
{"version":"2.0.0","tasks":[{"type":"typescript","tsconfig":"tsconfig.json","problemMatcher":["$tsc"],"group":{"kind":"build","isDefault":true},"label":"tsc: ビルド - tsconfig.json"}]}TypeScriptのコード
見ての通りです。
TypeScriptのことはまだよく分かっていないのでこれだけにしてきます。
main.ts
classMessage{constructor(publicmessage:string){}greet(){returnthis.message;}}console.log(newMessage("hello-world!").greet());ビルド
Ctr+Shift+Bでビルドタスクを実行します。
プロジェクトフォルダ内のTypeScriptのコード(.ts)がJavaScriptのコードに変換され、デバッグ用のmapファイルが出力されます。
デバッグ
デバッグビュー > launch.jsonファイルを作成します。(リンク)からNode.jsを選ぶだけです。
他の言語の場合と大体同じ手順です。
デバッグ構成の詳細はこちらを参照。
.vscode>launch.json
{//IntelliSenseを使用して利用可能な属性を学べます。//既存の属性の説明をホバーして表示します。//詳細情報は次を確認してください:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"type":"node","request":"launch","name":"プログラムの起動","skipFiles":["<node_internals>/**"],"program":"${workspaceFolder}\\main.js"}]}hello-worldを出力するファイルの名前をmain.tsにしたので"program"のファイル名をデフォルトの"index.js"から"main.js"に変更しました。
これでプログラムの起動、デバッグができます。