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.

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.

type myDictionary<T> = {
	[key: string]: T;
}

const dictionaryObj1: myDictionary<string> = {
	name: "GeeksforGeeks",
	desc: "A Computer Science Portal"
}

const dictionaryObj2: myDictionary<boolean> = {
	isGeeksforGeeks: true,
}

if (dictionaryObj2.isGeeksforGeeks) {
	console.log(dictionaryObj1);
}

Output:

name: "GeeksforGeeks",   
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.

type myDictionary = {
	[key: string]: number | string | boolean;
}

const dictionaryObj1: myDictionary = {
	name: "GeeksforGeeks",
	desc: "A Computer Science Portal",
	workForce: 200
}

const dictionaryObj2: myDictionary = {
	isGeeksforGeeks: true,
}

if (dictionaryObj2.isGeeksforGeeks) {
	console.log(
		`Company Name: ${dictionaryObj1.name}
		Description: ${dictionaryObj1.desc}
		Workforce: ${dictionaryObj1.workForce}+`);
}

Output:

Company Name: GeeksforGeeks          
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.

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

const dictionaryObj1: myDictionary<{
	name: string;
	desc: string;
	workForce: number;
	isGeeksforGeeks: boolean;
}> = {
	name: "GeeksforGeeks",
	desc: "A Computer Science Portal",
	workForce: 200,
	isGeeksforGeeks: true
}

if (dictionaryObj1.isGeeksforGeeks) {
	console.log(
		`Company Name: ${dictionaryObj1.name}
		Description: ${dictionaryObj1.desc}
		Workforce: ${dictionaryObj1.workForce}+.`);
}

Output:

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

Using Intersection Types

Intersection types in TypeScript allow you to combine multiple types into one, ensuring that a dictionary can accept values of any type that is an intersection of the specified types. This method is useful for extending the possible types of values in a dictionary while maintaining type safety.

Syntax:

type Dictionary<T, U> = {
    [key: string]: T & U;
};

Example: The following example demonstrates how to use intersection types to extend the possible types of values in a dictionary. By intersecting two types, Person and Contact, the dictionary can store values that conform to both types.

type Person = {
    name: string;
    age: number;
};

type Contact = {
    phone: string;
    email: string;
};

type Dictionary<T, U> = {
    [key: string]: T & U;
};

const dictionaryObj: Dictionary<Person, Contact> = {
    entry1: {
        name: "Nikunj Sonigara",
        age: 22,
        phone: "123-456-7890",
        email: "[email protected]"
    },
    entry2: {
        name: "Dhruv Sonigara",
        age: 17,
        phone: "098-765-4321",
        email: "[email protected]"
    }
};

console.log(dictionaryObj.entry1.name); // Output: Nikunj Sonigara
console.log(dictionaryObj.entry2.phone); // Output: 098-765-4321
console.log(dictionaryObj.entry1.email); // Output: [email protected]

Nikunj Sonigara
098-765-4321
[email protected]