1
votes

Propriété Typescript sous forme de chaîne, comment obtenir l'interface

Pourquoi ai-je cette erreur? Comment donner une interface aux langues quand il s'agit d'un objet littéral dans un autre module externe?

L'élément a implicitement un type any car l'expression de type string ne peut pas être utilisée au type d'index {en: {title: string; }; es: {titre: chaîne; }; fi: {titre: chaîne; }; } .

Aucune signature d'index avec un paramètre de type string n'a été trouvée sur le type {en: {title: string; }; es: {titre: chaîne; }; fi: {titre: chaîne; }; } .ts (7053)

import React from 'react';
import { languages } from './utils/languageData'

interface IProps {
  lang: string
}

function LanguageSelect(props: IProps) {
  const { lang } = props

  const getText = (langId: string, propVal: string): string => {
    const result = languages[langId][propVal]
    const txt = result ? 'error' : result
    return txt
  }

  return (
    <div className="LanguageSelect" data-test="languageSelect-box">
      <div className="languageArea">{getText(lang, 'title')}</div>
    </div>
  );
}

export default LanguageSelect;

export const languages = {
  en: {
    title: "English"
  },
  es: {
    title: "EspaÃ±ol"
  },
  fi: {
    title: "Suomalainen"
  }
}

reactjs typescript

0 commentaires

3 Réponses :

1
votes

Vous devez le déclarer comme un type de dictionnaire

interface LangTitle {
    title: string;
}

export const languages: { [id: string] : LangTitle } = {
    en: {
       title: "English"
    },
    es: {
       title: "EspaÃ±ol"
    },
    fi: {
       title: "Suomalainen"
    }
};

Et y accéder comme ceci

const result = languages [langId] .title; code >

0 commentaires

0
votes

Vous pouvez rendre votre vérification de type plus stricte jusqu'aux accessoires du composant.

    import React from 'react';
    import { languages, LanguageKeys } from './utils/languageData'

    interface IProps {
      lang: LanguageKeys
    }

    function LanguageSelect(props: IProps) {
      const { lang } = props


      const getText = (langId: LanguageKeys, propVal: string): string => {
        const result = languages[langId][propVal]
        const txt = result ? 'error' : result
        return txt
      }


      return (
        <div className="LanguageSelect" data-test="languageSelect-box">
          <div className="languageArea">{getText(lang, 'title')}</div>
        </div>
      );
    }

    export default LanguageSelect;

puis:

export const languages = {
  en : {
    title: "English"
  },
  es: {
    title: "EspaÃ±ol"
  },
  fi: {
    title: "Suomalainen"
  }
};
export type LanguageKeys = keyof typeof languages;

De cette façon , vous ne pourrez pas transmettre des langues qui n'existent pas aux composants LanguageSelect et vous aurez la saisie semi-automatique et toutes ces bonnes choses aussi.

0 commentaires

1
votes

Vous pouvez exporter la variable languages comme ceci,

interface Lang {
    [key: string] : {
        [title: string]: string
    }
}


export const languages: Lang = {
    en : {
        title: "English"
    },
    es: {
        title: "EspaÃ±ol"
    },
    fi: {
        title: "Suomalainen"
    }
}

Accéder aux valeurs comme const result = languages [langId] [propVal] code > ne devrait pas produire l'erreur. Essayez sur tapuscrit terrain de jeu Playground Lien p>

0 commentaires