Clé d'objet d'accès tapuscrit dynamiquement

J'ai le fichier Theme.ts comme ci-dessous

export default {
  COLORS: {
    DEFAULT: '#172B4D',
    PRIMARY: '#5E72E4',
    SECONDARY: '#F7FAFC',
  }
};

Dans mon composant de bouton, j'importe le fichier de thème ci-dessus comme celui-ci -> import argonTheme from "../constants/Theme";

Dans mon composant de bouton, je veux avoir accès à cette couleur dynamiquement comme ceci

 const { small, shadowless, children, color, style, fontSize } = props;
 const colorStyle = color && argonTheme.COLORS[color.toUpperCase()];

Cette ligne me donne une erreur de dactylographie –> const colorStyle = color && argonTheme.COLORS[color.toUpperCase()];

C'est l'erreur que j'obtiens

Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ DEFAULT: string; PRIMARY: string; SECONDARY: string ...

Comment écrire cette ligne en tapuscrit ?

const colorStyle = color && argonTheme.COLORS[color.toUpperCase()];

Répondre

Vous devez fournir un type pour le COLORS objet :

// Theme.ts
const COLORS: Record<string, string> =  {
  DEFAULT: '#172B4D',
  PRIMARY: '#5E72E4',
  SECONDARY: '#F7FAFC',
}

export default { COLORS };

// Other Component:
const color= 'PRIMARY';
const colorStyle = color && COLORS[color.toUpperCase()];

Un exemple de travail ici.