Typescript：基本型別

xthought發表於2019-02-16
TypeScript型別

介紹

在TypeScript中，提供了以下基本資料型別：

  • 布林型別
  • 數字型別
  • 字串型別
  • 陣列型別
  • 元組型別
  • 列舉型別
  • 任意值型別
  • null和undefined
  • void型別
  • never型別

其中元組、列舉、任意值、void型別和never型別是TypeScript有別於JavaScript的特有型別。

布林型別

布林型別是最簡單的資料型別，只有true和false兩種值。下面定義了一個布林類值的變數flag，並賦值為true。由於flag被初始化為布林型別，如果再賦值為非boolean的其他型別值，編譯時會丟擲錯誤。

let flag:boolean = true;
flag = 1; //報錯，不能把數字型別的值賦給布林型別的變數。

數字型別

在TypeScript中，數字都是浮點型。TypeScript同時支援二進位制、八進位制、十進位制和十六進位制字面量，示例程式碼如下：

let binaryLiteral:number = 0b1010;//二進位制
let octalLiteral:number = 0o744;//八進位制
let decLiteral:number = 6;十進位制
let hexLiteral:number = 0xf00d;//十六進位制

字串型別

TypeScript支援使用單引號（‘）或者雙引號（“）來表示字串型別。除此之外，還支援使用模版字串反引號（`）來定義多行文字和內嵌表示式。使用${expr}的形式嵌入變數或者表示式，在處理拼接字串的時候很有用，示例程式碼如下。

let name: string = "Angular";
let years:number = 5;
let words:stirng = `你好，今年是${name}釋出${years+1}週年`;

陣列型別

TypeScript像JavaScript一樣可以運算元組元素。 有兩種方式可以定義陣列。

第一種，可以在元素型別後面接上 []，表示由此型別元素組成的一個陣列：

let list: number[] = [1, 2, 3];

第二種方式是使用陣列泛型，Array<元素型別>：

let list: Array<number> = [1, 2, 3];

元組型別

元組型別用來表示已知元素數量和型別的陣列，各元素的型別不必相同，下面定義了一對值分別為字串和數字型別的元組。

let x:[string,number];
x = ["Angular",24];

x = [10,"Angular"];//報錯

console.log(x[0]);  //輸出Angular

列舉型別

列舉是一個可被命名的整型常數的集合，列舉型別為集合成員賦予有意義的名稱，增強可讀性。

enum Color {Red, Green, Blue}
let c: Color = Color.Blue;
console.log(c);//輸出：2

列舉預設下標是0，可以手動修改預設下標值

enum Color {Red=2, Blue, Green=6}
let c: Color = Color.Blue;
console.log(c);//輸出：3

任意值型別

任意值是TypeScript針對程式設計時型別不明確的變數使用的一種資料型別，它常用於以下二種情況。

① 變數的值動態變化時，比如來自使用者的輸入或者第三方程式碼庫，任意值型別可以讓這些變數跳過編譯階段的型別檢查

let x:any = 1;//數字型別
x = "I am a string"; //字串型別
x = false; //布林型別

② 定義儲存各種型別資料的陣列時

let arrayList:any[] = [1,falses,"fine"];
arrayList[1] = 100;

Void

function warnUser(): void {
    alert("This is my warning message");
}

宣告一個void型別的變數沒有什麼大用，因為你只能為它賦予undefined和null：

let unusable: void = undefined;
let unusable: void = null;

Null 和 Undefined

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

let u: undefined = undefined;
let n: null = null;

undefined 型別的變數只能被賦值為 undefined，null 型別的變數只能被賦值為 null。

與 void 的區別是，undefined 和 null 是所有型別的子型別。也就是說 undefined 型別的變數，可以賦值給 number 型別的變數，但是儘量不要這麼用。

// 這樣不會報錯
let num: number = undefined;

// 這樣也不會報錯
let u: undefined;
let num: number = u;

而 void 型別的變數不能賦值給 number 型別的變數：

let u: void;
let num: number = u;

// index.ts(2,5): error TS2322: Type `void` is not assignable to type `number`.

型別推論

如果沒有明確的指定型別，那麼 TypeScript 會依照型別推論（Type Inference）的規則推斷出一個型別。
以下程式碼雖然沒有指定型別，但是會在編譯的時候報錯：

let myFavoriteNumber = `seven`;
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type `number` is not assignable to type `string`.

事實上，它等價於：

let myFavoriteNumber: string = `seven`;
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type `number` is not assignable to type `string`.

聯合型別

聯合型別（Union Types）表示取值可以為多種型別中的一種。

let myFavoriteNumber: string | number;
myFavoriteNumber = `seven`;
myFavoriteNumber = 7;
let myFavoriteNumber: string | number;
myFavoriteNumber = true;

// index.ts(2,1): error TS2322: Type `boolean` is not assignable to type `string | number`.
//   Type `boolean` is not assignable to type `number`.

聯合型別使用 | 分隔每個型別。

這裡的 string | number 的含義是，允許 myFavoriteNumber 的型別是 string 或者 number，但是不能是其他型別。

聯合型別的屬性或方法

當 TypeScript 不確定一個聯合型別的變數到底是哪個型別的時候，我們只能訪問此聯合型別的所有型別裡共有的屬性或方法：

function getLength(something: string | number): number {
  return something.length;
}

// index.ts(2,20): error TS2339: Property `length` does not exist on type `string | number`.
//   Property `length` does not exist on type `number`.

上例中，length 不是 string 和 number 的共有屬性，所以會報錯。

訪問 string 和 number 的共有屬性是沒問題的：

function getString(something: string | number): string {
  return something.toString();
}

聯合型別的變數在被賦值的時候，會根據型別推論的規則推斷出一個型別：

let myFavoriteNumber: string | number;
myFavoriteNumber = `seven`;
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 編譯時報錯

// index.ts(5,30): error TS2339: Property `length` does not exist on type `number`.

上例中，第二行的 myFavoriteNumber 被推斷成了 string，訪問它的 length 屬性不會報錯。

而第四行的 myFavoriteNumber 被推斷成了 number，訪問它的 length 屬性時就報錯了。

相關文章