Определение интерфейса Typescript с подписью индекса не позволит мне иметь несколько определений типов

Question

Typescript выдает ошибку, когда я создаю новое свойство для интерфейса, имеющего подпись индекса.

Я новичок в машинописи и конвертирую файлы .js в файлы .ts. У меня возникли некоторые проблемы при создании интерфейса для следующего объекта.

{
  header: ['The DevTools framework',],
  extensions: {
    adInfo: {
      description: 'Provides ad-related information.',
      ui: 'yes',
      loaded: typeof dt.adInfo !== 'undefined' ? 'yes' : 'no',
    }
    name: 'dt', //NOTE: Having trouble with this property.
  },
  footer: ['new tool is available',],
};

Созданный мною интерфейс:

interface config {
 header: string[];
 extensions: {
   [keys: string]: {
     description: string;
     ui: string;
     loaded?: string;
   };
 };
 footer: string[];
}

Первой проблемой была машинопись с жалобой на имя;в частности,

Type 'string' is not assignable to {description: string; ui: string; loaded?: string;};

Затем я попытался обновить значение подписи индекса как объекта или строки, см. ниже.

interface config {
 header: string[];
 extensions: {
   [keys: string]: {
     description: string;
     ui: string;
     loaded?: string;
   } | string
 };
 footer: string[];
}

Это вызвало некоторые неожиданные проблемы ... Где бы я ни пытался деконструировать объект расширений, машинописный текст выдает следующую ошибку:

Property 'description' does not exist on type 'string | { description: string; ui: string; loaded: string; help: any[]; name: string; 'compatible with this browser'?: boolean | undefined; }

Я только что удалил свойство name из объекта, но я хотел бы знать, почему, когдаУ меня есть оператор ИЛИ, машинопись не принимает определение объекта. Кажется, это только строка.

Заранее спасибо.

Answer 1

Я думаю, у вас есть несколько вариантов здесь. Вы можете обобщить ваш интерфейс следующим образом:

interface config {
 header: string[];
 extensions: {
   [keys: string]: {
     description: string;
     ui: string;
     loaded?: string;
   } | string;
 };
 footer: string[];
}

Или вы можете более конкретно указать свои дополнительные ключи:

interface config {
  header: string[];
  extensions: {
    adInfo: {
      description: string;
      ui: string;
      loaded?: string;
    };
    name: string;
  };
  footer: string[];
}

Обе эти опции можно увидеть в * 1007. * файл на коды и коробки здесь .