bicstone / ra-language-japanese

Japanese messages for react-admin

Home Page:https://www.npmjs.com/package/@bicstone/ra-language-japanese

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

README.md掲載サンプルにおける型エラー

yukinobu opened this issue · comments

こんにちは。素敵な翻訳を公開くださり、ありがとうございます😀

現バージョンのREADME.mdには、v3における使用方法として次のサンプルが書かれています。

import japaneseMessages from '@bicstone/ra-language-japanese';
import polyglotI18nProvider from 'ra-i18n-polyglot';

const messages = {
    ja: japaneseMessages
};
const i18nProvider = polyglotI18nProvider(locale => messages[locale], 'ja');

<Admin i18nProvider={i18nProvider}>
  ...
</Admin>

これを手元のプロジェクトに導入したところ、以下の TypeScript error に遭遇し、コンパイルに失敗しました。

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ ja: Required<TranslationMessages>; }'.
  No index signature with a parameter of type 'string' was found on type '{ ja: Required<TranslationMessages>; }'.  TS7053

    13 |   ja: japaneseMessages
    14 | };
  > 15 | const i18nProvider = polyglotI18nProvider(locale => messages[locale], 'ja');
       |                                                     ^
    16 |
    17 | const App = (): JSX.Element => (
    18 |   <Admin i18nProvider={i18nProvider} dataProvider={dataProvider}>

同エラーに対し手元では、次のように messages 変数の型を明示することで、エラーを解消しました。

import japaneseMessages from '@bicstone/ra-language-japanese';
import { TranslationMessages } from "@bicstone/ra-language-japanese/node_modules/ra-core";
import polyglotI18nProvider from 'ra-i18n-polyglot';

const messages: { [key: string]: TranslationMessages } = {
    ja: japaneseMessages
};
const i18nProvider = polyglotI18nProvider(locale => messages[locale], 'ja');

<Admin i18nProvider={i18nProvider}>
  ...
</Admin>

この修正が最善かどうか自信はありませんが、よろしければ参考にしてください。

お忙しい中、詳しくコメント頂きありがとうございます 💚
今回のエラーは、locale に ja 以外が来る可能性があるので暗黙的な any になると指摘されています。
実際に README のサンプルプログラムを用いると ja 以外が入った場合エラーが発生してしまうため、サンプルプログラムを修正し、TS のエラーを解消するようにします。
ご指摘頂くまで気づけませんでした。コメントに感謝しています 🙇🏻

READMEを修正しました。