【移動應(yīng)用開發(fā)技術(shù)】TypeScript中的Enum如何用

【移動應(yīng)用開發(fā)技術(shù)】TypeScript中的Enum如何用

本篇內(nèi)容介紹了“TypeScript中的Enum如何用”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓在下帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！EnumEnum是在TypeScript中新增的語法，也叫做枚舉，一般用它來管理多個相同系列的常量（即不能被修改的變量），用于狀態(tài)的判斷。在Web中比較常見的狀態(tài)判斷，是在處理請求時，要針對不同的響應(yīng)狀態(tài)碼做對應(yīng)的處理：const

handleResponseStatus

=

(status:

number):

void

=>

{

switch

(status)

{

case

200:

//

請求成功時

//

Do

something...

break;

case

400:

//

請求失敗時

//

Do

something...

break;

default:

throw

(new

Error('No

have

status

code!'));

}

};但因為響應(yīng)狀態(tài)碼都是預(yù)先定義好的，所以沒什么爭議，代碼寫成這樣看也很正常，但是如果后端在服務(wù)器發(fā)生錯誤時自定義了一些編碼，并告訴前端，這些代碼都代表什么錯誤，那么上面的函數(shù)可能會變成這樣：const

handleWrongStatus

=

(status:

string):

void

=>

{

switch

(status)

{

case

'A':

//

Do

something...

break;

case

'B':

//

Do

something...

break;

case

'C':

//

Do

something...

break;

default:

throw

(new

Error('No

have

wrong

code!'));

}

};如果是這種代碼，別說是剛接手的人，就算是你自己兩星期前寫的，恐怕不去翻文檔也想不起它們都代表什么了吧。但是如果善用Enum，就可以避免上述發(fā)生的情況?；居梅ㄏ葋砜纯碋num該怎么定義，它和Object的用法很像：enum

requestStatusCodes

{

error,

success,

}不需要在內(nèi)容與名稱之間加等號，直接在大括號內(nèi)敘述該Enum中具有哪些變量，與其說是變量，不如說是常量更恰當(dāng)些，因為在Enum中的值是不可修改的，所以也不必?fù)?dān)心這些定義好的規(guī)則會在代碼執(zhí)行的過程中發(fā)生改變，導(dǎo)致執(zhí)行錯誤。而既然Enum是用來定義同一個系列常量的，那這些常量應(yīng)該都能維護特定的值。沒錯，在Enum中的每個常量，都可以通過

=

來指定具體的值。但如果是像前面的

requestStatusCodes

，沒有為

error

或

success

指定具體的值也不會出錯，因為TypeScript會從

0

開始自動遞增定義值，所以簽名的

requestStatusCodes

會和下面的結(jié)果相同：enum

requestStatusCodes

{

error

=

0,

success

=

1,

}console.log(requestStatusCodes.error)

//

0

console.log(requestStatusCodes.success)

//

1除了數(shù)字外，也可以定義為字串：enum

requestWrongCodes

{

missingParameter

=

'A',

wrongParameter

=

'B',

invalidToken

=

'C',

}console.log(requestWrongCodes.wrongParameter)

//

'B'當(dāng)然也可以在一個enum中設(shè)定不同的類型，但這樣一點意義都沒有：enum

requestStatusCodes

{

error

=

0,

success

=

'OK',

}了解基本的Enum怎么定義后，接著就來改寫前面代碼中的

handleResponseStatus

和

handleWrongStatus

，讓它們在語義上能夠更明確。首先用Enum定義兩者的狀態(tài)描述：enum

requestStatusCodes

{

error

=

400,

success

=

200,

}

enum

requestWrongCodes

{

missingParameter

=

'A',

wrongParameterType

=

'B',

invalidToken

=

'C',

}然后修改

handleResponseStatus

和

handleWrongStatus

中的Switch判斷：const

handleResponseStatus

=

(status:

number):

void

=>

{

switch

(status)

{

case

requestStatusCodes.success:

//

Do

something...

break;

case

requestStatusCodes.error:

//

Do

something...

break;

default:

throw

(new

Error('No

have

status

code!'));

}

};

const

handleWrongStatus

=

(status:

string):

void

=>

{

//

如果覺得

requestWrongCodes.missingParameter

太長了，也可以用以下方式：

const

{

missingParameter,

wrongParameterType,

invalidToken,

}

=

requestWrongCodes;

switch

(status)

{

case

missingParameter:

//

Do

something...

break;

case

wrongParameterType:

//

Do

something...

break;

case

invalidToken:

//

Do

something...

break;

default:

throw

(new

Error('No

have

wrong

code!'));

}

};修改后的代碼就變得直觀多了，因為狀態(tài)碼都被放到了Enum中統(tǒng)一管理，所以就能用常量名來代表它們，之后不管過了多久，可以明確的知道這里再做什么，甚至連注解或文檔都不用寫了，因為代碼就是最好的文檔。善用Enum能使代碼絕對是不可或缺的，但就算沒使用TypeScript也別灰心，因為TypeScript最終會被轉(zhuǎn)換為JavaScript，那來看看如何直接用JavaScript實現(xiàn)Enum吧！用原生JavaScript實現(xiàn)Enum在前面說過Enum很像Object，如果研究一下Enum被編譯成javascript之后的代碼，就會發(fā)現(xiàn)還真的是Object。Enum被編譯后會變成Key和Value反向?qū)?yīng)的對象，這樣看起來非常簡單，為了方便使用，下面把它的編譯方式寫成一個函數(shù)：const

newEnum

=

(descriptions)

=>

{

const

result

=

{};

Object.keys(descriptions).forEach((description)

=>

{

result[result[description]

=

descriptions[description]]

=

description;

});

return

result;

};

const

responseStatus

=

newEnum({

error:

400,

success:

200,

});

//

{

'200':

'success',

'400':

'error',

error:

400,

success:

200

}

console.log(responseStatus);雖然得到的結(jié)果相同，但是喪失了Enum中最可貴的常量特色，如果不能讓它變成不可修改，那就有可能會在代碼里不經(jīng)意地改動它，導(dǎo)致執(zhí)行結(jié)果可能出錯，于是可以在最后利用

Object.freeze()

，讓外部操作無法新增、刪除或重新定義任何Property：const

newEnum

=

(descriptions)

=>

{

const

result

=

{};

Object.keys(descriptions).forEach((description)

=>

{

result[result[description]

=

descriptions[description]]

=

description;

});

return

Object.freeze(result);

};

const

responseStatus

=

newEnum({

error:

400,

success:

200,

});

//

即使不小心修改了

responseStatus['200']

=

'aaaaaaaa';

//

仍然是

{

'200':

'success',

'400':

'error',

error:

400,

success:

200

}

console.log(responseStatus);這樣就能簡單在JavaScript中實現(xiàn)Enum了。constEnum的用法從前面的JavaScript代碼中可以看到Enum編譯過后會變成Key和Value互相對應(yīng)的Object，也就是說不管是用Key還是Value都可以取出對應(yīng)的值，但是如果用

const

聲明Enum，編譯之后就不會產(chǎn)生Object。直接看例子，假設(shè)我把

responseState

用

const

重新生命，且也是以

handleResponseStatus

使用該Enum做判斷：enum

responseStatus

{

error

=

400,

success

=

200,

}

const

handleResponseStatus

=

(status:

number):

void

=>

{

switch

(status)

{

case

responseStatus.success:

console.log('請求成功！');

break;

case

responseStatus.error:

console.log('請求失?。?);

break;

default:

throw

(new

Error('No

have

status

code!'));

}

};看起來一切正常，不過在編譯后的JavaScript中，會發(fā)現(xiàn)Enum并沒有產(chǎn)生Object，而是直接用

const

聲明在Enum中的值。用

const

聲明Enum有幾個好處：假設(shè)要用到的Enum非常多，那在執(zhí)行時就會不停地使用IIFE產(chǎn)生Object將Key和Value綁定到Object，會造成一些效率上的損失，也會增加內(nèi)存，但是

const

并不會產(chǎn)生Object，也就不會有以上的問題。就算到的Enum不多，判斷時也需要一直從Object中找出對應(yīng)的值，而如果是用

cons