TypeScript Dictionary

TypeScript Dictionary

Different ways to strongly-type a dictionary / hash / map in TypeScript. This post covers different ways to strongly-type a dictionary in TypeScript. Dictionaries are sometimes referred to as a hash or a map - basically it is a collection of key-value pairs. We are going to focus on dictionaries where the keys are unknown - if we know the keys then a type alias or interface can be used.

Different ways to strongly-type a dictionary / hash / map in TypeScript.

This post covers different ways to strongly-type a dictionary in TypeScript. Dictionaries are sometimes referred to as a hash or a map - basically it is a collection of key-value pairs. In this post we are going to focus on dictionaries where the keys are unknown - if we know the keys then a type alias or interface can be used.

The problem

TypeScript needs to understand the full representation of an object before it is accessed. For example, the following code is fine in JavaScript but raises a type error in TypeScript:

let scores = {};
scores.bill = 10; // 💥 - Property 'bill' does not exist on type '{}'

The following code outputs undefined to the console in JavaScript but raises a type error in TypeScript:

let scores = { bill: 10 };
console.log(scores.fred); // 💥 - Property 'fred' does not exist on type '{ bill: number; }'

We can use any in a type annotation, but then no type checking will occur on the dictionary:

let scores: any = {};
scores.bill = 10; // ✔️ - no type error
scores.invalidProp = true; // ✔️ - no type error

We want some type checking to happen but have the flexibility to add keys into the dictionary at runtime.

Using an indexed object type annotation

We can use an indexed object type annotation as follows:

let scores: { [name: string]: number } = {};
scores.bill = 10; // ✔️ - no type error
scores.bill = "10"; // 💥 - Type 'string' is not assignable to type 'number'

Here we specify that the dictionary keys are strings and the values are numeric.

The “name” label can be anything we like. Often “key” is used:

let scores: { [key: string]: number } = {};
scores.bill = 10;

The label can’t be omitted though:

let scores: { [string]: number } = {};
// 💥 - 'string' only refers to a type, but is being used as a value here

Unfortunately we can’t restrict keys using a union type:

let scores: {
  [name: "bill" | "bob"]: number;
} = {};
// 💥 - An index signature parameter type cannot be a union type. Consider using a mapped object type instead

On a more postive note, we can have more complex value types:

type Person = {
  email: string;
  rating: number;
};
let scores: { [name: string]: Person } = {};
scores.bill = {
  email: "[email protected]",
  rating: 9,
};
scores.bob = {
  emailAddress: "[email protected]",
  // 💥  Type '{ emailAddress: string; rating: number; }' is not assignable to type 'Person'.
  rating: 9,
};

typescript javascript programming web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What is TypeScript? Why TypeScript? and Why Not TypeScript?

TypeScript extends JavaScript by adding Types. There are many great reasons to switch to TypeScript. Especially if your team uses JavaScript. There are some reasons to not use TypeScript as there are with any language or framework.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.