Code-Server de Typescript!!

ふざけたタイトルですが、やることは前回構築したCode-ServerでTypescriptの開発環境を整えます。

前回の記事はこちらから

インストール

Typscriptの開発に必要な諸々をインストールします。Nodeとnpmが必要なのでインストールしてない場合は、こちらの記事を参考にインストールしてください。

今回は、Visual Studio Codeの公式ドキュメントを参考に作業します。記載の通りコンパイラをインストールします。

npm install -g typescript

1	npm install -g typescript

インストール完了後、下記のコマンドを実施してバージョンを確認します。執筆時のバージョンは4.1.3でした。

tsc --version

1	tsc --version

コンパイラのインストールが確認できたら、Code Serverでフォルダを開きます。

今回は/home/ubuntu配下にtypescriptフォルダを作成しました。

Code Serverの画面にある、新規ファイルからhello.tsファイルを作成します。

let message: string = 'Hello World';
console.log(message);

1 2	let message: string = 'Hello World'; console.log(message);

内容としては、Hello Worldの文字を表示するだけです。TypescriptはコンパイルするとJSファイルが生成されますが、今回はCode Serverのデバッグから実行します。

hello.ts同様に新規ファイルからtsconfig.jsonを作成してください。ファイルの内容は以下のとおりです。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "out",
    "sourceMap": true
  }
}

{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"outDir": "out",

"sourceMap": true

}

tsconfig.json作成後、Code Serverのデバッグから「launch.jsonを作成します」をクリックして、launch.jsonファイルを作成します。

表示されたダイアログはNodeJSを選択すると、launch,jsonが生成されます。

※日本語化している場合は、エラーが出て実行できないのでlaunch.jsonのpreLaunchTaskを変更します。

"preLaunchTask": "tsc: ビルド - tsconfig.json",

1	"preLaunchTask": "tsc: ビルド - tsconfig.json",

ブレークポイントを設置してデバッグ実行してみるとちゃんとブレークポイントを認識していることがわかります。

最後まで実行すると、デバッグコンソールに”Hello World”と表示されます。以上で開発環境の構築は終わりです。

今回はCode ServerでTypescriptの環境を構築しました。VSCodeでは特に拡張機能もなく開発を行えるのは便利ですね。

また、ESLintなど便利な拡張機能もあります。いろいろやってみてください。

個人的にはARM環境でもC#拡張機能が動作してほしいなぁとは思ってます。

では、この辺で。

三条　海斗