TypeScript 中的字典或 map 型別

Shuvayan Ghosh Dastidar 2023年1月30日
  1. 在 TypeScript 中使用 Record 型別
  2. 在 TypeScript 中使用 PartialRecord 型別
TypeScript 中的字典或 map 型別

字典或 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] 等價於 VRecord 型別是諸如 { [ 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 中使用 PartialRecord 型別

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
}
Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website