基本類型

一.最最基礎(chǔ)的類型

• 布爾、數(shù)字、字符串類型

let bool:boolean = true;

let num:number = 10;

let str:string = 'hello world';

二.元組類型

• 限制長(zhǎng)度個(gè)數(shù)、類型一一對(duì)應(yīng)，ts中自己實(shí)現(xiàn)的，內(nèi)容固定，類型固定

let tuple:[string,number,boolean] = ['zf',10,true];

// 像元組中增加數(shù)據(jù)，只能增加元組中存放的類型，就是說你只能Push進(jìn)去你定義過的類型，也不可以通過索引去賦值（不可以tuple[2]=false這樣寫）

tuple.push('回龍觀');

三.數(shù)組類型

• 聲明數(shù)組中元素?cái)?shù)據(jù)類型，兩種聲明方式，可參考arr3和arr4的寫法

let arr1:number[] = [1,2,3];

let arr2:string[] = ['1','2','3'];

let arr3:(number|string)[] = [1,'2',3]; // 這個(gè)叫做聯(lián)合類型，要記得加括號(hào)哦~

let arr4:Array<number | string> = [1,'2',3]; // 泛型方式來聲明

let arr5:any[] = ['', 1, {}] // 如果是無規(guī)律的，沒得辦法咯~

四.枚舉類型

• ts最終會(huì)被編譯成JS，是沒有類型的，枚舉只是在開發(fā)時(shí)候使用

• 寫好以后，經(jīng)過編譯，會(huì)變成一個(gè)對(duì)象

• 枚舉可以支持反舉，但是限于索引，會(huì)根據(jù)上一個(gè)的值進(jìn)行自動(dòng)推斷

• 大寫是規(guī)范

• 使用賦值聲明（const）的話，不會(huì)生成一個(gè)對(duì)象更簡(jiǎn)潔

enum USER_ROLE {

    USER, // 默認(rèn)從0開始

    ADMIN,

    MANAGER

}

// {0: "USER", 1: "ADMIN", 2: "MANAGER", USER: 0, ADMIN: 1, MANAGER: 2}

• 可以枚舉，也可以反舉

// 編譯后的結(jié)果

(function (USER_ROLE) {

    USER_ROLE[USER_ROLE["USER"] = 0] = "USER";

    USER_ROLE[USER_ROLE["ADMIN"] = 1] = "ADMIN";

    USER_ROLE[USER_ROLE["MANAGER"] = 2] = "MANAGER";

})(USER_ROLE || (USER_ROLE = {}));

• 異構(gòu)枚舉

enum USER_ROLE {

    USER = 'user',

    ADMIN = 1,

    MANAGER,

}

• 常量枚舉

const enum USER_ROLE {

    USER,

    ADMIN,

    MANAGER,

}

console.log(USER_ROLE.USER)// console.log(0 /* USER */);

五.any類型

• 不進(jìn)行類型檢測(cè)

let arr:any = ['jiagou',true,{name:'zf'}]

六.null 和 undefined

• 任何類型的子類型,如果strictNullChecks的值為true，但是tsconfig嚴(yán)格模式下，則不能把null 和 undefined賦值給其他類型，

let name:number | boolean;

name = null;

七.void類型

• 只能接受null，undefined。一般用于函數(shù)的返回值

let a:void;

a = undefined;

• 嚴(yán)格模式下不能將null賦予給void

八.never類型

• 任何類型的子類型,never代表不會(huì)出現(xiàn)的值。不能把其他類型賦值給never
• 出錯(cuò)，死循環(huán)，永遠(yuǎn)走不到的判斷就是never類型
• 它也是其他類型的子類型，但是一般很少用

function error(message: string): never {

    throw new Error("err");

}

function loop(): never {

    while (true) { }

}

function fn(x:number | string){

    if(typeof x == 'number'){

    }else if(typeof x === 'string'){

    }else{

        console.log(x); // never

    }

}

九.Symbol類型

• Symbol表示獨(dú)一無二

const s1 = Symbol('key');

const s2 = Symbol('key');

console.log(s1 == s2); // false

十.BigInt類型

const num1 = Number.MAX_SAFE_INTEGER + 1;

const num2 = Number.MAX_SAFE_INTEGER + 2;

console.log(num1 == num2)// true，因?yàn)樗鼈円呀?jīng)超過了最大值了，所以我們用下面的寫法

let max: bigint = BigInt(Number.MAX_SAFE_INTEGER)

