React(TypeScript、Docker、WebPack)のプロジェクトの環境定数（@types global.d.ts）

目次

はじめに

以下の記事を参考に、DockerとWebPackを使用したプロジェクトに環境毎のWebPackを用意してください。
既にプロジェクトがある場合は、適時読み替えてください。

https://reigle.info/entry/2022/08/19/100000reigle.info

環境毎のWebPackを修正する

以下のように記載してください。
環境定数の内容は任意で記載してください。

const webpack = require("webpack");

module.exports = (env) => {
  return {
    plugins: [
      new webpack.DefinePlugin({
        ~~~~~環境定数ここから~~~~~
        HOGE: JSON.stringify("SAMPLE"),
        URL_TEST: JSON.stringify("https://hogehoge.com"),
        BOOL_TEST: JSON.stringify(false),
        ~~~~~環境定数ここまで~~~~~
      }),
    ],
  };
};

環境定数をプロジェクト内で使用出来るようにする

「/src」配下に「@types」のディレクトリを作成します。
「@types」のディレクトリ配下に「global.d.ts」のファイルを作成します。

以下のように環境定数と、その型を定義します。

declare const HOGE: string;
declare const URL_TEST: string;
declare const BOOL_TEST: boolean;

環境定数を使用する

環境定数を使用したい箇所で、その環境定数を使用するだけです。
※インポートなどは必要ありません。