TypeScript入門画面に文字を表示しよう

それでは、早速学習をはじめて行きましょう。VSCodeでプログラミングをする場合は、フォルダ自体をVSCodeで開いておくと便利です。まずはその設定をしていきましょう。

VSCodeでフォルダを開こう

デスクトップなどに、学習用のフォルダを準備します。ここでは、「typescript」というフォルダを作成しました。

そしたら、VSCodeを開いて「ファイル→フォルダーを開く」メニューから、今作成したフォルダを選んで開きましょう。

左端に、「エクスプローラーパネル」が表示され、フォルダやファイルの操作がこのパネル上から行えるようになります。この状態で、学習を進めていくと便利でしょう。

画面に文字を表示するプログラムを作成しよう

それでは、まずは一番初めのTypeScriptのプログラムを作成してみましょう。エクスプローラーパネルの「新しいファイル」をクリックして、新しいファイルを作成します。

ここでは、「first.ts」というファイル名をつけてファイルを編集し、次のようなコードを入力しましょう。

console.log(123);

JavaScriptにトランスパイルしよう

TypeScriptというプログラミング言語は、そのまま動作させることはできません。JavaScriptに変換をしなければならず、この作業を「トランスコンパイル」といいます。トランスは「Transform」の略称で「変身」といった意味、「パイル」は「コンパイル（Compile）」の略称で、プログラミングの用語で動作する形に変えることを言います（トランスコンパイルと略さずに呼ばれることもあります）。

ここでは、TypeScriptで作成したプログラムを、動作するJavaScriptに変換するという作業になります。ターミナルで次のように入力しましょう。

tsc first.ts

すると、同じフォルダに「first.js」というファイルができあがります。とはいえ、このファイルを開いても、ほぼ同じ内容しか記述されていません。今後、TypeScript独自の記法を使っていくと、違いが分かるようになります。

プログラムを実行しよう

では、ここで作成したプログラムを実行してみましょう。続けて、ターミナルで次のように入力します。

node first.js

トランスパイルされたプログラムをNode.jsに指定します。すると、画面に「123」と表示されました。これで、最初に作ったプログラムが動作しました。

次のレッスンで、プログラムの内容について紹介しましょう。