Type Check help on Object with string index

Question

I have two objects that I would like to share similar keys that I can reference via string. All I want them to share is the keys, and I'd like to verify that no one can add any other keys via a type check.

So I've tried the following, but I am getting stuck on setting the options.

Or if there is a better way of doing this (I'm sure this is), I'd be happy to hear it.

So essentially, I'd like to ensure that options only contains specific values for each individual dropdown. When the dropdown gets selected, I'd like to update the property of another object based on the current key.

export interface Dropdown{
    label: string;
    disabled?: boolean;
    options: { [key: string]: Option};
}

export interface Option{
    label: string;
    selected?: boolean;
    value?: string;
    disabled?: boolean;
}

declare type DropdownTypes= "city" | "state";
declare type color= "blue" | "red";
declare type number= "1" | "2";

export type DropDowns= {
    [key in DropdownTypes]: Dropdown;
};

I'd like to be able to do:

Object.keys(s as DropDowns).forEach((k: string) => { const item = s[k]; })

But get Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

Answer 1

Object.keys returns always string[] therefore you will need the casting.

const keys = Object.keys(s) as DropdownTypes[];
keys.forEach(k => { const item = s[k];   })