1. 程式人生 > >Study TypeScript《1、基礎資料型別》

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 元組

元組型別允許表達固定數量的已知型別集合,但這些型別不必是相同的。例如,您可能想表示一個'stringnumber`組合的型別:

// 宣告一個元組型別
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;

感謝翻譯