TS 的類型聲明和變量類型

  一、類型聲明

　類型聲明是 TS 非常重要的一個特點，通過類型聲明可以指定 ts 中變量（參數、形參）的類型

　當為變量賦值時，TS編譯器會自動檢查值是否符合類型聲明，符合則賦值，否則報錯

　簡而言之，類型聲明給變量設置了類型，使得變量只能出存儲某種類型的值，這是 JS 不具備的

語法：

• 直接在變量聲明后面加

let a: number;
a = 7;
a = 'luck';//此行代碼會報錯

• 如果變量的聲明和賦值是同時進行的，TS 可以自動對變量進行類型檢測

let a = true;
a = false;

• 可以對函數參數和返回值的類型進行聲明

function sum(a: number, b: number): number{
    return a + b;
}

 

  二、變量類型

　　

 1、字面量

let a1: 10;  
a1 = 10;
//后面使用時不可修改，類似常量

//可以使用 | 來連接多個類型（聯合類型），表示‘或’
let b1: "male" | "female";
b1= "male";
b1= "female";

let c1 : boolean | string;
c1 = true;
c1 = 'hello';

 

2、any —— 任意類型

    一個變量設置類型為any后相當於對該變量關閉了TS的類型檢測

// let d:any;（顯示的any）

//聲明變量如果不指定類型，則TS解析器會自動判斷變量的類型為any（隱式的any）
let d;
d = 10;
d = 'hello';
d = 'true';

 

3、unknown —— 未知類型

　實際上就是一個類型安全的any

let e: unknown;
e = 10;
e = true;
e = "hello";

 　any類型的變量可以賦值給任意變量；但unknown 類型的變量不能直接賦值給其他變量

let s:string;

//d的類型是any，它可以賦值給任意變量
let d;
s = d;

let e: unknown;
e = 'hello';
s = e;//會報錯，e的類型是unknown，不能直接賦值給其他變量

if (typeof e === "string") {
    s = e;
}

　類型斷言 —— 可以用來告訴解析器變量的實際類型

/*
語法：
    變量 as 類型
    <類型>變量
*/
s = e as string;
s = <string>e;

 

4、void —— 表示空值

　以函數為例，就表示沒有返回值（或返回undefined）的函數

function fn2(): void{

}

 

5、never

　表示永遠不會返回結果；沒有值（比較少用，一般是用來拋出錯誤）

function fn3(): never{
    throw new Error("報錯了！");
}

 

6、object

　用來指定對象中可以包含哪些屬性

/*  
    語法：{屬性名：屬性值，屬性名：屬性值}
    在屬性名后面加上？，表示屬性是可選的
*/
let b: {name: string, age?:number};

b = {}; //沒有的話就會報錯
b = {name: "孫悟空", age: 18};

let c1: {name: string, a?:number, b?:number};
c1 = {name:"豬八戒", a:1, b:2,c:3} //會報錯，多余了c

//[propName: string]: any 表示可以多余任意類型的屬性
let c: {name: string, [propName: string]: any}
c = {name:"豬八戒", age: 18, gender: '男'}

 

7、array

/* 
    數組的類型聲明：
        類型[]
        Array<類型>
*/

//string[] 表示字符串數組
let e1:string[];
e1 = ['a','b','c'];

//number[] 表示數值數組
let f: number[];

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

 

8、tuple（ts新增類型）

　就是固定長度的數組

/* 
    語法：[類型， 類型， 類型]
*/

let h: [string, number];
h = ['hello', 123];

 

9、enum（ts新增類型）

　枚舉可以把所有可能的值都列舉出來

enum Gender{ //定義枚舉類型可以把所有可能的值都列舉出來
    Male = 0,
    Female = 1,
}

let i: {name: string, gender: Gender};
i = {
    name: '孫悟空',
    gender: Gender.Male
}

console.log(i.gender === Gender.Male)