process.envのundefinedを回避したい

Question

Reactで下記のような環境変数を読み込ませたいのですが,env以下においてundefiendの可能性があるよと怒られてしまいました.

const info = {
  domain: process.env.REACT_APP_AUTH0_DOMAIN,
  clientId: process.env.REACT_APP_AUTH0_CLIENT_ID,
  redirectUri: "http://localhost:3000",
};

型定義を見ると下記のような者が見つかりました

interface Dict<T> {
        [key: string]: T | undefined;
    }

多分,これが原因だと思うんですが個人的に勝手にnode_module内の型定義を変えない方がいいと思ったので,
今回のような場合どのように回避することができるのでしょうか？

Answer 1

プロジェクトのルートに declarations.d.ts を作成し、以下を書き込んでみてください。これにより型定義を拡張することが出来ます。

namespace NodeJS {
  interface ProcessEnv {
    readonly REACT_APP_AUTH0_DOMAIN: string
    readonly REACT_APP_AUTH0_CLIENT_ID: string
  }
}

Answer 2

デフォルト値を書いておくのはいかがでしょうか？

const info = {
  domain: process.env.REACT_APP_AUTH0_DOMAIN || 'localhost',
  clientId: process.env.REACT_APP_AUTH0_CLIENT_ID || '0',
  redirectUri: "http://localhost:3000",
};