【Windows】TypeScript実行環境構築

職場でJavaScriptを書き始めるようになって、TypeScriptもかじっておいたほうがいいなーと思ったので、環境構築手順をメモしておく。

環境

• Windows11
• Node.js v20.11.0

前提条件

nodeとnpmがインストール済み

環境構築手順

PowerShell上からTypescriptのコンパイラをインストール

 > npm install -g typescript
 added 1 package in 3s

プロジェクトのディレクトリを作成。なんかいい感じのところに、いい感じの名前でフォルダを作成して移動する

 > mkdir test
 > cd .\test

jsonファイルを作成する
TypeScriptをよしなに動かすためのjsonの設定ファイルを作成する必要がある。
ファイルが作成されると、以下のような出力が表示される。

 > tsc --init
 
 Created a new tsconfig.json with:                                                                                       
                                                                                                                      TS 
   target: es2016
   module: commonjs
   strict: true
   esModuleInterop: true
   skipLibCheck: true
   forceConsistentCasingInFileNames: true
 You can learn more at https://aka.ms/tsconfig

プロジェクトの環境構築手順は以上。
ひとまず正常に動作するか確認してみましょう。

動作確認のための簡単なスクリプトを作成する。
ファイル名はtest.tsとする。

 function greet(name :string): string {
     return `Hello, ${name}!`;
 }
 
 console.log(greet("World"));

作成したtsファイルをコンパイルする。

 ※作業用ディレクトリ内で
 > tsc

すると、フォルダ内にtest.jsファイルが作成されている。
nodeで実行して、動作確認

 > node test.js
 Hello, World!

ちなみに

 function greet(name :string): string {
     return `Hello, ${name}!`;
 }
 
 console.log(greet(100));

こんな感じで文字列(string)に型注釈された代数に整数を入れたままコンパイルすると、以下のようなエラーが出る。これがTypeScriptの便利なところ。

 > tsc
 test.ts:5:19 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
 
 5 console.log(greet(100));
                     ~~~
 
 Found 1 error in index.ts:5

環境構築は以上。
よしなにやっていきましょう。