一、學習TypeScript的緣由
當前編寫前端的邏輯的主流語言仍是JavaScript，但這個語言由於其弱型別的特性使得它在很多的方面給程式設計師帶來了許多的困擾，例如在使用IDE時，IDE往往難以推斷出變數的型別，無法提供程式碼補全和錯誤提示，此外JavaScript對物件導向的支援也比較弱，算是一種比較非常勉強的實現方式，這也導致使用JavaScript編寫專案時到後期變得難以維護等等。因此學習TypeScript是非常有必要，也是符合未來前端的發展趨勢的。
二、學習環境的搭建
1. TypeScript的編譯環境
使用以下指令進行安裝（需要有node.js環境）：
npm install -g typescript
然後輸入下面的指令可檢視當前的版本：
> tsc -v
Version 4.3.5
2. vscode自動編譯的配置
我使用的學習環境是 vscode ，先建立一個專案資料夾，然後輸入（先cd到該資料夾中）：
tsc --init
然後系統會給我們生成一個 tsconfig.json 的檔案。
然後我們只需要將它的 outDir 的值設定為 "./js"即可：
然後我們先新建一個index.ts的檔案，先編寫一小段ts程式碼：
let str: string = "你好ts"
let str1: string = "你好str1"
然後點選：終端 》 執行任務 》typescript 》tsc監視 即可
這樣我們每次儲存 ts 程式碼時，它就會被自動編譯成 js 程式碼了。
編譯出的 js 程式碼：
"use strict";
var str = "你好ts";
var str1 = "你好str1";
當然，除此之外我們也可以使用以下指令手動編譯 ts 檔案：
tsc xxx.ts
三、TypeScript中的資料型別
- 布林型別
boolean - 數字型別
number - 字串型別
string - 陣列型別
array - 元祖型別
tuple - 列舉型別
enum - 任意型別
any null和undefinedvoid型別never型別
tips: 在TypeScript中定義變數時必須為變數表明變數的型別
1. 簡單變數的定義和初始化
這裡以 boolean 和 number 為例：
var flag: boolean = true
var a: number = 123
而當我們試圖把一個其他型別賦值給一個數字型別的變數時會報錯，例如：
2. 複雜變數的定義和初始化
陣列型別
寫法一：
let 陣列變數名: 元素變數型別[] = [xxx, ...]
例如：
let arr: number[] = [1,2,3]
這種方式和Java的寫法非常類似。
寫法二：
let 陣列變數名: Array<> = [xxx, ...]
例如：
let arr2: Array<string> = ["123","haha"];
寫法三：
let 陣列變數名: any[] = [xxx, ...]
這樣陣列就退化為了 js 中的可以裝載任意型別元素的陣列了。
元組型別
在TypeScript中元組型別屬於陣列的一種，可以指定每個元素的型別：
let 元組變數名:[型別一, 型別二, 型別三...]=[型別一變數, 型別二變數, 型別三變數...]
具體例子：
let oneTuple:[string, number, boolean] = ["ts",15.2,false];
列舉型別
語法：
enum 列舉型別名 {
變數1 [=xxx],
變數2 [=xxx]...
}
例如：
enum Flag {
SUCCESS = 1,
ERROR = -1
}
若不為列舉變數賦值，則它的預設值為索引值（從1開始）
enum Color {
RED, BLUE, GREEN
}
let computerColor: Color = Color.BLUE
console.log(computerColor);
執行結果：
3. 其他變數型別
任意型別
任意型別和es5中沒有指定型別相似，即一個變數可以使用任意的型別進行賦值。
語法：
let 變數名: any = 任意型別值;
示例：
let foo: any = 123;
foo = "hello world";
foo = false;
undefined型別
當一個變數宣告而沒有初始化賦值時，它的型別為undefined。
我們可以使用一個多型別運算子 | 來表示一個變數可以有多個型別：
let num: number|undefined;
console.log("num=",num);
void型別
一般用於標明方法沒有返回值，用法同 Java 和 c++ 等的 void：
function run(): void {
console.log("hello world");
}