Study TypeScript《1、基礎資料型別》
概述
為了讓程式更易用,我們相容幾種最基本的資料型別:numbers(數字),strings(字串),structures(結構),boolean(布林值)等等。在 TypeScript 中,我們支援和 Javascript 幾乎一樣多的型別,並且新增了實用的列舉型別。
Boolean 布林值
最基礎的資料型別就是簡單的 true(真)/false(假) ,在 Javascript 和 TypeScript (以及其他語言)中被稱作是 "boolean(布林值)"。
var isDone: boolean = false;
Number 數字
和 Javascript 一樣,在 TypeScript 中所有的number都是浮點值。 TypeScript 除了支援ECMAScript 2015中的十六進位制和十進位制外,還支援二進位制和二進位制型別。
var decLiteral: number = 6; var hexLiteral: number = 0x9837abdef; var binaryLiteral: number = 0b0010; var octalLiteral: number = 0o74563;
String 字串
在使用JavaScript建立網頁或應用程式時,要用到很基礎的功能是處理字串,和其他語言一樣,我們使用 "string" 型別來表示那些文字資料。和 JavaScript 一樣,TypeScript 也使用雙引號或單引號來圍繞字串資料。
var name: string = "bob"; name= 'smith';
你也可以使用 模板字串,他能支援多行文字和內嵌表示式。這些字串使用單引號(`
)包圍,並且嵌入的表示式使用${ expr }
這樣的形式表示。
var name: string = `Gene`; var age: number = 37; var sentence: string = `Hello, my name is ${ name }. I'll be ${ age + 1 } years old next month.`
上面的表示式相當於下面的宣告方式:
var sentence: string = "Hello, my name is " + name + ".\n\n" +
"I'll be " + (age + 1) + " years old next month."
Array 陣列
TypeScript 和 Javascript 一樣,允許你使用陣列。陣列型別的定義可以有兩種寫法。第一種寫法,你在陣列元素型別後面新增‘[]’來表示這是一個該型別的陣列:
var list: number[] = [1, 2, 3];
第二種寫法使用一種通用的陣列型別表示,Array<陣列元素型別>:
var list: Array<number> = [1, 2, 3];
Tuple 元組
元組型別允許表達固定數量的已知型別集合,但這些型別不必是相同的。例如,您可能想表示一個'string和
number`組合的型別:
// 宣告一個元組型別 var x: [string, number]; // 初始化他 x = ['hello', 10]; // 準確 // 錯誤的初始化 x = [10, 'hello']; // 錯誤
我們可以使用數字檢索一個已知的元素,但需要注意型別正確。
console.log(x[0].substr(1)); // 正確 console.log(x[1].substr(1)); // 錯誤,'number' 型別沒有 'substr' 方法
當訪問的索引超過邊界時,將使用聯合型別處理:
x[3] = 'world'; // 正確,string允許被分配到 (string | number) console.log(x[5].toString()); // 正確,'string' 和 'number' 都有 toString 方法 x[6] = true; // 錯誤,布林值不是 (string | number) 中的一種
聯合型別是更高階的議題,我們會在後續的章節中介紹。
Enum 列舉
TypeScript拓展了JavaScript原生的標準資料型別集,增加了列舉型別(enum)。列舉是一種很有用的資料型別,就像C#等語言中一樣,它提供了一種給數字型別的值,設定易於辨別的名字的方法。
enum Color {Red, Green, Blue}; var c: Color = Color.Green;
在預設情況下,列舉型別會從數字0開始標記它的元素。我們可以通過人為地設定元素的數值來改變預設值。例如,上面的例子我們可以設定成從1開始計數:
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"; notSure = false; // okay, definitely a boolean
使用'any'型別是處理我們已有的JavaScript程式碼的一種強大的方式,我們可以用它來逐漸增加或減少在編譯過程中的型別檢查。 就像其他程式語言那樣,你可能期望使用Object
來實現這個功能,但是注意在JavaScript中,Object
型別僅僅允許分配任意值給他,但不能呼叫他的存在或可能的任何方法:
var notSure: any = 4; notSure.ifItExists(); // 沒問題,在執行時有可能有 ifItExists 這個方法 notSure.toFixed(); // 沒問題,toFixed 是真實存在的方法 (但是編譯器不會驗證準確性) var prettySure: Object = 4; prettySure.toFixed(); // 錯誤,不行就是不行了,使用any吧
當我們知道一個型別的部分資料型別,卻又不確定所有的資料型別時,使用'any'可以為我們提供不少方便。比如你有一個數組,但是這個陣列中的元素屬於不同的資料型別,那你可以這麼做:
var list: any[] = [1, true, "free"]; list[1] = 100;
Void
void
就像any
的相反面:void就是沒有,any就是所有。沒有返回值的函式就可以認為是'void'型別:
function warnUser(): void { alert("This is my warning message"); }
不建議宣告一個變數是 void
型別,因為這個變數就只能賦值undefined
或 null
。
var unusable: void = undefined;