process.envの型定義方法
process.envの型定義方法
Node.jsを利用して開発しているとステージング環境とローカルなど異なる環境で別の変数を参照させたり、秘匿化したいキーなどを参照するためにprocess.envを利用する機会は多いです。
一方で.envファイルは型定義を持たないため入力補完が利用できません、せっかくTypeScriptで開発をしているので補完をしてもらうためにもprocess.envの型定義を拡張してみます。
この記事について
この記事ではNode.js及びTypeScriptの基礎的な説明については省略しています。
また、参考にした記事などについては文末にまとめて記載しております。
型定義ファイルの確認
まずは@types/node上の型定義から確認してみます。
processモジュールの型定義ファイルはprocess.d.tsで定義されています。
その中で定義されているProcessEnvというinterfaceがprocess.envの型定義となっています。
process.envと打つとTZ?が入力補完に出てくるため見たことがある人も多いのではないでしょうか。
process.env自体の型定義を変更したい
下記のようにprocess.envを別の変数に代入してその変数の型定義を行うことで補完を効かせる、という方法もあるかと思います。
import { env } from "node:process";
interface DefinedEnvVariable {
NODE_ENV?: string;
}
export const typedEnv: DefinedEnvVariable = env;
しかしながら標準モジュールをそのまま使えたほうがややこしくないと思いますので今回はprocessモジュールの型定義を拡張していきます。
型定義の拡張
下記のように定義することでProcessEnvを拡張することができます。
ここでは例として環境変数として利用されることの多いNODE_ENVを指定して型定義を拡張しています。
declare module 'process' {
global {
namespace NodeJS {
interface ProcessEnv {
NODE_ENV?: string;
// ...
}
}
}
}
interfaceは拡張可能で別の型定義とマージすることができるため、それを利用して既存のProcessEnv型に対してプロパティを追加しています。
.envファイルに追加された環境変数を手動でこの型定義に追加しなければならないのが難点ですが、プロパティ名が分かりその値がstring型として解釈されるためスムーズに開発が進められます。
実際に作成してみた環境
自分のNode.js + TypeScript用のテンプレートリポジトリに上記の機能を入れてみました。
process.env以外に型定義を拡張する必要性がなさそうな点と.envファイルと同じディレクトリに存在したほうが分かりやすいと思いプロジェクトルートに配置しています。
そのままだとtsconfig.jsonの設定が"include": ["src/**/*.ts"]になっているため"files": ["./env.d.ts"]という風にfilesで追加しています。
参考にさせていただいた記事・ドキュメント
Discussion