ふざけたタイトルですが、やることは前回構築したCode-ServerでTypescriptの開発環境を整えます。
前回の記事はこちらから
インストール
Typscriptの開発に必要な諸々をインストールします。Nodeとnpmが必要なのでインストールしてない場合は、こちらの記事を参考にインストールしてください。
今回は、Visual Studio Codeの公式ドキュメントを参考に作業します。記載の通りコンパイラをインストールします。
1 |
npm install -g typescript |
インストール完了後、下記のコマンドを実施してバージョンを確認します。執筆時のバージョンは4.1.3でした。
1 |
tsc --version |
コンパイラのインストールが確認できたら、Code Serverでフォルダを開きます。
今回は/home/ubuntu配下にtypescriptフォルダを作成しました。
Hello Worldをやってみる
Code Serverの画面にある、新規ファイルからhello.tsファイルを作成します。
1 2 |
let message: string = 'Hello World'; console.log(message); |
内容としては、Hello Worldの文字を表示するだけです。TypescriptはコンパイルするとJSファイルが生成されますが、今回はCode Serverのデバッグから実行します。
hello.ts同様に新規ファイルからtsconfig.jsonを作成してください。ファイルの内容は以下のとおりです。
1 2 3 4 5 6 7 8 |
{ "compilerOptions": { "target": "es5", "module": "commonjs", "outDir": "out", "sourceMap": true } } |
tsconfig.json作成後、Code Serverのデバッグから「launch.jsonを作成します」をクリックして、launch.jsonファイルを作成します。
表示されたダイアログはNodeJSを選択すると、launch,jsonが生成されます。
※日本語化している場合は、エラーが出て実行できないのでlaunch.jsonのpreLaunchTaskを変更します。
1 |
"preLaunchTask": "tsc: ビルド - tsconfig.json", |
ブレークポイントを設置してデバッグ実行してみるとちゃんとブレークポイントを認識していることがわかります。
最後まで実行すると、デバッグコンソールに”Hello World”と表示されます。以上で開発環境の構築は終わりです。
終わり
今回はCode ServerでTypescriptの環境を構築しました。VSCodeでは特に拡張機能もなく開発を行えるのは便利ですね。
また、ESLintなど便利な拡張機能もあります。いろいろやってみてください。
個人的にはARM環境でもC#拡張機能が動作してほしいなぁとは思ってます。
では、この辺で。
三条 海斗
コメント