1. 程式人生 > >Typescript 學習筆記二:資料型別

Typescript 學習筆記二:資料型別

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

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

目錄:

前言

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};