TypeScript簡單介紹

1.0 TypeScript語言簡單說明

簡單說明

TypeScript是微軟2012年推出的一種編程語言，屬於 JavaScript 的超集，可以編譯為 JavaScript 執行。它最大特點是強大的類型系統和對ES6的支持，TypeScript托管於GitHub上面。

TypeScript代碼，通過編譯可以轉換為純正的 JavaScript代碼，且編譯出來的 JavaScript代碼能夠運行在任何瀏覽器上。TypeScript 的編譯工具也可以運行在任何服務器和任何系統上。

設計目標

TypeScript從一開始就提出了自己的設計目標，主要如下：

• 遵循當前以及未來出現的ECMAScript規范。
• 為大型項目提供構建機制（通過Class 、接口和模塊等支撐）。
• 兼容現存的JavaScript代碼，即任何合法的JavaScript程序都是合法的typeScript程序。
• 對於發行版本的代碼沒有運行開銷。（使用過程可以簡單划分為程序設計階段和執行階段）。
• 成為跨平台的開發工具，TypeScript使用Apache作為開源協議，且能夠在所有主流的操作系統上安裝和執行。

TypeScript的優勢

1. 擁有活躍的社區支持和生態
2. 增加了代碼的可讀性和可維護性
3. 擁抱 ES6 規范，也支持ES7 草案的規范
4. TypeScript本身非常包容，兼容所有現行的JavaScript代碼

TypeScript的劣勢

1. 短期投入到工作可能增加開發成本
2. 集成到自動構建流程中需要額外的工作量
3. 學習需要成本，需要理解接口、Class、泛型等知識

關於TypeScript更多信息，請參考TypeScript官網和TypeScript中文網站或TypeScript Github托管倉庫。

2.0 開發環境和工具支持

命令行工具

安裝命令：$ npm install -g typescript

-g表示全局安裝，上面的命令執行后會在全局環境下安裝 tsc 命令。

查看版本信息命令：$ tsc --version

可以通過$ tsc --help來查看tsc使用幫助，通過$ tsc --version命令來查看tsc版本驗證是否安裝成功，當前最新的版本為Version 2.9.1，安裝成功后我們就可以在任何地方來執行 tsc 命令了。

typeScript文件的后綴為.ts。

我們可以通過在命令行中輸入$ tsc xxx.ts命令來把文件編譯為JavaScript文件，上述命令中xxx為對應文件的名稱，編譯完成后將得到xxx.js文件。

編輯器使用

主流的編輯器都支持 TypeScript。下面列出推薦的編輯器（點擊獲取編輯器或IDE對TypeScript的支持）

Atom 21世紀黑客文本編輯器（擁有眾多強大插件）
WebStorm 強大的前端開發編輯器
Visual Studio Code 內置了TypeScript支持，且本身也由TypeScript實現。

3.0 TypeScript組件

TypeScript語言內部被划分為三層，每層又被一次划分為子層或者是組件。

TypeScript語言內部的每一層都有自己不同的用途。

語言層：實現所有TypeScript的語言特性。
編譯層：執行編譯和類型檢查操作，並把代碼轉換為JavaScript。
語言服務層：生成信息以幫助編輯器或其它開發工具提供更好的輔助特性。

4.0 基本的數據類型

 像JavaScript，TypeScrip也有自己的數據類型，數據類型和JavaScript只是稍有不同，主要有

布爾類型(boolean)、數值類型(number)、字符串類型(string)、數組類型(array)、void類型以及枚舉類型。

數值(number)
數值類型等同於JavaScript中的number類型，在TypeScript中所有的數字都是浮點數，它們全部都是number類型的。

除了支持十進制和十六進制字面量，TypeScript還支持ECMAScript 2015中引入的二進制和八進制字面量。

let decLiteral: number = 6; 
let hexLiteral: number = 0xf00d; 
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

 

字符串(string)
連續的一個或多個字符，在代碼中需要使用單引號或雙引號包住，可以交叉。

let name: string = "bob"; name = "smith";

//還可以使用模版字符串，它可以定義多行文本和內嵌表達式。 這種字符串是被反引號包圍（ `），並且以${ expr }這種形式嵌入表達式

let name: string = `Gene`; let age: number = 37; let sentence: string = `Hello, my name is ${ name }. I'll be ${ age + 1 } years old next month.`;

 

布爾類型(boolean)
布爾類型有兩個可選的值，true或false。

let bool1:boolean = true; let bool2:boolean = false;

 

數組類型(array)
TypeScript中的數組類型和JavaScript不太一樣。數組類型在聲明的時候比較特殊，通常有兩種聲明方式：關鍵字 數組名:類型[]或者關鍵字 數組名:Array<類型>后一種格式被稱為泛型，后面會專門介紹。 

let list: number[] = [1, 2, 3];
//第二種方式是使用數組泛型，Array<元素類型>：
let list: Array<number> = [1, 2, 3];

 

枚舉類型(enum)
枚舉類型和其他面向對象語言中保持一致。我們可以通過enum 類型名{選項1，選項2，選項3,···}的方式來定義，枚舉類型中的成員默認從0開始依次遞增。

enum Color {Red, Green, Blue} let c: Color = Color.Blue; console.log(c); //打印的結果為2，每個選項從0開始依次遞增 //默認情況下，從0開始為元素編號。 你也可以手動的指定成員的數值。 例如，我們將上面的例子改成從 1開始編號：
 enum Color {Red = 1, Green, Blue} let c: Color = Color.Green;

 

元組 Tuple
元組類型允許表示一個已知元素數量和類型的數組，各元素的類型不必相同。 比如，你可以定義一對值分別為 string和number類型的元組。

// Declare a tuple type let x: [string, number]; // Initialize it
x = ['hello', 10]; // OK // Initialize it incorrectly
x = [10, 'hello']; // Error

枚舉類型提供的一個便利是你可以由枚舉的值得到它的名字。 例如，我們知道數值為2，但是不確定它映射到Color里的哪個名字，我們可以查找相應的名字：

enum Color {Red = 1, Green, Blue} let colorName: string = Color[2]; console.log(colorName); // 顯示'Green'因為上面代碼里它的值是2

 

void類型
void類型在所有類型都不存在的時候使用，是any類型的反面。

function warnUser(): void { console.log("This is my warning message"); } //聲明一個void類型的變量沒有什么大用，因為你只能為它賦予undefined和null：
 let unusable: void = undefined;

 

any類型
有時候，我們會想要為那些在編程階段還不清楚類型的變量指定一個類型。 這些值可能來自於動態的內容，比如來自用戶輸入或第三方代碼庫。 這種情況下，我們不希望類型檢查器對這些值進行檢

查而是直接讓它們通過編譯階段的檢查。 那么我們可以使用 any類型來標記這些變量

let any1 ;    //聲明變量的時候沒有進行初始化操作，無法通過類型推導得出真實類型，通常總是設置為any類型
let any2:any = "我現在是字符串";   //如果某個變量其類型可能會變化，建議使用any類型
any2 = false;

 

Null 和 Undefined

TypeScript里，undefined和null兩者各自有自己的類型分別叫做undefined和null。 和 void相似，它們的本身的類型用處不是很大：

// Not much else we can assign to these variables!
let u: undefined = undefined; let n: null = null;