摘要：斷言官方文檔中給出了這樣的解釋引入了一個名為斷言的字面值的新構造。在中，標準做法是從名為的函數創建操作。如果我們有一個用于設置小時數組的類型，它可能看起來像這樣在之前，擴展會使上述操作的字面量屬性更加通用，因為它們是可以修改的。

翻譯：瘋狂的技術宅

blog.logrocket.com/const-asser…

我發現官方的 TypeScript 文檔非常有用，但是總覺得有點過于學術化并且枯燥無味。每當我發現一個新功能時，我想要知道這個功能究竟能夠解決什么問題而不是長篇大論。

在我看來，const assertions 是 TypeScript 3.4 的殺手級新功能，正如我稍后將要解釋的，我們可以用這個新功能省略很多繁瑣的類型聲明。

const x = { text: "hello" } as const;

官方文檔中給出了這樣的解釋：

TypeScript 3.4 引入了一個名為 const 斷言的字面值的新構造。它的語法是一個類型斷言，用 const 代替類型名稱（例如 123 as const）斷言構造新的文字表達式時，我們可以向語言發出以下信號：
該表達式中的字面類型不應被擴展（例如：不能從“hello”轉換為字符串）
對象字面量獲取只讀屬性
數組文字成為只讀元組

感覺有點枯燥，還有點混亂。讓我們來各個擊破。

并不是每個人都知道類型擴展，并且由于某些意外行為而首次發現它時都會覺得意外。

當我們使用關鍵字 const 聲明一個字面量時，類型是等號右邊的文字，例如：

const x = "x"; // x has the type "x"

const 關鍵字確保不會發生對變量進行重新分配，并且只保證該字面量的嚴格類型。

但是如果我們用 let 而不是 const， 那么該變量會被重新分配，并且類型會被擴展為字符串類型，如下所示：

let x = "x"; // x has the type string;

以下是兩個不同的聲明：

const x = "x"; // has the type "x" 
let y = "x";   // has the type string

y 被擴展為更通用的類型，并允許將其重新分配給該類型的其他值，而變量 x 只能具有 "x"的值。

用新的 const 功能，我可以這樣做：

let y = "x" as const; // y has type "x"`

在 Typescript 3.4 之前，類型擴展發生在對象字面量中：

const action = { type: "INCREMENT", } // has type { type: string }

即使我們將 action 聲明為 const，仍然可以重新分配 type 屬性，因此，該屬性被擴展成了字符串類型。

這看上去令人覺得不是那么有用，所以讓我們換一個更好的例子。

如果你熟悉 Redux，就可能會發現上面的 action 變量可以用作 Redux action。如果你不知道 Redux 我來簡單解釋一下，Redux 是一個全局不可變的 state 存儲。通過向所謂的 reducers 發送動作來修改狀態。 reducers 是純函數，它在調度每個 action 后返回全局狀態的新更新版本，以反映 acion 中指定的修改。

在 Redux 中，標準做法是從名為 action creators 的函數創建操作。 action creators 只是純函數，它返回 Redux操作對象字面量以及提供給函數的所有參數。

用一個例子可以更好地說明這一點。應用程序可能需要一個全局 count 屬性，為了更新這個 count 屬性，我們可以調度類型為 "SET_COUNT" 的動作，它只是將全局 count 屬性設置為一個新的值，這是一個字面對象屬性。這個 action 的 action creator 將是一個函數，它接受一個數字作為參數，并返回一個具有屬性為 type、值為 SET_COUNT 和類型為 number 的 payload 屬性的對象，它將指定 count 的新值：

const setCount = (n: number) => {
  return {
    type: "SET_COUNT",
    payload: n,
  }
}

const action = setCount(3)
// action has type
// { type: string, payload: number }

從上面顯示的代碼中可以看出，type 屬性已經被擴展為 string 類型而不再是 SET_COUNT。這不是很安全的類型，我們可以保證的是 type 是一個字符串。 redux 中的每個 action 都有一個 type 屬性，它是一個字符串。

