快捷導(dǎo)航

TypeScript中的數(shù)據(jù)類型enum?type?interface基礎(chǔ)用法示例

更新時(shí)間：2023年08月11日 10:21:50 作者：艾艾

這篇文章主要為大家介紹了TypeScript中的數(shù)據(jù)類型enum?type?interface基礎(chǔ)用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

一. enum，何時(shí)去使用enum

enum用于映射，以下是基本用法

enum?A?{
??todo?=?0,?//?表示todo等于0，往下依次增加
??done,
??archived,
??deleted,
}
let?orderStatus?=?0;
orderStatus?=?A.todo;
orderStatus?=?A.done;
console.log(orderStatus);

通過位運(yùn)算和enums做權(quán)限控制

enum?Permission?{
??None?=?0,?//?0000
??Read?=?1?<<?0,?//?0001
??Write?=?1?<<?1,?//?0010
??Delete?=?1?<<?2,?//?0100
??Manage?=?Read?|?Write?|?Delete,?//?二進(jìn)制的或?//?0111
}
type?User?=?{
??permission:?Permission;
};
const?user:?User?=?{
??permission:?0b0111,
};?//?這個(gè)值應(yīng)該是從后臺(tái)獲取
//?用二進(jìn)制表示權(quán)限，若user.permission&Permission.Write?===?Permission.Write?則user.permission有Permission.Write的所有1
if?((user.permission?&?Permission.Write)?===?Permission.Write)?{
??console.log('擁有寫權(quán)限');
}

二. 什么時(shí)候用enum會(huì)顯得很呆

//?以下這種場(chǎng)景就很呆，不如用type+并集
enum?Fruit?{
??apple?=?'apple',
??banana?=?'banana',
??pineapple?=?'pineapple',
??watermelon?=?'watermelon',
}

let?f:?Fruit?=?Fruit.apple;
f?=?Fruit.watermelon;
console.log(f);

對(duì)比直接用type+并集的方式

//?用type加并集
type?Fruit?=?'apple'?|?'banana'?|?'watermelon'?|?'pineapple';
let?f:?Fruit?=?'banana';
f?=?'watermelon';
console.log(f);

總結(jié): number + enum 不錯(cuò)，string 和混用的情況都不太合適，如果沒有enum在js中我們可以用map來替代

三. type和interface的區(qū)別

什么時(shí)候用type？

幾乎沒有不能用type的場(chǎng)景，它的官方名稱應(yīng)該叫做類型別名(Type Aliases)，也就是給其它類型取一個(gè)名字

type?Name?=?string;
const?a:?Name?=?'hi';
type?FalseLike?=?0?|?''?|?null?|?undefined?|?false;
//?比較特殊的帶有屬性的函數(shù)的聲明方式
type?FnWithProp?=?{
??(a:?number,?b:?number):?number;
??prop:?string;
};
const?f:?FnWithProp?=?(x,?y)?=>?{
??return?x?+?y;
};
f.prop?=?'hello';

為什么叫做類型別名

type?A?=?string;
type?B?=?A;?//?B?實(shí)際上的類型還是string，不是A，也就是說type聲明的是一個(gè)類型的別名，沒有產(chǎn)生新的類型

什么時(shí)候用interface

接口interface是面向?qū)ο罄锩娴母拍?，它表示class需要有的一些功能，ts中的功能不僅能描述功能也能描述對(duì)象的屬性

type?A1?=?Array<string>?&?{
??name:?string;
}?&?X;
interface?X?{
??age:?number;
}
//?interface就是用面向?qū)ο蟮暮谠?，把type能做的事情再描述一遍
interface?A2?extends?Array<string>,?X?{
??name:?string;
}

interface描述函數(shù)

interface?Fn?{
??(a:?number,?b:?number):?number;
??xxx:?number;
}
const?f:?Fn?=?(x,?y)?=>?{
??return?x?+?y;
};
f.xxx?=?1;
console.log(f);

描述日期對(duì)象

interface?D?extends?Date?{
}

const?d:?D?=?new?Date();
console.log(d);

type和interface的范圍

type也能描述對(duì)象，是不是就不需要interface? 我感覺并非如此，主要有兩點(diǎn)。第一點(diǎn)，其實(shí)interface這個(gè)特性的出現(xiàn)迎合了面向?qū)ο蟮姆劢z的需要，有助于typescript這門語(yǔ)言的推廣傳播。第二點(diǎn)之后我會(huì)細(xì)說。

區(qū)別

interface只描述對(duì)象，type則描述所有區(qū)別
type 只是別名interface則是類型聲明

四. type和interface的第三個(gè)區(qū)別

type的重要特性: type不可以重新賦值，這樣的好處計(jì)算非?？欤侨秉c(diǎn)就是type不好擴(kuò)展

type?A?=?number;

interface可以自動(dòng)合并，所以可以被擴(kuò)展

interface?X?{
??name:?string;
}
interface?X?{
??age:?number;
}
const?a:?X?=?{
??name:?'frank',
??age:?18,
};

interface擴(kuò)展的例子

//?擴(kuò)展axios
import?{AxiosRequestConfig}?from?'axios'
declare?module?'axios'?{
??export?interface?AxiosRequestConfig?{
????_autoLoading?:?boolean;
????_mock?:?string;
??}
}
//?擴(kuò)展string
interface?String?{
??padZero(length:?number):?string;
}
const?s?=?'hello';
s.padZero(1);

總結(jié)

對(duì)外API盡量使用interface，方便擴(kuò)展，對(duì)內(nèi)API盡量用type，防止代碼分散

以上就是TypeScript中的數(shù)據(jù)類型enum type interface基礎(chǔ)用法示例的詳細(xì)內(nèi)容，更多關(guān)于TypeScript數(shù)據(jù)類型enum type interface的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: