詳解TS數(shù)字分隔符和更嚴(yán)格的類屬性檢查

第詳解TS數(shù)字分隔符和更嚴(yán)格的類屬性檢查目錄概述in操作符細(xì)化和精確的instanceof更智能的對(duì)象字面量推斷uniquesymbol類型和常量名屬性更嚴(yán)格的類屬性檢查解決方案1：允許定義解決方案2:顯式屬性初始化解決方案3:使用構(gòu)造函數(shù)賦值解決方案4:明確的賦值斷言顯式賦值斷言

概述

TypeScript2.4為標(biāo)識(shí)符實(shí)現(xiàn)了拼寫(xiě)糾正機(jī)制。即使咱們稍微拼錯(cuò)了一個(gè)變量、屬性或函數(shù)名，TypeScript在很多情況下都可以提示正確的拼寫(xiě)。

TypeScript2.7支持ECMAScript的數(shù)字分隔符提案。這個(gè)特性允許用戶在數(shù)字之間使用下劃線（_）來(lái)對(duì)數(shù)字分組（就像使用逗號(hào)和點(diǎn)來(lái)對(duì)數(shù)字分組那樣）。

constworldPopulationIn2017=7_600_000_000;

constleastSignificantByteMask=0b1111_1111;

constpapayawhipColorHexCode=0xFF_EF_D5;

數(shù)字分隔符不會(huì)改變數(shù)字字面量的值，但分組使人們更容易一眼就能讀懂?dāng)?shù)字。

這些分隔符對(duì)于二進(jìn)制和十六進(jìn)制同樣有用。

letbits=0b0010_1010;

letroutine=0xC0FFEE_F00D_BED;

letmartin=0xF0_1E_

注意，可能有些反常識(shí)，js里的數(shù)字表示信用卡和電話號(hào)并不適當(dāng)，這種情況下使用字符串更好。

當(dāng)咱們將target設(shè)置為es2015編譯的上述代碼時(shí)，TypeScript將生成以下js代碼：

constworldPopulationIn2017=7600000000;

constleastSignificantByteMask=255;

constpapayawhipColorHexCode=16773077;

in操作符細(xì)化和精確的instanceof

TypeScript2.7帶來(lái)了兩處類型細(xì)化方面的改動(dòng)-通過(guò)執(zhí)行“類型保護(hù)”確定更詳細(xì)類型的能力。

首先，instanceof操作符現(xiàn)在利用繼承鏈而非依賴于結(jié)構(gòu)兼容性，能更準(zhǔn)確地反映出instanceof操作符在運(yùn)行時(shí)的行為。這可以幫助避免一些復(fù)雜的問(wèn)題，當(dāng)使用instanceof去細(xì)化結(jié)構(gòu)上相似（但無(wú)關(guān)）的類型時(shí)。

其次，in操作符現(xiàn)在做為類型保護(hù)使用，會(huì)細(xì)化掉沒(méi)有明確聲明的屬性名。

interfaceA{a:number};

interfaceB{b:string};

functionfoo(x:A|B){

if("a"inx){

returnx.a;

returnx.b;

}

更智能的對(duì)象字面量推斷

在JS里有一種模式，用戶會(huì)忽略掉一些屬性，稍后在使用的時(shí)候那些屬性的值為undefined。

letfoo=someTest{value:42}:{};

在以前TypeScript會(huì)查找{value:number}和{}的最佳超類型，結(jié)果是{}。這從技術(shù)角度上講是正確的，但并不是很有用。

從2.7版本開(kāi)始，TypeScript會(huì)“規(guī)范化”每個(gè)對(duì)象字面量類型記錄每個(gè)屬性，為每個(gè)undefined類型屬性插入一個(gè)可選屬性，并將它們聯(lián)合起來(lái)。

在上例中，foo的最類型是{value:number}|{value:undefined}。結(jié)合了TypeScript的細(xì)化類型，這讓咱們可以編寫(xiě)更具表達(dá)性的代碼且TypeScript也可理解?？戳硗庖粋€(gè)例子：

//Hastype

//|{a:boolean,aData:number,b:undefined}

//|{b:boolean,bData:string,a:undefined}

letbar=Math.random()0.5

{a:true,aData:100}:

{b:true,bData:"hello"};

if(bar.b){

//TypeScriptnowknowsthat'bar'hasthetype

//'{b:boolean,bData:string,a:undefined}'

//soitknowsthat'bData'isavailable.

bar.bData.toLowerCase()

}

這里，TypeScript可以通過(guò)檢查b屬性來(lái)細(xì)化bar的類型，然后允許我們?cè)L問(wèn)bData屬性。

