TypeScript型別系統和基礎型別

qq_43274386發表於2020-12-31

型別系統

相對於與ES6來說,TypeScript中最大的改善就是增加了型別系統,這極大的簡化了我們的開發工作。型別系統會對資料進行型別檢查,以避免不必要的錯誤。
型別檢查的好處有:

  • 有助於程式碼的編寫,因為它可以在編譯期預防bug
  • 有助於程式碼的閱讀,因為它可以清晰地表達我們的意圖

使用的方法

1. 在宣告變數時,可以規定變數所需要的變數型別
語法規則:

變數宣告 變數名:型別;

e.g.

var name:string;
let age:number;
const male:boolean;

當然你也可以賦值:

var name:string='張三';
let age:number=18;
const male:boolean=true;

如果你輸入了錯誤的期望值,那麼會報錯:

var job:string=true;
//Type 'true' is not assignable to type 'string'.

陣列指定變數型別的方式有點兒不一樣,本文下面會有詳細介紹。

2.在宣告函式時,可以為函式引數和返回值指定型別:
語法規則:

function 函式名(變數名:形參型別):返回值型別{}

e.g.

function greet(name:string):string{
    return "hello"+name;
}

如果你輸入了錯誤的引數,那麼會報錯:

greet(18);
//Argument of type '18' is not assignable to parameter of type 'string'.

基礎型別

TS的基礎型別有除了有我們所熟悉的Boolean、Number、String、Array、null 和 undefined,還有新增了enum、any、void、never。

Boolean 布林型別

布林型別只有true(真)和false(假)兩個值。

var male:boolean=true;

Number數字型別

TS所有的數字都是由浮點數表示的,這些數字的型別就是number。

var age:number=18;

String 字串型別

string表示文字資料型別。 和JavaScript一樣,可以使用雙引號( “)或單引號(’)表示字串。

var name:string = "張三";

你還可以使用模板字串 它可以定義多行文字內嵌表示式。 這種字串是被反引號包圍( `),並且以${ expr}這種形式嵌入表示式

模板字串 讓我們不必在字串換行時加上愚蠢的”+”號了,這增加了程式碼的可讀性。

let person:string=`張三今年18;
性別:男;
工作是web前端。`
console.log(person);
//張三今年18;
//性別:男;
//工作是web前端。  

嵌入表示式 則提高了我們程式碼編寫的速率,讓程式碼結構更加清晰。

let name:string="張三";
let greet:string=`你好呀~${name}`
console.log(greet);//你好呀~張三

Array 陣列型別

如果陣列是一組相同資料型別的集合,那麼這個陣列有兩種方式來指定資料型別。

語法規則:

  1. 陣列-型別方式(又名陣列泛型):Array
  2. 型別-陣列方式:type[]
//陣列-型別方式:
    var skills:Array<string>=['ES5','ES6','Angular','Node.js'];
//型別-陣列方式:  
    var hobbies:string[]=['前端','輕音樂','電競','游泳'];

//使用ES6的箭頭函式,遍歷輸出skills的所有值。
    skills.forEach(x=>console.log(x))
//ES5
//ES6
//Angular
//Node.js
    hobbies.forEach(x=>console.log(x))
//前端
//輕音樂
//電競
//游泳

箭頭函式是一種快速書寫函式的簡潔語法,本系列其他文章我們會詳細講解。

如果陣列中的元素資料型別不相同,我們可以稱之為元組(Tuple)。

語法規則:
[type1, type2…typeX]

let x:[string,number,boolean];
x=["hello",1,true];
console.log(x[0])//hello

x=[1,1,1];//報錯
//Type '[number, number, 1]' is not assignable to type '[string, number, boolean]'.
//Type 'number' is not assignable to type 'string'.

列舉型別

列舉型別是一組可以命名數值的集合。使用列舉型別可以為一組數值賦予友好的名字。
預設情況下,從0開始為元素編號:

enum color {red,green,blue};
let c:color=color.green;
console.log(c)//1

當然我們也可以從1(或者其他數)開始編號:

enum color {red=1,green,blue};
let c:color=color.green;
console.log(c)//2

再或者全部手動賦值:

enum color {red=1,green=3,blue=5};
let c:color=color.green;
console.log(c)//3

元素編號是遞增的,指定元素編號的下一個元素總是比指定元素編號要大1。(如果下個元素沒指定編號的話)

enum color {red=1,green=3,blue};
let c:color=color.blue;
console.log(c)//4

同樣,我們可以通過元素編號來獲取元素

enum color {red,green,blue};
let c=color[2];
console.log(c)//blue

Any型別

如果我們沒有為變數指定型別的話,那麼它的預設型別就是any。在TS中,any表示可以接受任何型別的資料:

var something;
//這樣的宣告等同於
var something:any;

Void型別

void型別(又稱為“無”型別)表示我們不期望有型別。一般用於函式的返回值,表示沒有任何返回值。

function shopping(name:string):void{
    //some codes
    }

null和Undefined型別

在TS中,undefined和null兩者各自有自己的型別分別叫做undefined和null。

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

預設情況下null和undefined是所有型別的子型別。 就是說你可以把 null和undefined賦值給number型別的變數。

Never型別

never型別表示的是那麼些永遠不存在的值的型別。更加通俗的講,就是那些總是會丟擲異常或者根本就不會有返回值的函式

變數也可能是 never型別,當它們被永不為真的型別保護所約束時。

never的特性:

  • never 是任何型別的子型別, 並且可以賦值給任何型別.
  • 沒有型別是 never 的子型別或者可以複製給 never (除了 never 本身).
  • 在一個沒有返回值標註的函式表示式或箭頭函式中, 如果函式沒有 return 語句, 或者僅有表示式型別為 never 的 return
    語句, 並且函式的終止點無法被執行到 (按照控制流分析), 則推匯出的函式返回值型別是 never.
  • 在一個明確指定了 never 返回值型別的函式中, 所有 return 語句 (如果有) 表示式的值必須為 never 型別,且函式不應能執行到終止點.
// 返回never的函式必須存在無法達到的終點(丟擲異常,程式提前終止)
function error(message:string): never {
    throw new Error(message);
}

// 推斷的返回值型別為never(永遠不可能執行到最後)
function fail(direction:boolean) {
  if(direction){
    return 1;
    }else{
    return -1;
    }
   return error("永遠不應該到這裡");
}

// 返回never的函式必須存在無法達到的終點(死迴圈,程式不會終止)
function infiniteLoop(): never {
    while (true) {
    }
}

never型別是任何型別的子型別,也可以賦值給任何型別;然而,沒有型別是never的子型別或可以賦值給never型別(除了never本身之外)。
即使 any也不可以賦值給never。

參考資料:
TS官網
TypeScript 2.0 新特性一覽
《Angular權威教程》

相關文章