JIYIK CN >

Dictionaries or maps are used to quickly retrieve items from an object. TypeScript does not have any concept of maps or dictionaries.

Plain JavaScript has objects that can set and retrieve key-value pairs. TypeScript provides Recordtypes that represent dictionaries or mappings through plain JavaScript objects.

RecordTypes restrict keys and values ​​to be set in plain JavaScript objects.

RecordUsing types in TypeScript

Types in TypeScript Recordrepresent strict key-value pairs. More specifically, Record<K,V>they mean that objects only accept types K, and the values ​​corresponding to those keys should be types V.

Record<K,V>A key of will yield Kas type, while is Record<K,V>[K]equivalent to V. Recordtype is { [ key : K] : V }an alias for index signatures such as .

The following code snippet shows the equivalent index signature type and Recordtype structure used in TypeScript.

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);

Output:

"[INFO] : This is how Record Type can be used."

The above Recordtypes can also be expressed as index signatures.

type BannerTypeMap = {
    [level in LevelStrings] : string;
}

var bannerMessageInfo : BannerTypeMap = {
    info : "[INFO]",
    warning : "[WARNING]" ,
    danger : "[DANGER]",
    fatal : "[FATAL]"
};

BannerTypeMapis a Mapped Type object in TypeScript, used here as an index signature and bannerMessageInfogenerates all type messages in .

In the example above, all fields in the map are required, otherwise TypeScript may not compile. Partial types can Recordbe used with types to create stronger types.

PartialUsing and Recordtypes in TypeScript

PartialThe keyword can override some initial default properties with some passed properties. The following code snippet demonstrates this.

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});

Output:

{
  "height": 10,
  "width": 40,
  "shadow": 4
}