uniquesymbol類型和常量名屬性

TypeScript2.7對(duì)ECMAScript里的symbols有了更深入的了解，你可以更靈活地使用它們。

一個(gè)需求很大的用例是使用symbols來(lái)聲明一個(gè)類型良好的屬性。比如，看下面的例子：

constFoo=Symbol("Foo");

constBar=Symbol("Bar");

letx={

[Foo]:100,

[Bar]:"hello",

leta=x[Foo];//hastype'number'

letb=x[Bar];//hastype'string'

可以看到，TypeScript可以追蹤到x擁有使用符號(hào)Foo和Bar聲明的屬性，因?yàn)镕oo和Bar被聲明成常量。TypeScript利用了這一點(diǎn)，讓Foo和Bar具有了一種新類型：uniquesymbols。

uniquesymbols是symbols的子類型，僅可通過(guò)調(diào)用Symbol()或Symbol.for()或由明確的類型注釋生成。它們僅出現(xiàn)在常量聲明和只讀的靜態(tài)屬性上，并且為了引用一個(gè)存在的uniquesymbols類型，你必須使用typeof操作符。每個(gè)對(duì)uniquesymbols的引用都意味著一個(gè)完全唯一的聲明身份。

//Works

declareconstFoo:uniquesymbol;

//Error!'Bar'isn'taconstant.

letBar:uniquesymbol=Symbol();

//Works-referstoauniquesymbol,butitsidentityistiedto'Foo'.

letBaz:typeofFoo=Foo;

//Alsoworks.

classC{

staticreadonlyStaticSymbol:uniquesymbol=Symbol();

}

因?yàn)槊總€(gè)uniquesymbols都有個(gè)完全獨(dú)立的身份，因此兩個(gè)uniquesymbols類型之前不能賦值和比較。

constFoo=Symbol();

constBar=Symbol();

//Error:can'tcomparetwouniquesymbols.

if(Foo===Bar){

//...

}

另一個(gè)可能的用例是使用symbols做為聯(lián)合標(biāo)記。

//./ShapeKind.ts

exportconstCircle=Symbol("circle");

exportconstSquare=Symbol("square");

//./ShapeFun.ts

import*asShapeKindfrom"./ShapeKind";

