TypeScript Convertit n'importe quel tableau typé en tableau de valeurs clés génériques

Question

J'ai diverses données de tableau qui ressemblent à ceci:

Countries: [{code: "USA", countryDesc: "United States"},{code: "MEX", countryDesc: "Mexico"}]

et

States: [{code: "NY", countryDesc: "New York"},{code: "VA", stateDesc: "Virginia"}]

Ce que je veux pouvoir faire, c'est convertir le code / countryDesc ou code / stateDesc spécifique en une paire valeur / clé "générique" à utiliser. Par conséquent, ma routine de conversion me fournirait ceci:

[{key:"USA", value:"United States"},{key:"MEX", value:"Mexico"}]

et

[{key:"NY", value:"New York"},{key:"VA", value:"Virginia"}]

Mon objectif est d'écrire une fonction qui prend dans le tableau et les noms des propriétés pour la clé et la valeur, puis les convertit en un tableau avec une clé et une valeur au lieu des autres noms de propriété.

Ce que j'ai, c'est ceci:

export interface IAnyArray {
  key: string;
  value: string;
}

const convertToKeyValue = (
  array: IAnyArray[],
  keyname: string,
  valuename: string
) => {
  if (array && array.length > 0) {
    return array.map((a) => {
      return { key: a[keyname], value: array[valuename] };
    });
  }
};

J'obtiens l'erreur:

L'élément a implicitement un type 'any' car l'expression de type 'string' ne peut pas être utilisée pour indexer le type 'IAnyArray'. Aucune signature d'index avec un paramètre de type 'string' n'a été trouvée sur le type 'IAnyArray'.ts (7053)

pour un [nom clé] et un [nom valeur] dans la fonction.

Voici comment je le ferais, spécifique à l'entrée, mais j'aimerais un mécanisme "générique" si possible:

  const convertCountriesToKeyValue = (
    countries: { code: string; countryDesc: string }[]
  ) => {
    return countries.map((country) => {
      return { key: country.code, value: country.countryDesc };
    });
  };

J'ai cherché sur le Web et je ne trouve rien d'utile pour résoudre ce problème.

J'apprécierais toute aide à cet égard. Merci.

Answer 1

Si j'ai bien compris votre question, vous voulez passer un tableau d'objets de n'importe quel nom de propriété, mais renvoyez IAnyArray. Peut-être quelque chose comme ça?

const convertToKeyValue = <T extends any>(
    array: T[],
    keyname: keyof T,
    valuename: keyof T
) => {
    return array.map((a) => {
        return { key: a[keyname], value: a[valuename] };
    });
};

const countries = [{ code: "USA", countryDesc: "United States" }, { code: "MEX", countryDesc: "Mexico" }];

const keyValueCountries = convertToKeyValue(countries, "code", "countryDesc");

Terrain de jeux

Answer 2

D'après votre description, voici ce que vous recherchez:

const convertToKeyValue = (
  array: IAnyArray[],
  keyName: string,
  valueName: string
) => {
  return array.map((a) => {
    return {[keyName]: a.key, [valueName]: a.value}
  })
}

Lien Playground

Side-Note: Je recommanderais de conserver keyNameet valueNamecomme les deux premiers paramètres (comme je l'ai fait dans le terrain de jeu), pour rendre la fonction plus composable si vous décidez de la curry à l'avenir.