Доступ к ключам объектов, когда объект реализует интерфейс?

Question

В этой демонстрации есть два объекта. КЛЮЧИ и КЛЮЧИ2. Если мы импортируем KEYS в index.ts, мы получаем автозаполнение для K1 и K2, потому что KEYS не реализует интерфейс.

С KEYS2 мы этого не делаем, потому что он реализует интерфейс.

Это блик стека.

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:''}
}

Есть ли способ реализовать интерфейс и получить автозаполнение для ключей объекта одновременно?

Другими словами, если мы импортируем KEYS2 и используем его в конструкторе:

constructor() {
    const v = KEYS.
}

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

Answer 1

Сделайте ваши KEYS перечислением, а IKeyObject a Record и все должно работать

Единственная проблема, связанная с типом, заключается в том, что вы используете IKeyValue | any, что фактически просто 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: "" }
};

Теперь у вас должна быть возможность автозаполнения на KEYS2 для отображения K1 и K2 в качестве параметров, хотя вам придется удалить any из IKeyObject, чтобы получить больше автозаполнения.

Пример Stackblitz со всем, что я упомянул, и удаление any.