Zenn
😊

react-native-config + TypeScript | 環境変数に型安全にアクセスするための方法

2023/01/08に公開
iOS
React Native
React
Android Studio
env
tech

やりたいこと

React Native で環境変数を環境別に出し分ける機能要件を満たすためのライブラリツールに react-native-config を使用していた場合、型安全に定義した環境変数にアクセスできる様にしたい

使用技術

  • "react": "18.1.0"
  • "typescript": "^4.8.3"
  • "react-native": "0.70.2"
  • "react-native-config": "^1.4.11"

前提条件

  • iOS | react-native-config で dev と stg と prd の出し分けができること
  • Android | react-native-config で dev と stg と prd の出し分けができること

なので、これ以降は react-native-config を用いた
環境変数の出し分けは既に出来ている前提で話を進めます。

ですので、もし react-native-config を用いて
環境別に変数を出し分けることが出来ていなければ
まずは環境別で出し分けられるようにする作業を行ってください。

実現方法

結論、React Native でも TypeScript のアンビエント宣言を用いて JavaScript で記述されたライブラリに型情報を付与してあげればやりたいことを実現できます。これで型安全に環境変数にアクセスできる様になるので typo などのヒューマンエラーを仕組みで解決することが可能になります。

react-native-config.d.ts を作成する

declare module "react-native-config" {
  interface NativeConfig {
    MODE: "dev" | "staging" | "production";
  }

  export const Config: NativeConfig;
  export default Config;
}

アンビエント宣言ファイルを作成した後にドット記法でアクセスする

期待値通りになっていれば以下キャプチャの様にコード補完が効いているはずです。

実際のキャプチャ
react-native-config

確認方法はApp.tsxなどで以下のコードを記載してログを確かめてください！

import { Config } from "react-native-config";
console.log("Config.MODE", Config.MODE);
// expected output : 開発環境の場合 : dev | STG環境の場合 : stg | PRD環境の場合 : prd

参考文献

Discussion