字符串文字類型與字符串類型的聯合

Question

我想在我的組件道具中的一些預定義顏色上使用 typescript 的智能感知。 但是用戶也可以將任何十六進制顏色傳遞給該道具。

type PREDEFINED_COLORS = 'success' | 'error' | 'info';

type Props = {
   color: PREDEFINED_COLORS | string;
}

我知道PREDEFINED_COLORS也是一個字符串，但我相信應該有一些解決方法來實現智能感知的好處。

你有什么建議嗎？

Answer 1

您最安全的選擇是使用templated string type 。 像這樣的東西：

type PREDEFINED_COLORS = 'success' | 'error' | 'info';

type Props = {
   color: PREDEFINED_COLORS | `#${string}`;
}

您可以嘗試進一步縮小類型，創建一個 hexDigit，然后從那里構建整個類型。 像這樣的東西：

type hexDigit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | 'a' | 'b' | 'c' | 'd' | 'e' | 'f'
type hexColor = `#${hexDigit}${hexDigit}${hexDigit}${hexDigit}${hexDigit}${hexDigit}`

這樣做的問題是 TS 將生成hexDigit類型的整個叉積，最終將成為一個巨大的類型。 更確切地說，它將有 2^32 個項目，遠遠高於他們擁有的 100k 限制。 你可以在這里了解更多。