How to Iterate Over String Indexed Array In TypeScript?

It's not an array—it's an object with string keys and values of type MyColorClass.

What you can do, is turn it into an array by getting an array of the object's keys then mapping the keys to the properties of the object:

const colors = Object.keys(MyClass.colorsByName).map(key => MyClass.colorsByName[key]);

Since you might do this a lot, you could create a reusable function to turn the properties into an array:

function propsToArray<T>(obj: { [index: string]: T; } | { [index: number]: T; }) {
    return Object.keys(obj).map(prop => obj[prop]);
}

Then you use it like so:

for (const color of propsToArray(MyClass.colorsByName)) {
    // use color here
}

Side note: You may just want to store this cached on a static property of MyClass.

Object.values

Alternatively, you could also use Object.values():

for (const color of Object.values(MyClass.colorsByName)) {
    // use color here
}

But you might need to add a polyfill if you use that.

for..in

When looking at the Typescript documentation (Typescript: Iterators and Generators), we see that the for..in syntax will iterate over the keys of the object.

for..in returns a list of keys on the object being iterated, whereas for..of returns a list of values of the numeric properties of the object being iterated.

We can use that to our advantage to index into our object and get the strongly typed value:

// Go through each key of the indexed object:
for (const key in indexedObject)
{
   // Get the indexed item by the key:
   const indexedItem = indexedObject[key];
   // Now we have the item.

   // Use it...
}

Solution

We can use that to get an elegant solution to the question:

// Go through each named color:
for (const colorName in colorsByName)
{
   // Get the strongly typed color with this name:
   const color = colorsByName[colorName]; // : MyColorClass
   // Now we have the the strongly typed color with this name.

   // Paint the world in a techni-colour rainbow...
}