console.log(max + BigInt(1) === max + BigInt(2))

• number類型和bigInt類型是不兼容的
  
  

十一.object對(duì)象類型

• object表示非原始類型

let create = (obj:object):void=>{}

create({});

create([]);

create(function(){})

聯(lián)合類型

一.類型推導(dǎo)

• 聲明變量沒有賦予值時(shí)默認(rèn)變量是any類型

let name; // 類型為any

name = 'zhufeng'

name = 10;

• 聲明變量賦值時(shí)則以賦值類型為準(zhǔn)

let name = 'zhufeng'; // name被推導(dǎo)為字符串類型

name = 10;

二.包裝對(duì)象

• 我們?cè)谑褂没緮?shù)據(jù)類型時(shí)，調(diào)用基本數(shù)據(jù)類型上的方法，默認(rèn)會(huì)將原始數(shù)據(jù)類型包裝成對(duì)象類型

let bool1:boolean = true;

let bool2:boolean = Boolean(1);

let bool3:Boolean = new Boolean(2);

• boolean是基本數(shù)據(jù)類型 , Boolean是他的封裝類

三.聯(lián)合類型

• 在使用聯(lián)合類型時(shí)，沒有賦值只能訪問聯(lián)合類型中共有的方法和屬性
• 使用場(chǎng)景：在取值的時(shí)候會(huì)遇到聯(lián)合類型
• !表示此值非空（ele!.innerHtml = ''），可做非空斷言，就是你認(rèn)為這個(gè)一定有，有問題了你來?yè)?dān)責(zé)任
• 強(qiáng)轉(zhuǎn)類型在下圖
• 最常用的：ele?.style?.color 等同于 ele && ele.style && ele.style.color
• false ?? true // 表示排除null 和 undefined

let name:string | number // 聯(lián)合類型

console.log(name!.toString()); // 公共方法

name = 10;

console.log(name!.toFixed(2)); // number方法

name = 'aaaaa';

console.log(name!.toLowerCase()); // 字符串方法

let ele: HTMLElement | null = document.getElementById('#app');

ele!.style.color = 'red'; // 斷定ele元素一定有值

四.類型斷言

• 類型斷言

let name: string | number;

(name! as number).toFixed(2); // 強(qiáng)制

((<number>name!).toFixed(2));

• 盡量使用第一種類型斷言因?yàn)樵趓eact中第二種方式會(huì)被認(rèn)為是jsx語法

• 雙重?cái)嘌?/p>

let name: string | boolean;

((name! as any) as string);

• 盡量不要使用雙重?cái)嘌裕瑫?huì)破壞原有類型關(guān)系，斷言為any是因?yàn)閍ny類型可以被賦值給其他類型

五.字面量類型

type Direction = 'Up' | 'Down' | 'Left' | 'Right';

let direction:Direction = 'Down';

• 可以用字面量當(dāng)做類型，同時(shí)也表明只能采用這幾個(gè)值（限定值）。類似枚舉。
  
  

函數(shù)類型

一.函數(shù)的兩種聲明方式

• 通過function關(guān)鍵字來進(jìn)行聲明

function sum(a: string, b: string):string {

    return a+b;

}

sum('a','b')

• 可以用來限制函數(shù)的參數(shù)和返回值類型

• 通過表達(dá)式方式聲明

type Sum = (a1: string, b1: string) => string;

let sum: Sum = (a: string, b: string) => {

    return a + b;

};

二.可選參數(shù)

let sum = (a: string, b?: string):string => {

    return a + b;

};

sum('a'); // 可選參數(shù)必須在其他參數(shù)的最后面

三.默認(rèn)參數(shù)

let sum = (a: string, b: string = 'b'): string => {

    return a + b;

};

sum('a'); // 默認(rèn)參數(shù)必須在其他參數(shù)的最后面

四.剩余參數(shù)

const sum = (...args: string[]): string => {

    return args.reduce((memo, current) => memo += current, '')

}

sum('a', 'b', 'c', 'd')

五.函數(shù)的重載

function toArray(value: number): number[]

function toArray(value: string): string[]

function toArray(value: number | string) {

    if (typeof value == 'string') {

        return value.split('');

    } else {

        return value.toString().split('').map(item => Number(item));

    }

}

toArray(123); // 根據(jù)傳入不同類型的數(shù)據(jù) 返回不同的結(jié)果

toArray('123');

總結(jié)

以上是生活随笔為你收集整理的深入Typescript--02-Typescript数据类型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。