掌握 TypeScript 中的文字類型：true as const 與 true

在 TypeScript 中，兩個語句之間有顯著差異：

1. clientLoader. Hydro = true as const;

2. clientLoader. Hydro = true;

僅供參考，我從 React router v7 中選擇了這些範例。

讓我們透過詳細的解釋和範例來分解差異

1. clientLoader. Hydro = true as const;

TypeScript 中的 as const 斷言是告訴 TypeScript 編譯器將值視為其文字類型而不是一般類型的一種方式。
在這種情況下，true as const 表示水合物的類型將是字面值 true 而不是布林值。它本質上將水合物的值鎖定為 true。

範例：

interface ClientLoader {
  hydrate: true;  // The type of hydrate is set to the literal value `true`
}

const clientLoader: ClientLoader = {
  hydrate: true as const,
};

clientLoader.hydrate = true; // This is valid

// clientLoader.hydrate = false; // Error: Type 'false' is not assignable to type 'true'

• 在上面的範例中，clientLoader. Hydro 被明確鍵入為 true。由於 as const 斷言，您不能將 true 以外的任何值指派給 Hydrate。

• 當您想要強制某些屬性的不變性時，這種類型的分配非常有用。

1. clientLoader. Hydro = true;

如果沒有 as const 斷言，TypeScript 會將水合物的型別推論為布林值。這意味著可以為水合物指派任何布林值（true 或 false）。

範例：

interface ClientLoader {
  hydrate: boolean;  // The type of hydrate is set to `boolean`
}

const clientLoader: ClientLoader = {
  hydrate: true,
};

clientLoader.hydrate = true;  // This is valid
clientLoader.hydrate = false; // This is also valid

• 在這種情況下，由於水合物的類型為布林值，因此您可以為其指定 true 或 false。

• 它提供了在 true 和 false 之間切換的靈活性。

為什麼要使用 as const？

1. 強制不變性：const 鎖定值，使其無法變更為其他值。當您想要確保特定值在整個程式中始終相同時，這特別有用。

2. 可區分聯合的文字類型：使用可區分聯合時，as const 允許您基於文字類型建立特定情況，如下所示：
   

interface ClientLoader {
  hydrate: true;  // The type of hydrate is set to the literal value `true`
}

const clientLoader: ClientLoader = {
  hydrate: true as const,
};

clientLoader.hydrate = true; // This is valid

// clientLoader.hydrate = false; // Error: Type 'false' is not assignable to type 'true'

結論

1. 當您想要為屬性指派特定的文字值並強制該值保持固定時，請用作 const。

2. 當您想要允許屬性接受不同的布林值或不需要限制確切值時，請使用常規賦值（true、false 等）。

這使得 as const 成為一個有用的工具，可以在 TypeScript 程式碼中進行更精確的輸入和執行更嚴格的值約束。

以上是掌握 TypeScript 中的文字類型：true as const 與 true的詳細內容。更多資訊請關注PHP中文網其他相關文章！