akameco/babel-plugin-react-intl-auto

TypeScript に関するドキュメントの追加

chitoku-k opened this issue · 1 comments

chitoku-k commented

便利なパッケージでとても重宝しています。ありがとうございます。

ドキュメントには特に記述はないものの、少し設定を加えれば TypeScript でもこれと extract-react-intl-messages の組み合わせで使用することができたので良ければドキュメントかサンプルとして追加してはどうかというご提案です。

  • version: v0.11.1
  • node version: v11.5.0
  • npm version: v6.5.0
  1. react-intl の型定義と Babel の TypeScript トランスフォーム用プラグインをプロジェクトに追加します。
$ npm i -D @types/react-intl @babel/plugin-transform-typescript
  1. 文字列値を持つ defineMessages の型定義を追加する必要があるため、プロジェクト側に index.d.ts などとして次のようなファイルを追加します。tsconfig.json 側で読み込まれるように設定されていれば問題ありません。
declare module 'react-intl' {
  interface ExtractableMessage {
    [key: string]: string
  }
  function defineMessages<T extends ExtractableMessage>(messages: T): Messages
}
  1. .babelrc も追記します。
{
  "plugins": [
    ["@babel/plugin-transform-typescript"],
    ["react-intl-auto"]
  ]
}

あとは例どおりに文字列値を持つメッセージを作成して extract-react-intl-messages を実行することで JavaScript と同じように生成されました。

（良さそうであれば PR 出しますがいかがでしょうか）

akameco commented

@chitoku-k 提案ありがとうございます！良さそうです！ぜひPRお願いします 🙏

  • 👍1