TypeScript 中的字典或 map 型別
Shuvayan Ghosh Dastidar
2023年1月30日
2022年5月18日
字典或 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
}
Author: Shuvayan Ghosh Dastidar