Access an objects keys when the object implements an interface?

Question

In this demo there are two objects. KEYS and KEYS2. If we import KEYS in index.ts we get autocomplete for K1 and K2 because KEYS does not implement an interface.

With KEYS2 we don't because it implements an interface.

This is the stackblitz.

export interface IKeyObject {
  [key:string]: IKeyValue | any
} 

export interface IKeyValue {
  key:string
  value:any
}

export const KEYS = {
  K1: 'K1',
  K2: 'K2'
}

export const KEYS2:IKeyObject = {
  K1: { key:'', value:''},
  K2: {key:'', value:''}
}

Is there a way to implement the interface and get autocomplete for the keys on the object at the same time?

So in other words if we import KEYS2, and us it in a constructor:

constructor() {
    const v = KEYS.
}

VSCode will give us the properties on the object as autocomplete values?

Zachary Haber · Accepted Answer · 2020-05-02 02:40:05Z

2

Make your KEYS an enum and your IKeyObject a Record and things should work

The only type issue left is that you are using IKeyValue | any which is effectively just any.

export enum KEYS {
  K1 = "K1",
  K2 = "K2"
}
export type IKeyObject = Record<KEYS, IKeyValue | any>;

export interface IKeyValue {
  key: string;
  value: any;
}

export const KEYS2: IKeyObject = {
  K1: { key: "", value: "" },
  K2: { key: "", value: "" }
};

You should now be able to have autocomplete on KEYS2 to show K1 and K2 as options, though you'll have to remove any from IKeyObject to get more autocomplete.

Stackblitz Example with everything I mentioned and removing any.

answered May 2, 2020 at 2:40

Zachary Haber

11.1k1 gold badge22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dmitrii Makarov Over a year ago

enum KEYS... can be replaced by type KEYS = 'K1' | 'K2';. But the idea is correct.

Zachary Haber Over a year ago

You can't if you want to be able access KEYS like it's both a type and a value, which is what is currently being done in Ole's code. Using a string enum for this can be better because of that feature.

Collectives™ on Stack Overflow

Access an objects keys when the object implements an interface?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related