How to Extend the Possible Types of Values of Dictionary in TypeScript ?

A dictionary in TypeScript is a data type that can store the data in the form of key-value pairs. The dictionaries in TypeScript can be created using the type keyword, Interfaces, or simple objects. The type of the values in a dictionary can be predefined in TypeScript which can be extended to store values of different kinds. Let us discuss different ways to extend possible types of values of the dictionary.

Table of Content

Using Generics
Using Union types
By mapping types

By using Generics

The generic type can be used directly to declare a dictionary with extended value type by specifying them at the time of creating instances of that dictionary.

Syntax:

type dictionaryName<T> = {
    key: T;
};

Example: The below code example creates a dictionary with extended types of values using generic type.

Javascript

type myDictionary<T> = {
    [key: string]: T;
}
 
const dictionaryObj1: myDictionary<string> = {
    name: "w3wiki",
    desc: "A Computer Science Portal"
}
 
const dictionaryObj2: myDictionary<boolean> = {
    isw3wiki: true,
}
 
if (dictionaryObj2.isw3wiki) {
    console.log(dictionaryObj1);
}

Output:

name: "w3wiki",   
desc: "A Computer Science Portal"

Using Union types

The union type can be used to specify the multiple types for the values of a key in TypeScript dictionary. Different types will be seprated using the straight line (|).

Syntax:

type dictionaryName = {
    key: typesSeparatedUsingStraightLine;
}

Example: The below code will explain the way of defining the dictionaries with multiple type values.

Javascript

type myDictionary = {
    [key: string]: number | string | boolean;
}
 
const dictionaryObj1: myDictionary = {
    name: "w3wiki",
    desc: "A Computer Science Portal",
    workForce: 200
}
 
const dictionaryObj2: myDictionary = {
    isw3wiki: true,
}
 
if (dictionaryObj2.isw3wiki) {
    console.log(
        `Company Name: ${dictionaryObj1.name}
         Description: ${dictionaryObj1.desc}
         Workforce: ${dictionaryObj1.workForce}+`);
}

Output:

Company Name: w3wiki          
Description: A Computer Science Portal          
Workforce: 200+

By mapping types

We can specify the different types for the values inside the object passed as generic type to the dictionary which can mapped or iterated to set types of the values.

Syntax:

type dictionaryName<T> = {
    [keyType in keyof T]: any;
}

Example: The below code maps the types of the values for each key in TypeScript dictionary.

Javascript

type myDictionary<T> = {
    [keyType in keyof T]: any;
}
 
const dictionaryObj1: myDictionary<{
    name: string;
    desc: string;
    workForce: number;
    isw3wiki: boolean;
}> = {
    name: "w3wiki",
    desc: "A Computer Science Portal",
    workForce: 200,
    isw3wiki: true
}
 
if (dictionaryObj1.isw3wiki) {
    console.log(
        `Company Name: ${dictionaryObj1.name}
         Description: ${dictionaryObj1.desc}
         Workforce: ${dictionaryObj1.workForce}+.`);
}

Output:

Company Name: w3wiki          
Description: A Computer Science Portal          
Workforce: 200+

Tags:

#JavaScript #TypeScript #Web Technologies

Express.js Tutorial

What is a React component?