'How can I generate the object for the datetimeFormats option of createI18n using typescript

Hi I am working with Vue and TypeScript for the first time and trying to understand how I can safely convert some data in a set of objects in to a object that i18n expects for one of it's options properties.

From i18n's examples you would normally set

datetimeFormats :dateTimeFormats = {
  en: {
    short: { year: "numeric", month: "short", day: "numeric" }
  },
  ar: {
    short: { year: "numeric", month: "long", day: "numeric" }
  }
}

However I am trying to collect as much configuration for a specific Locale as I can in to one class to allow developers to add another object of that class to a collection of supported Locales that will be used around the application.

My issue comes when trying to collate the time formats for each locale in to the expected object / format for the i18n Options parameter, I get warnings from typescript

TS2322: Type 'object' is not assignable to type 'DateTimeFormats'.   Index signature for type 'string' is missing in type '{}'.

and I'm not fully sure what is happening, so what does this mean and how should it be done properly? my example below:

// I have a class to keep information about individual locales together
export class Locale {
  code: string;
  dates: object;


  constructor(code: string, string, dates: object) {
    this.code = code;
    this.dates = dates;
  }
}

// I then export a static list of supported locales along with all the information relating to 
// that Locale so a developer simply has to create another entry in this list to add support for a
// new Locale

export const supportedLocales: Locale[] = [
  new Locale('en-GB',  { short: { year: 'numeric', month: 'short', day: 'numeric' } }),
  new Locale('en-US',  { short: { month: 'short', year: 'numeric', day: 'numeric' } })
];

// Here I'm trying to convert my Locale objects in to the structure that the i18n Config is expecting

const datetimeFormats: object = (): object => {
  const result: any = {};
  supportedLocales.forEach((l) => (result[l.code] = l.dates));
  return result;
};


export const i18nConfig = createI18n({
  globalInjection: true,
  datetimeFormats : datetimeFormats,     // here I get the exception / warning from typescript 
  messages
});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source