概要：このチュートリアルでは、TypeScriptでHello Worldプログラムを開発する方法を学びます。
Node.jsでのTypeScript Hello Worldプログラム
まず、コードを保存するための新しいディレクトリ（例：helloworld）を作成します。
次に、VS Codeを起動し、そのディレクトリを開きます。
3番目に、app.tsという名前の新しいTypeScriptファイルを作成します。TypeScriptファイルの拡張子は.tsです。
4番目に、app.tsファイルに次のソースコードを入力します。
let message: string = 'Hello, World!';
console.log(message);Code language: TypeScript (typescript)5番目に、キーボードショートカットCtrl+`を使用するか、メニューのターミナル > 新しいターミナルに従って、VS Code内に新しいターミナルを起動します。
6番目に、ターミナルに次のコマンドを入力して、app.tsファイルをコンパイルします。
tsc app.tsCode language: CSS (css)
すべてがうまくいけば、TypeScriptコンパイラによってapp.jsという新しいファイルが生成されます。
Node.jsでapp.jsファイルを実行するには、次のコマンドを使用します。
node app.jsCode language: CSS (css)TypeScript開発環境のセットアップで説明したtsxモジュールをインストールした場合、JavaScriptにプリコンパイルすることなく、1つのコマンドだけでTypeScriptファイルをNode.jsで直接実行できます。
tsx app.tsCode language: CSS (css)WebブラウザでのTypeScript Hello Worldプログラム
次の手順では、WebブラウザにHello, World!メッセージを表示するWebページを作成する方法を示します。
まず、index.htmlという新しいファイルを作成し、次のようにapp.jsを含めます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TypeScript: Hello, World!</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>Code language: HTML, XML (xml)TypeScriptコンパイラ（tsc）がapp.tsファイルをapp.jsファイルにコンパイルすることに注意してください。
次に、app.tsのコードを次のように変更します。
let message: string = 'Hello, World!';
// create a new heading 1 element
let heading = document.createElement('h1');
heading.textContent = message;
// add the heading the document
document.body.appendChild(heading);Code language: TypeScript (typescript)3番目に、app.tsファイルをapp.jsファイルにコンパイルします。
tsc app.tsCode language: CSS (css)4番目に、index.htmlを右クリックして「Live Serverで開く」オプションを選択し、VS CodeからLive Serverを開きます。
Live Serverは、次のメッセージでindex.htmlを開きます。
変更を加えるには、app.tsファイルを編集する必要があります。例えば
let message: string = 'Hello, TypeScript!';
let heading = document.createElement('h1');
heading.textContent = message;
document.body.appendChild(heading);Code language: TypeScript (typescript)そして、app.tsファイルをコンパイルします。
tsc app.tsCode language: CSS (css)TypeScriptコンパイラは新しいapp.jsファイルを生成し、Live ServerはWebブラウザで自動的にリロードします。
app.jsはapp.tsファイルの出力ファイルであるため、その内容を直接変更しないでください。変更すると、app.tsファイルを再コンパイルしたときに変更が失われます。
このチュートリアルでは、Node.jsおよびWebブラウザで動作するHello, World!という名前の最初のTypeScriptプログラムを作成する方法を学びました。
