詳解TS數字分隔符和更嚴格的類屬性檢查
概述
TypeScript 2.4 為標識符實現瞭拼寫糾正機制。即使咱們稍微拼錯瞭一個變量、屬性或函數名，TypeScript 在很多情況下都可以提示正確的拼寫。
TypeScript 2.7 支持 ECMAScript 的數字分隔符提案。 這個特性允許用戶在數字之間使用下劃線（_）來對數字分組（就像使用逗號和點來對數字分組那樣）。
const worldPopulationIn2017 = 7_600_000_000; const leastSignificantByteMask = 0b1111_1111; const papayawhipColorHexCode = 0xFF_EF_D5;
數字分隔符不會改變數字字面量的值，但分組使人們更容易一眼就能讀懂數字。
這些分隔符對於二進制和十六進制同樣有用。
let bits = 0b0010_1010; let routine = 0xC0FFEE_F00D_BED; let martin = 0xF0_1E_
註意，可能有些反常識，js裡的數字表示信用卡和電話號並不適當，這種情況下使用字符串更好。
當咱們將target設置為es2015編譯的上述代碼時，TypeScript 將生成以下js代碼：
const worldPopulationIn2017 = 7600000000; const leastSignificantByteMask = 255; const papayawhipColorHexCode = 16773077;
in操作符細化和精確的 instanceof
TypeScript 2.7帶來瞭兩處類型細化方面的改動 – 通過執行“類型保護”確定更詳細類型的能力。
首先，instanceof操作符現在利用繼承鏈而非依賴於結構兼容性， 能更準確地反映出 instanceof操作符在運行時的行為。 這可以幫助避免一些復雜的問題，當使用 instanceof去細化結構上相似（但無關）的類型時。
其次，in操作符現在做為類型保護使用，會細化掉沒有明確聲明的屬性名。
interface A { a: number };
interface B { b: string };
function foo(x: A | B) {
if ("a" in x) {
return x.a;
}
return x.b;
}
更智能的對象字面量推斷
在 JS 裡有一種模式，用戶會忽略掉一些屬性，稍後在使用的時候那些屬性的值為undefined。
let foo = someTest ? { value: 42 } : {};
在以前TypeScript會查找{ value: number }和{}的最佳超類型，結果是{}。 這從技術角度上講是正確的，但並不是很有用。
從2.7版本開始，TypeScript 會“規范化”每個對象字面量類型記錄每個屬性， 為每個undefined類型屬性插入一個可選屬性，並將它們聯合起來。
在上例中，foo的最類型是{ value: number } | { value?: undefined }。 結合瞭 TypeScript 的細化類型，這讓咱們可以編寫更具表達性的代碼且 TypeScript 也可理解。 看另外一個例子：
// Has type
// | { a: boolean, aData: number, b?: undefined }
// | { b: boolean, bData: string, a?: undefined }
let bar = Math.random() < 0.5 ?
{ a: true, aData: 100 } :
{ b: true, bData: "hello" };
if (bar.b) {
// TypeScript now knows that 'bar' has the type
//
// '{ b: boolean, bData: string, a?: undefined }'
//
// so it knows that 'bData' is available.
bar.bData.toLowerCase()
}
這裡，TypeScript 可以通過檢查b屬性來細化bar的類型，然後允許我們訪問bData屬性。
unique symbol 類型和常量名屬性
TypeScript 2.7 對ECMAScript裡的symbols有瞭更深入的瞭解，你可以更靈活地使用它們。
一個需求很大的用例是使用symbols來聲明一個類型良好的屬性。 比如，看下面的例子：
const Foo = Symbol("Foo");
const Bar = Symbol("Bar");
let x = {
[Foo]: 100,
[Bar]: "hello",
};
let a = x[Foo]; // has type 'number'
let b = x[Bar]; // has type 'string'
可以看到，TypeScript 可以追蹤到x擁有使用符號Foo和Bar聲明的屬性，因為Foo和Bar被聲明成常量。 TypeScript 利用瞭這一點，讓Foo和Bar具有瞭一種新類型：unique symbols。
unique symbols是symbols的子類型，僅可通過調用Symbol()或Symbol.for()或由明確的類型註釋生成。 它們僅出現在常量聲明和隻讀的靜態屬性上，並且為瞭引用一個存在的unique symbols類型，你必須使用typeof操作符。 每個對unique symbols的引用都意味著一個完全唯一的聲明身份。
// Works
declare const Foo: unique symbol;
// Error! 'Bar' isn't a constant.
let Bar: unique symbol = Symbol();
// Works - refers to a unique symbol, but its identity is tied to 'Foo'.
let Baz: typeof Foo = Foo;
// Also works.
class C {
static readonly StaticSymbol: unique symbol = Symbol();
}
因為每個unique symbols都有個完全獨立的身份，因此兩個unique symbols類型之前不能賦值和比較。
const Foo = Symbol();
const Bar = Symbol();
// Error: can't compare two unique symbols.
if (Foo === Bar) {
// ...
}
另一個可能的用例是使用 symbols做為聯合標記。
// ./ShapeKind.ts
export const Circle = Symbol("circle");
export const Square = Symbol("square");
// ./ShapeFun.ts
import * as ShapeKind from "./ShapeKind";
interface Circle {
kind: typeof ShapeKind.Circle;
radius: number;
}
interface Square {
kind: typeof ShapeKind.Square;
sideLength: number;
}
function area(shape: Circle | Square) {
if (shape.kind === ShapeKind.Circle) {
// 'shape' has type 'Circle'
return Math.PI * shape.radius ** 2;
}
// 'shape' has type 'Square'
return shape.sideLength ** 2;
}
更嚴格的類屬性檢查
TypeScript 2.7 引入瞭一個新的編譯器選項，用於類中嚴格的屬性初始化檢查。如果啟用瞭–strictPropertyInitialization標志，則類型檢查器將驗證類中聲明的每個實例屬性
- 是否有包含undefined的類型
- 有一個明確的初始值設定項
- 在構造函數中被明確賦值
–strictPropertyInitialization選項是編譯器選項系列的一部分，當設置–strict標志時，該選項會自動啟用。 與所有其他嚴格的編譯器選項一樣，咱們可以將–strict設置為true，並通過將–strictPropertyInitialization設置為false來有選擇地退出嚴格的屬性初始化檢查。
請註意，必須設置–strictNullCheck標志(通過—strict直接或間接地設置)，以便–strictPropertyInitialization起作用。
現在，來看看嚴格的屬性初始化檢查。如果沒有啟用–strictpropertyinitialized標志，下面的代碼類型檢查就可以瞭，但是會在運行時產生一個TypeError錯誤：
class User {
username: string;
}
const user = new User();
// TypeError: Cannot read property 'toLowerCase' of undefined
const username = user.username.toLowerCase();
出現運行時錯誤的原因是，username屬性值為undefined，因為沒有對該屬性的賦值。因此，對toLowerCase()方法的調用失敗。
如果啟用——strictpropertyinitialize，類型檢查器將會報一個錯誤：
class User {
// Type error: Property 'username' has no initializer
// and is not definitely assigned in the constructor
username: string;
}
接下來，看看四種不同的方法，可以正確地輸入User類來消除類型錯誤。
解決方案1：允許定義
消除類型錯誤的一種方法是為username屬性提供一個包含undefined的類型：
class User {
username: string | undefined;
}
const user = new User();
現在，username屬性保存undefined的值是完全有效的。但是，當咱們想要將username屬性用作字符串時，首先必須確保它實際包含的是字符串而不是undefined的值，例如使用typeof
// OK const username = typeof user.username === "string" ? user.username.toLowerCase() : "n/a";
解決方案2:顯式屬性初始化
消除類型錯誤的另一種方法是向username屬性添加顯式初始化。通過這種方式，屬性將立即保存一個字符串值，並且不會明顯的undefined：
class User {
username = "n/a";
}
const user = new User();
// OK
const username = user.username.toLowerCase();
解決方案3: 使用構造函數賦值
也許最有用的解決方案是將username參數添加到構造函數中，然後將其分配給username屬性。這樣，每當構造User類的實例時，調用者必須提供用戶名作為參數：
class User {
username: string;
constructor(username: string) {
this.username = username;
}
}
const user = new User("mariusschulz");
// OK
const username = user.username.toLowerCase();
咱們 還可以通過刪除對類字段的顯式賦值並將public修飾符添加到username構造函數參數來簡化User類，如下所示：
class User {
constructor(public username: string) {}
}
const user = new User("mariusschulz");
// OK
const username = user.username.toLowerCase();
請註意，嚴格的屬性初始化要求在構造函數中所有可能的代碼路徑中明確分配每個屬性。 因此，以下代碼類型不正確，因為在某些情況下，我們將username屬性賦值為未初始化狀態：
class User {
// Type error: Property 'username' has no initializer
// and is not definitely assigned in the constructor.
username: string;
constructor(username: string) {
if (Math.random() < 0.5) {
this.username = username;
}
}
}
解決方案4:明確的賦值斷言
如果類屬性既沒有顯式初始化，也沒有undefined的類型，則類型檢查器要求直接在構造函數中初始化該屬性;否則，嚴格的屬性初始化檢查將失敗。如果咱們希望在幫助方法中初始化屬性，或者讓依賴項註入框架來初始化屬性，那麼這是有問題的。在這些情況下，咱們必須將一個明確的賦值斷言(!)添加到該屬性的聲明中：
class User {
username!: string;
constructor(username: string) {
this.initialize(username);
}
private initialize(username: string) {
this.username = username;
}
}
const user = new User("mariusschulz");
// OK
const username = user.username.toLowerCase();
通過向username屬性添加一個明確的賦值斷言，這會告訴類型檢查器，期望對username屬性進行初始化，即使它自己無法檢測到這一點。現在咱們的責任是確保在構造函數返回後明確地將屬性賦值給它，所以必須小心;否則，username屬性可能被明顯的undefined或者在運行時就會報TypeError錯誤。
顯式賦值斷言
盡管咱們嘗試將類型系統做的更富表現力，但我們知道有時用戶比TypeScript更加瞭解類型。
上面提到過，顯式賦值斷言是一個新語法，使用它來告訴 TypeScript 一個屬性會被明確地賦值。 但是除瞭在類屬性上使用它之外，在TypeScript 2.7裡你還可以在變量聲明上使用它！
let x!: number[];
initialize();
x.push(4);
function initialize() {
x = [0, 1, 2, 3];
}
假設我們沒有在x後面加上感嘆號，那麼TypeScript會報告x從未被初始化過。 它在延遲初始化或重新初始化的場景下很方便使用。
以上就是詳解TS數字分隔符和更嚴格的類屬性檢查的詳細內容，更多關於TS的資料請關註WalkonNet其它相關文章！
推薦閱讀：
- TypeScript基本類型之typeof和keyof詳解
- 一篇文章弄懂js中的typeof用法
- 分享JavaScript 類型判斷的幾種方法
- TypeScript保姆級基礎教程
- JavaScript原始值與包裝對象的詳細介紹