在學習TypeScript之前,我們需要先知道怎么才能讓TypeScript寫的東西正確的運行起來。有兩種方式:使用Visual studio 和使用 NodeJs。
這里我選擇的是NodeJs來編譯TypeScript,因為我筆記本上的VS是2012的,在TypeScript的官網看到下載是TypeScript for VS2013和TypeScript for VS2015。額,順帶貼上TypeScript的官網,有需要的去下載。
然后使用NodeJs編譯TypeScript的方法:
// 安裝 install : npm install -g typescript // 編譯 compile : tsc your.ts
使用VS的限於VS版本2013及2015的,可以下載相關組件,然后新建"TypeScriptFile"。在.ts文件下會有個.js文件,.js就是自動編譯后的文件了,然后html引用.js文件即可。
為了讓程序可運行,我們需要使用一些數據的基本類型:numbers, strings, structures, boolean等。TypeScript支持這些在JavaScript中會用到的數據類型,並且還提供了實用的枚舉類型。
Boolean(布爾類型)
最基本的數據類型是簡單的true/false,在JavaScript和TypeScript(其他語言也一樣)中稱為"boolean"類型。
var isDone:boolean = false;
Number(數字)
正如在JavaScript中,在TypeScript中的數值也都是浮點數。這些浮點數都是"number"類型的。
var height: number = 6;
String(字符串)
在JavaScript編寫網頁或者服務端程序中,另外一個重要的部分便是文本類型數據。和其他語言一樣,我們使用字符串(string)來指代這些文本類型的數據。和JavaScript相同,TypeScript也是用雙引號("")或者單引號('')來包含字符串數據。
var name: string = "bob"; name = 'smith';
Array(數組)
TypeScript和JavaScript一樣,允許使用數組來含括一系列的值。有兩種不同的方式來寫一個數組。第一種是在元素類型后面用中括號([])來表示這種類型元素的數組:
var list:number[] = [1,2,3,4];
第二種是使用泛型創建類型數組,Array<elemType/ *數組元素的類型* />:
var list:Array<number> = [1, 2, 3];
Enum(枚舉)
在JavaScript原生的標准數據集之外,TypeScript增加了一個很實用的"enum"類型。比如C#,枚舉給了我們更友好的名稱(數字類型)來辨別數值集合。
enum Color {Red, Green, Blue}; var c: Color = Color.Green;
默認情況下,枚舉中的元素是從0開始編號的。你可以通過手動設置元素的這個值。比如,我們現在設置從1開始,而非原先例子中的0:
enum Color {Red = 1, Green, Blue}; var c: Color = Color.Green;
或者,即使是手動設置所有枚舉元素的數值都是可以的:
enum Color {Red = 1, Green = 2, Blue = 4}; var c: Color = Color.Green;
枚舉類型有個便捷的特性,你可以通過數值來查找枚舉中的對應的元素名稱。我們看例子,假如我們有一個數值是2,但我們不知道在上面的枚舉中對應的是哪個元素,那么我們可以查找相對應的名稱:
enum Color {Red = 1, Green, Blue}; var colorName: string = Color[2]; alert(colorName);
Any
當我們編寫應用程序的時候,我們可能需要描述一些不明確類型的變量。這些變量可能來自動態的內容,比如用戶提供或者第三方庫。在這些情況下,我們想要跳出類型檢查並且讓這些值通過編譯時的檢查。為了實現這個目的,我們使用"Any"類型來標識這些值:
var notSure: any = 4; notSure = "maybe a string instead"; // 現在是string類型 notSure = false; // 現在是boolean類型
"any"類型對於處理我們現有的JavaScript代碼很有好用,可以用它來控制編譯時是否增加還是減少數據的類型檢查。
如果你僅知道一部分數據類型而非全部數據類型,那么使用"any"類型是很方便的。例如,你可能有個數組,但這個數組的元素又是對應不同的數據類型。
var list:any[] = [1, true, "free"]; list[1] = 100;
Void
與"any"類型相對的是"void"類型,它代表沒有任何類型。你也許經常看到它作為個不返回值的函數:
function warnUser(): void { alert("This is my warning message"); }