CodingGarden / faqs

Welcome to the Coding Garden Frequently Asked Questions! If you are new here and you have a general question, it's very likely I've answered it already.
141 stars 14 forks source link

Typescript - How to describe a formatFunctions Object #14

Closed timondev closed 2 years ago

timondev commented 2 years ago

Example Object which contains functions, which are later accessed via formatFunctions[key].

const formatFunctions = {
  d(date: Date) {
    return date.getDate();
  },
  dd(date: Date) {
    return padZero(date.getDate(), 2);
  },
  D(date: Date, locale: Locale) {
    return locale.daysShort[date.getDay()];
  },
  DD(date: Date, locale: Locale) {
    return locale.days[date.getDay()];
  },
  m(date: Date) {
    return date.getMonth() + 1;
  },
  mm(date: Date) {
    return padZero(date.getMonth() + 1, 2);
  },
  M(date: Date, locale: Locale) {
    return locale.monthsShort[date.getMonth()];
  },
  MM(date: Date, locale: Locale) {
    return locale.months[date.getMonth()];
  },
  y(date: Date) {
    return date.getFullYear();
  },
  yy(date: Date) {
    return padZero(date.getFullYear(), 2).slice(-2);
  },
  yyyy(date: Date) {
    return padZero(date.getFullYear(), 4);
  },
};

The following line is now problematic, but I don't know how to fix it quickly:

const partFormatters = parts.map((token: string) => formatFunctions[token]);

// Element implicitly has an 'any' type because expression of type 'string' can't be used to index type
// '{ d(date: Date): number; dd(date: Date): string; D(date: Date, locale: Locale): string | undefined; 
// DD(date: Date, locale: Locale): string | undefined; ... 6 more ...; yyyy(date: Date): string; }'.

// No index signature with a parameter of type 'string' was found on type '{ d(date: Date): number;
// dd(date: Date): string; D(date: Date, locale: Locale): string | undefined; DD(date: Date, locale: Locale): 
// string | undefined; ... 6 more ...; yyyy(date: Date): string; }'.ts(7053)
w3cj commented 2 years ago
type Formatters = keyof typeof formatFunctions;
const fns = ['d', 'yyyy'].map(token => formatFunctions[token as Formatters]);