總覽

TypeScript是Javascript語言的擴展，在JS的基礎上增加了類型校驗，因此我們在聲明變量時需要同時指定變量的類型。一般我們聲明一個帶有類型的變量時會使用如下方式:

<code>// 在變量名後面添加冒號和類型，即可指定一個變量的類型
let a: number = 8; 
const b: string = '這是一個字符串';/<code>

TypeScript 總共有如下 12 種類型，為了方便記憶，可以將其分為 2 類：

一種JS中經常使用的 7 種類型：

• number 數值類型
• boolean 布爾類型
• string 字符串類型
• undefined & null
• array 數組類型
• object 對象類型

還有新增加的5種類型

• Any
• Void
• Never
• Tuple
• Enum

下面我們依次來講解。

number & boolean & string

這三種類型是最常見的基本類型，即數值型、布爾型和字符串型。使用方法如下：

<code>let count: number = 123; // 數值型
const isOk: boolean = false; // 布爾型，可以賦值 true/false
let name: string = 'zhangsan';/<code>

一旦確定了類型之後，變量就只能接受同樣類型的值，不然會報錯。例如，把一個字符串賦值給number類型的變量，就會報錯。

<code>let a: number = 99;
a = 'zhangsan';/<code>

我們會收到代碼報錯信息：變量值 ‘zhangsan’ 的類型是字符串，不能賦值給 number 類型。

變量類型不符合的報錯

null 和 undefined

undefined 就是我們在js中常見的 undefined 類型，而 null 則是把js 中的 null 變量值變成了一種類型。這兩種類型一般很少單獨使用, 因為只能把對應的值傳給他們。

<code>let unde: undefined = undefined;
let nullvalue: null = null;/<code>

array 數組類型

數組類型就是js中的數組，需要注意的是，在聲明一個array變量時，同時需要指定數組內元素的類型。聲明數組變量時有兩種方式：Array<type> 或者 type[] :

<code>let array1: Array<number> = [ 1, 2, 3 ];
// 也可以這樣聲明
let array2: number[] = [ 4, 5, 6 ];/<number>/<code>

我們已經指定了數組中的元素類型是 number，如果再次賦值會報錯：

<code>// 賦值為字符串
array2[1] = 'zhangsan';
// Error: Type '"zhangsan"' is not assignable to type 'number'.

/<code>

TypeScript還允許我們把一個數組變量聲明為

<code>const readonlyArray: ReadonlyArray<number> = [ 1, 2 ];
readonlyArray[1] = 99;/<number>/<code>

這時候會報錯：

給只讀數組賦值會報錯

object類型

還有一種類型是 object 類型，就是我們在js中經常使用的對象。如下：

<code>const object1: object = new Object();
const object2: object = {
    name: 'zhangsan'
};/<code>

這種類型在TypeScript中並不常用，因為如果我們使用對象中的某個屬性，會報錯：

因為在object類型中並沒有name屬性，我們只能使用類似於hasOwnProperty() 這種方法。最好的辦法是將對象聲明為 any 類型，這個後面會講述。

下面會講述TypeScript新增加的 5 種基本類型。

Any

any 表示變量可以是任何類型，當我們不知道是什麼類型時，或者給變量指定了某種類型會報錯時，可以為此變量指定 any 類型。對於一個對象，我們可以指定為 any 類型，就可以使用對象裡面的屬性了。 一般情況下，只要給變量指定 any ，就不會報任何錯誤了。

<code>const object2: any = {
    name: 'zhangsan'
};
object2.name = '3636';/<code>

Void

void 用於函數整體，表示該函數沒有任何返回值。

不要給變量使用 void , 因為聲明為 void 類型的變量，只能賦值為 null 或 undefined 。

<code>function warnUser(): void {
    console.log("This is my warning message");
}/<code>

Never

never 也是用於函數整體的，表示該函數永遠不會正常結束或返回。當一個函數里面是一個死循環或者直接報錯時，可以將函數整體設置為 never :

<code>// Function returning never must have unreachable end point
function error(message: string): never {
    throw new Error(message);
}
// Function returning never must have unreachable end point
function infiniteLoop(): never {
    while (true) {
    }
}/<code>

Tuple

tuple 的意思是元組，其實是用一個數組來表示變量的類型，數組中元素的類型已經確定。如下代碼：

<code>let x: [ string, number ]; 

x = [ 'hello', 10 ] // ok

// 如果給變量賦值為不一致的數組類型，則會報錯
x = [ 1, 2 ] // 報錯 /<code>

Enum

enum 表示枚舉類型，表示特定的值的集合，其實枚舉類型的本質上就是一個對象。如下聲明一個Color枚舉：

<code>enum Color { Red, Green, Blue };
let a = Color.Red;/<code>

實際上生成的對象如下：

<code>{ 
  0: 'Red', 1: 'Green', 2: 'Blue',
  Red: 0, Green: 1, Blue: 2
}/<code>

所以也可以通過索引去使用枚舉類型的值：

<code>console.log(Color[2]);
// Blue/<code>

我們可以手動指定每個值的索引：

<code>enum Color { Red, Green = 5, Blue };
console.log(Color[5]); // Green
console.log(Color[6]);  // Blue/<code>

總結

以上就是TypeScript中的所有基本類型，做一下總結：

1. 常見的 7 種類型：number、string、boolean、array、object、undefined、null
2. 專門用於函數的 2 種類型: void、never
3. 新增的 3 種類型：元組tuple(其實就是特定的數組)、枚舉 enum、表示任意類型的 any

類型轉換

有時候我們可能需要將一種類型的當做另一種類型來使用，比如

<code>const object2: object = {
    name: 'zhangsan'
};
console.log(object2.name);/<code>

這時候會報錯:

這時候我們可以告訴TypeScript我們的使用方法沒有錯，即把 object2 強制斷定為其他類型，

有兩種方式可以做：

• 尖括號：<type> + 變量名/<type>

<code>console.log((object2).name);/<code>

• as 操作符：變量名 as type

<code>console.log((object2 as any).name);/<code>

注意：在Vue中使用時，有時使用尖括號可能會與jsx語法衝突，此時最好使用 as 語法。

閱讀更多 一起學前端 的文章

關鍵字: 學習 JavaScript 類型