Typescript 學習筆記二：數據類型

中文網：https://www.tslang.cn/

官網：http://www.typescriptlang.org/

目錄：

• Typescript 學習筆記一：介紹、安裝、編譯
• Typescript 學習筆記二：數據類型
• Typescript 學習筆記三：函數
• Typescript 學習筆記四：回憶Es5 中的類
• Typescript 學習筆記五：類
• Typescript 學習筆記六：接口
• Typescript 學習筆記七：泛型

前言

typescript中爲了使編寫的代碼更規範，更有利於維護，增長了類型校驗，寫 ts 代碼必須指定類型。

在typescript中主要給咱們提供瞭如下數據類型:

• boolean（布爾類型）
• number（數字類型）
• string（字符串類型）
• array（數組類型）
• tuple（元組類型）
• enum（枚舉類型）
• any（任意類型）
• null 和 undefined 類型
• void 類型
• never 類型
• object 對象類型

boolean（布爾類型）

• ES5 的寫法：

var flag = true;
flag = 456;

• ts 寫法：以上的 ES5 寫法到了 ts 中就變成了錯誤的寫法，由於將一個 number 類型值賦給了一個 Boolean 的變量。

let flag:boolean = true;
// flag = 123; // 錯誤
flag = false;  //正確

number（數字類型）

• ES5 的寫法：

var num = 123;
num = 456;

• ts 寫法：

let num:number = 123;
// num = '456'; // 錯誤
num = 456;  //正確

string（字符串類型）

• ES5 的寫法：

var str = 'this is ts';
str = 'test';

• ts 寫法：

let str:string = 'this is ts';
str = 'test';

array（數組類型）

• ES5 的寫法：

var arr = ['12', '23'];
arr = [34, 45];

• ts 寫法1：

let arr:string[] = ['12', '23'];
arr = ['45', '56'];

• ts 寫法2：

let arr:Array<number> = [1, 2];
arr = ['45', '56'];

tuple（元組類型）:屬於數組的一種

let tupleArr:[number, string, boolean] = [12, '34', true];

賦值的類型、位置、個數須要和定義（生明）的類型、位置、個數一致。

enum（枚舉類型）

隨着計算機的不斷普及，程序不只只用於數值計算，還更普遍地用於處理非數值的數據。
例如：性別、月份、星期幾、顏色、單位名、學歷、職業等，都不是數值數據。在其它程序設計語言中，通常用一個數值來表明某一狀態，這種處理方法不直觀，易讀性差。

若是能在程序中用天然語言中有相應含義的單詞來表明某一狀態，則程序就很容易閱讀和理解。
也就是說，事先考慮到某一變量可能取的值，儘可能用天然語言中含義清楚的單詞來表示它的每個值，
這種方法稱爲枚舉方法，用這種方法定義的類型稱枚舉類型。

定義：

enum 枚舉名 { 
    標識符[=整型常數], 
    標識符[=整型常數], 
    ... 
    標識符[=整型常數]
};

舉例：

enum statusCode {
  success,
  fail,
  pending
};
let res:statusCode = statusCode.success;
console.log(res); // 0，若是標識符沒有賦值，它的值就是下標，默認從 0 開始

enum statusCode {
  success = 2,
  fail,
  pending
};
let res1:statusCode = statusCode.success;
console.log(res1) // 2，指定的值
let res3:statusCode = statusCode.fail;
console.log(res1) // 3，若沒指定，從指定的日後開始

enum statusCode {
  success = 2,
  fail = 1,
  pending = 3
};
let res1:statusCode = statusCode.success;
console.log(res1) // 2，指定的值
let res3:statusCode = statusCode.fail;
console.log(res1) // 1，指定的值，可隨意指定

any（任意類型）

表示能夠指定任何類型的值。通常用於聲明 dom 節點。

let num:any = 123;
num = 'str';
num = true;

let boxEl:object = document.getElementById('box'); // 錯誤，dom 節點不是真正的對象
let boxEl:any = document.getElementById('box'); // 正確
boxEl.style.color = 'pink';

null 和 undefined 類型

默認狀況下null和undefined是全部類型的子類型。 就是說你能夠把 null 和 undefined 賦值給 number 類型的變量。

通常用於可能爲 undefined 或 null 的變量。

• undefined: 定義沒有賦值就是 undefined

let num:number;
console.log(num); // 輸出：undefined 報錯

let num:undefined;
console.log(num); // 輸出：undefined 正確

let num:number | undefined; // | 表示或者
console.log(num); // 正確
num = 123;
console.log(num); // 正確

• null

let num:null;
num = null;

• 一個變量多是 number 類型，多是 null，多是 undefined

let num:number | null | undefined;
num = 1234;

void 類型

typescript 中的 void 表示沒有任何類型，通常用於定義方法的時候方法沒有返回值。

• ES5 的寫法：

function fn () {
  console.log('fn');
}
fn();

• ts 的寫法：

無返回值

function fn ():void { // 正確的寫法
  console.log('fn);
}
fn();

function fn ():undefined { // 錯誤的寫法
  console.log('fn);
}
fn();

函數沒有返回值的時候，只能爲 void，不能爲 undefined。

有返回值

function fn ():number {
  return 123;
}
console.log(fn());

never 類型

typescript 中的 never 是其餘類型 （包括 null 和 undefined）的子類型，能夠賦值給任何類型，表明從不會出現的值。可是沒有類型是 never 的子類型，這意味着聲明 never 的變量只能被 never 類型所賦值。

never 類型通常用來指定那些老是會拋出異常或根本就不會有返回值的函數表達式或箭頭函數表達式的返回值類型。

let a:never;
a = 123; // 錯誤的寫法

a = (() => { // 正確的寫法
  throw new Error('錯誤');
})()

object 對象類型

let obj:object;
obj = {name: 'Wang', age: 25};