はじめに
筆者は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
このように表示できれば成功です。
非常に簡単でしたね。
参考