TypeScriptの基本１（開発環境～コンポーネントの作成とＷｅｂサーバへのデプロイ）

１．TypeScriptとは
２．TypeScriptの開発環境
３．TypeScriptでの実装とWebサーバへデプロイ

１．TypeScriptとは
（１）概要
　TypeScriptは2013年にMicrosoftによって開発されたJavaScriptを拡張して作られたプログラミング言語でAltJS（代替JavaScript言語）の一つである。 AltJS はコンパイルすることでJavaScriptが生成されるプログラミング言語。
　TypeScriptで書かれたコードをコンパイルするとJavaScriptのコードに変換されるためJavaScriptファイルが実行できる環境で使える。クライアントサイド、サーバサイド (Node.js) で実行されるJavaScriptアプリケーションの開発に利用できる。
（２）特徴
・変数のデータ型についてJavaScriptは実行時にデータ型が自動で決まる動的型付けに対し、TypeScriptでは変数のデータ型をあらかじめ決めることのできる静的型付けで宣言するためエラーを未然に防げる。
・クラスの作成ができる。クラスを使うことでJavaScriptより短く読みやすいコードが書ける。
・JavaScriptとの互換性があり、JavaScriptファイルをTypeScriptから呼び出して使うことも可能。

２．TypeScriptの開発環境
（１）ホストOS
　Windows 10 Pro
（２）仮想環境（VirtualBox）
　・ゲストOS：CentOs8（Red Hat 64-bit）
（３）TypeScriptのインストール
　$ npm install -g typescript
$ tsc -v

（４）コンパイルのための設定ファイルを作成
　$ tsc –init
　プロジェクトフォルダ内にtsconfig.jsonという設定ファイルが作成される。

３．TypeScriptでの実装とWebサーバへデプロイ
（１）ソースファイルの作成
　type-test.ts

let message:string="Hello TypeScript"
var mydiv = document.getElementById('root')
mydiv.innerHTML=message
console.log(message)

let message:string="Hello TypeScript"

var mydiv = document.getElementById('root')

mydiv.innerHTML=message

console.log(message)

　index.html

<!DOCTYPE html>
<html>
<head>
  <title>TypeScriptのサンプル</title>
</head>
<body>
  <div id="root"></div>
  <script src="type-test.js"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>TypeScriptのサンプル</title>

</head>

<body>

</body>

</html>

（２）コンパイル
　TypeScriptファイル（ type-test.ts）をコンパイルして、javascriptファイル（.js）に変換する。
　$ tsc type-test.ts

（３）ブラウザで表示
　XAMPPのApacheを起動し、index.htmlとjavascriptファイル（type-test.js）を”C:/xampp/htdocs”のフォルダに配置する。
　ブラウザからWebサーバに接続する。　

The end