interfaceCircle{

kind:typeofShapeKind.Circle;

radius:number;

interfaceSquare{

kind:typeofShapeKind.Square;

sideLength:number;

functionarea(shape:Circle|Square){

if(shape.kind===ShapeKind.Circle){

//'shape'hastype'Circle'

returnMath.PI*shape.radius**2;

//'shape'hastype'Square'

returnshape.sideLength**2;

}

更嚴(yán)格的類屬性檢查

TypeScript2.7引入了一個(gè)新的編譯器選項(xiàng)，用于類中嚴(yán)格的屬性初始化檢查。如果啟用了--strictPropertyInitialization標(biāo)志，則類型檢查器將驗(yàn)證類中聲明的每個(gè)實(shí)例屬性

是否有包含undefined的類型

有一個(gè)明確的初始值設(shè)定項(xiàng)

在構(gòu)造函數(shù)中被明確賦值

--strictPropertyInitialization選項(xiàng)是編譯器選項(xiàng)系列的一部分，當(dāng)設(shè)置--strict標(biāo)志時(shí)，該選項(xiàng)會(huì)自動(dòng)啟用。與所有其他嚴(yán)格的編譯器選項(xiàng)一樣，咱們可以將--strict設(shè)置為true，并通過(guò)將--strictPropertyInitialization設(shè)置為false來(lái)有選擇地退出嚴(yán)格的屬性初始化檢查。

請(qǐng)注意，必須設(shè)置--strictNullCheck標(biāo)志(通過(guò)—strict直接或間接地設(shè)置)，以便--strictPropertyInitialization起作用。

現(xiàn)在，來(lái)看看嚴(yán)格的屬性初始化檢查。如果沒(méi)有啟用--strictpropertyinitialized標(biāo)志，下面的代碼類型檢查就可以了，但是會(huì)在運(yùn)行時(shí)產(chǎn)生一個(gè)TypeError錯(cuò)誤：

classUser{

username:string;

constuser=newUser();

//TypeError:Cannotreadproperty'toLowerCase'ofundefined

constusername=user.username.toLowerCase();

出現(xiàn)運(yùn)行時(shí)錯(cuò)誤的原因是，username屬性值為undefined，因?yàn)闆](méi)有對(duì)該屬性的賦值。因此，對(duì)toLowerCase()方法的調(diào)用失敗。

如果啟用——strictpropertyinitialize，類型檢查器將會(huì)報(bào)一個(gè)錯(cuò)誤：

classUser{

//Typeerror:Property'username'hasnoinitializer

//andisnotdefinitelyassignedintheconstructor

username:string;

}

接下來(lái)，看看四種不同的方法，可以正確地輸入U(xiǎn)ser類來(lái)消除類型錯(cuò)誤。

解決方案1：允許定義

消除類型錯(cuò)誤的一種方法是為username屬性提供一個(gè)包含undefined的類型：

classUser{

username:string|undefined;

constuser=newUser();

現(xiàn)在，username屬性保存undefined的值是完全有效的。但是，當(dāng)咱們想要將username屬性用作字符串時(shí)，首先必須確保它實(shí)際包含的是字符串而不是undefined的值，例如使用typeof

//OK

constusername=typeofuser.username==="string"

user.username.toLowerCase()

:"n/a";

解決方案2:顯式屬性初始化

消除類型錯(cuò)誤的另一種方法是向username屬性添加顯式初始化。通過(guò)這種方式，屬性將立即保存一個(gè)字符串值，并且不會(huì)明顯的undefined：

classUser{

username="n/a";

constuser=newUser();

//OK

constusername=user.username.toLowerCase();

解決方案3:使用構(gòu)造函數(shù)賦值

也許最有用的解決方案是將username參數(shù)添加到構(gòu)造函數(shù)中，然后將其分配給username屬性。這樣，每當(dāng)構(gòu)造User類的實(shí)例時(shí)，調(diào)用者必須提供用戶名作為參數(shù)：

classUser{

username:string;

constructor(username:string){

this.username=username;

constuser=newUser("mariusschulz");

//OK

constusername=user.username.toLowerCase();

咱們還可以通過(guò)刪除對(duì)類字段的顯式賦值并將public修飾符添加到username構(gòu)造函數(shù)參數(shù)來(lái)簡(jiǎn)化User類，如下所示：

classUser{

constructor(publicusername:string){}

constuser=newUser("mariusschulz");

//OK

constusername=user.username.toLowerCase();

請(qǐng)注意，嚴(yán)格的屬性初始化要求在構(gòu)造函數(shù)中所有可能的代碼路徑中明確分配每個(gè)屬性。因此，以下代碼類型不正確，因?yàn)樵谀承┣闆r下，我們將username屬性賦值為未初始化狀態(tài)：

classUser{

//Typeerror:Property'username'hasnoinitializer

//andisnotdefinitelyassignedintheconstructor.

username:string;

constructor(username:string){

if(Math.random()0.5){

this.username=username;

}

解決方案4:明確的賦值斷言

如果類屬性既沒(méi)有顯式初始化，也沒(méi)有undefined的類型，則類型檢查器要求直接在構(gòu)造函數(shù)中初始化該屬性;否則，嚴(yán)格的屬性初始化檢查將失敗。如果咱們希望在幫助方法中初始化屬性，或者讓依賴項(xiàng)注入框架來(lái)初始化屬性，那么這是有問(wèn)題的。在這些情況下，咱們必須將一個(gè)明確的賦值斷言(!)添加到該屬性的聲明中：

classUser{

username!:string;

constructor(username:string){

this.initialize(us