はじめに

筆者はWindows環境を使用していますので、
もしOSが違う場合は、コマンド部分など自身の環境によって、
適宜読み替えて頂けると良いかと思います。

Node.jsをインストール

TypeScriptは、最終的にJavaScriptにコンパイル(トランスパイル)されます。
そのためTypeScriptコンパイラのためのNode.jsが必要になります。

こちらからインストーラーをダウンロードします。
特に理由がなければ最新版で良いかと思います。

TypeScriptコンパイラをインストール

ターミナルやコマンドプロンプトでコマンドを入力し実行します。

npm install -g typescript

これでtscコマンドが使用可能になったので、
バージョンを確認してみます。

tsc -v
Version 4.6.4

このように表示できればOKです。

tsファイルの作成して画面表示する

拡張子.tsはTypeScriptで使われる拡張子です。
Hello, world!を表示させるために、まずはtestフォルダを作成しその内にHTMLファイルとtsファイルを用意します。

test.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <h1 id="test1"></h1>
</body>
<script src="test.js" type="text/javascript"></script>
</html>

test.ts

const message:string = "Hello, world!";
window.onload = () => {
    const test1 = document.getElementById("test1");
    test1.innerText = message;
}

test
├─ test.html
└─ test.ts

画面に文字を表示するだけの非常に簡単なコードです。

tscコマンドでコンパイルする

tsファイルをjsファイルにコンパイルします。

tsc test.ts

コンパイルが成功すると、このようなjsファイルが生成されます。
中身もしっかり変わっています。

test.js

var message = "Hello, world!";
window.onload = function () {
    var test1 = document.getElementById("test1");
    test1.innerText = message;
};

フォルダ構成は以下のようになります。

test
├─ test.html
├─ test.js
└─ test.ts

画面を表示する

あとは、
Chromeを起動して表示できるかを確認します。

start chrome C:\hoge\test\test.html