TypeScript 中的字典或 map 型別
Shuvayan Ghosh Dastidar
2023年1月30日
字典或 map 用於從物件中快速檢索專案。TypeScript 沒有任何 map 或字典的概念。
純 JavaScript 具有可以設定和檢索鍵值對的物件。TypeScript 提供 Record 型別，通過純 JavaScript 物件表示字典或對映。
Record 型別限制在純 JavaScript 物件中設定的鍵和值。
在 TypeScript 中使用 Record 型別
TypeScript 中的 Record 型別表示嚴格的鍵值對。更具體地說，Record<K,V> 表示物件只接受型別 K，並且對應於這些鍵的值應該是型別 V。
Record<K,V> 的鍵將產生 K 作為型別，而 Record<K,V>[K] 等價於 V。Record 型別是諸如 { [ key : K] : V } 之類的索引簽名的別名。
以下程式碼段顯示了 TypeScript 中使用的等效索引簽名型別和 Record 型別結構。
enum Level {
info = "info",
warning = "warning",
danger = "danger",
fatal = "fatal"
}
type LevelStrings = keyof typeof Level;
var bannerMessageInfo : Record<LevelStrings, string> = {
info : "[INFO]",
warning : "[WARNING]" ,
danger : "[DANGER]",
fatal : "[FATAL]"
};
function generateLogMessage(message : string , level : LevelStrings){
console.log(bannerMessageInfo[level] + " : " + message);
}
generateLogMessage("This is how Record Type can be used.", Level.info);
輸出：
"[INFO] : This is how Record Type can be used."
上述 Record 型別也可以表示為索引簽名。
type BannerTypeMap = {
[level in LevelStrings] : string;
}
var bannerMessageInfo : BannerTypeMap = {
info : "[INFO]",
warning : "[WARNING]" ,
danger : "[DANGER]",
fatal : "[FATAL]"
};
BannerTypeMap 是 TypeScript 中的 Mapped Type 物件，在這裡用作索引簽名並在 bannerMessageInfo 中生成所有型別的訊息。
在上面的示例中，對映中的所有欄位都是必需的，否則 TypeScript 可能無法編譯。部分型別可以與 Record 型別一起使用以建立更強大的型別。
在 TypeScript 中使用 Partial 和 Record 型別
Partial 關鍵字可以用一些傳遞的屬性覆蓋一些初始預設屬性。下面的程式碼段演示了這一點。
type PropStrings = 'height' | 'width' | 'shadow' ;
type Props = Record<PropStrings , number>
function CombineProps(props : Partial<Props> ){
var initProps : Props = {
height : 10,
width : 20,
shadow : 4
};
var finalProps = {...initProps , ...props};
console.log(finalProps);
}
CombineProps({width : 40});
輸出：
{
"height": 10,
"width": 40,
"shadow": 4
}
