當前位置：首頁 >

深入Typescript--02-Typescript数据类型

發布時間：2023/10/11 91 老码农

生活随笔收集整理的這篇文章主要介紹了深入Typescript--02-Typescript数据类型小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

基本類型

一.最最基礎的類型

布爾、數字、字符串類型

let bool:boolean = true;

let num:number = 10;

let str:string = 'hello world';

二.元組類型

限制長度個數、類型一一對應，ts中自己實現的，內容固定，類型固定

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

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

tuple.push('回龍觀');

三.數組類型

聲明數組中元素數據類型，兩種聲明方式，可參考arr3和arr4的寫法

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

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

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

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

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

四.枚舉類型

ts最終會被編譯成JS，是沒有類型的，枚舉只是在開發時候使用
寫好以后，經過編譯，會變成一個對象
枚舉可以支持反舉，但是限于索引，會根據上一個的值進行自動推斷
大寫是規范
使用賦值聲明（const）的話，不會生成一個對象更簡潔

enum USER_ROLE {

    USER, // 默認從0開始

    ADMIN,

    MANAGER

}

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

可以枚舉，也可以反舉

// 編譯后的結果

(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 = {}));

異構枚舉

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類型

不進行類型檢測

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

六.null 和 undefined

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

let name:number | boolean;

name = null;

七.void類型

只能接受null，undefined。一般用于函數的返回值

let a:void;

a = undefined;

嚴格模式下不能將null賦予給void

八.never類型

任何類型的子類型,never代表不會出現的值。不能把其他類型賦值給never
出錯，死循環，永遠走不到的判斷就是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表示獨一無二

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，因為它們已經超過了最大值了，所以我們用下面的寫法

let max: bigint = BigInt(Number.MAX_SAFE_INTEGER)

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

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

十一.object對象類型

object表示非原始類型

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

create({});

create([]);

create(function(){})

聯合類型

一.類型推導

聲明變量沒有賦予值時默認變量是any類型

let name; // 類型為any

name = 'zhufeng'

name = 10;

聲明變量賦值時則以賦值類型為準

let name = 'zhufeng'; // name被推導為字符串類型

name = 10;

二.包裝對象

我們在使用基本數據類型時，調用基本數據類型上的方法，默認會將原始數據類型包裝成對象類型

let bool1:boolean = true;

let bool2:boolean = Boolean(1);

let bool3:Boolean = new Boolean(2);

boolean是基本數據類型 , Boolean是他的封裝類

三.聯合類型

在使用聯合類型時，沒有賦值只能訪問聯合類型中共有的方法和屬性
使用場景：在取值的時候會遇到聯合類型
!表示此值非空（ele!.innerHtml = ''），可做非空斷言，就是你認為這個一定有，有問題了你來擔責任
強轉類型在下圖
最常用的：ele?.style?.color 等同于 ele && ele.style && ele.style.color
false ?? true // 表示排除null 和 undefined

let name:string | number // 聯合類型

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); // 強制

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

盡量使用第一種類型斷言因為在react中第二種方式會被認為是jsx語法
雙重斷言

let name: string | boolean;

((name! as any) as string);

盡量不要使用雙重斷言，會破壞原有類型關系，斷言為any是因為any類型可以被賦值給其他類型

五.字面量類型

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

let direction:Direction = 'Down';

可以用字面量當做類型，同時也表明只能采用這幾個值（限定值）。類似枚舉。

函數類型

一.函數的兩種聲明方式

通過function關鍵字來進行聲明

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

    return a+b;

}

sum('a','b')

可以用來限制函數的參數和返回值類型
通過表達式方式聲明

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

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

    return a + b;

};

二.可選參數

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

    return a + b;

};

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

三.默認參數

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

    return a + b;

};

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

四.剩余參數

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

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

}

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

五.函數的重載

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); // 根據傳入不同類型的數據 返回不同的結果

toArray('123');

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： linus->查看文件及文件夹大小
下一篇：数据爬取ing