這不是很好，如果我們想要利用 type 屬性上的可區分聯合的話，那么在 TypeScript 3.4 之前，則需要為每個 action 聲明一個接口或類型：

interface SetCount {
  type: "SET_COUNT";
  payload: number;
}

const setCount = (n: number): SetCount => {
  return {
    type: "SET_COUNT",
    payload: n,
  }
}

const action = setCount(3)
// action has type SetCount

這確實增加了編寫 Redux action 和 reducers 的負擔，但我們可以通過添加一個 const assertion 來解決這個問題：

const setCount = (n: number) => {
  return <const>{
    type: "SET_COUNT",
    payload: n
  }
}

const action = setCount(3);
// action has type
//  { readonly type: "SET_COUNT"; readonly payload: number };

你會注意到從 setCount 推斷的類型已經在每個屬性中附加了 readonly 修飾符，正如文檔的項目符號所述。

這就是所發生的事情：

{
  readonly type: "SET_COUNT";
  readonly payload: number
};

action 中的每個字面量都被添加了 readonly 修飾符。

在 redux 中，我們創建了一個接受 action 的聯合，reducer 函數可以通過這種操作來獲得良好的類型安全性。在 TypeScript 3.4 之前，我們會這樣做：

interface SetCount {
  type: "SET_COUNT";
  payload: number;
}

interface ResetCount {
  type: "RESET_COUNT";
}

const setCount = (n: number): SetCount => {
  return {
    type: "SET_COUNT",
    payload: n,
  }
}

const resetCount = (): ResetCount => {
  return {
    type: "RESET_COUNT",
  }
}

type CountActions = SetCount | ResetCount

我們創建了兩個接口 RESET_COUNT 和 SET_COUNT 來對兩個 resetCount 和 setCount 的返回類型進行歸類。

CountActions 是這兩個接口的聯合。

使用 const assertions，我們可以通過使用 const、 ReturnType 和 typeof 的組合來消除聲明這些接口的需要：

const setCount = (n: number) => {
  return <const>{
    type: "SET_COUNT",
    payload: n
  }
}

const resetCount = () => {
  return <const>{
    type: "RESET_COUNT"
  }
}

type CountActions = ReturnType<typeof setCount> | ReturnType<typeof resetCount>;

我們從 action creator 函數 setCount 和 resetCount 的返回類型中推斷出一個很好的 action 聯合。

在 TypeScript 3.4 之前，聲明一個字面量數組將被擴展并且可以修改。

使用 const，我們可以將字面量鎖定為其顯式值，也不允許修改。

如果我們有一個用于設置小時數組的 redux action 類型，它可能看起來像這樣：

const action = {
  type: "SET_HOURS",
  payload: [8, 12, 5, 8],
}
//  { type: string; payload: number[]; }

action.payload.push(12) // no error

在 TypeScript 3.4 之前，擴展會使上述操作的字面量屬性更加通用，因為它們是可以修改的。

如果我們將 const 應用于對象字面量，那么就可以很好地控制所有內容：

const action = <const>{
  type: "SET_HOURS",
  payload: [8, 12, 5, 8]
}

// {
//  readonly type: "SET_HOURS";
//  readonly payload: readonly [8, 12, 5, 8];
// }

action.payload.push(12);  // error - Property "push" does not exist on type "readonly [8, 12, 5, 8]".

這里發生的事情恰恰是文檔的要點：

payload 數組確實是 [8,12,5,8] 的“只讀”元組（不過我并沒有從文檔中看到這方面的說明）。

我用以下代碼總結以上所有內容：

let obj = {
  x: 10,
  y: [20, 30],
  z: {
    a:
      {  b: 42 }
  } 
} as const;

對應于：

let obj: {
  readonly x: 10;
  readonly y: readonly [20, 30];
  readonly z: {
    readonly a: {
      readonly b: 42;
    };
  };
};

在這里，我可以推斷出類型，而不是去編寫多余的樣板類型。這對于 redux 特別有用。