TypeScript로 .env 구문 분석

Node.js로 작업할 때 자격 증명과 비밀을 별도의 파일.env에 보관하는 것이 일반적이며 저장소로 푸시되지 않습니다. 코드에서 이러한 변수에 액세스하려면 dotenv 패키지를 사용하여 .env 파일을 구문 분석하고 env 변수를 process.env에 로드합니다.

예시

다음은 일반 JavaScript에서 이를 수행하는 방법에 대한 간단한 예입니다.

// .env

API_KEY = <YOUR_API_KEY>
DB_URI = <YOUR_DB_URL>
....

이제 이러한 변수에 액세스하려면 다음과 같이 할 수 있습니다.

// index.js

const dotenv = require('dotenv');

dotenv.config()

const connectDB = () => {
  ...
  mongooose.connect(process.env.DB_URI)
  ...
}

JavaScript는 유형에 대해 별로 신경 쓰지 않기 때문에 process.env의 모든 속성에 거의 액세스할 수 있고 코드를 실행하고 process.env.DB_URI가 undefined임을 확인할 때까지 코드에서 빨간색 기호를 제공하지 않습니다. .

이제 TypeScript에서 동일한 작업을 수행하고 완전한 유형을 유지하고 유형이 지정된 시스템과 함께 제공되는 모든 이점을 가져야 한다고 가정해 보겠습니다. 완전한 유형을 유지하려면 먼저 인터페이스에서 사용자 정의 env 변수를 사용할 수 있도록 인터페이스를 확장해야 합니다ProcessEnv. 이를 위해 동일한 이름을 가진 두 개 이상의 선언을 결합하기 위한 TypeScript 기능인 Declaration-Merging을 사용해야 합니다.

이 트위터 스레드에서 이 기능과 사용 사례에 대한 간략한 개요를 볼 수 있습니다.






아스자다니스









오늘 저는 TypeScript에서 선언 병합을 우연히 발견했습니다. 그게 뭐죠?TS 컴파일러가 동일한 이름을 가진 두 개의 개별 선언을 단일 정의로 병합할 때 기본적으로 프로세스의 멋진 이름입니다. 사용 방법 👇


오후 21:06 - 2021년 8월 26일









동일한 기능을 사용하여 사용자 정의 환경 변수로 ProcessEnv 인터페이스를 확장합니다.

아래 내용으로 global.d.ts라는 파일을 만듭니다.

namespace NodeJS {
  interface ProcessEnv {
    NODE_ENV: string;
    PORT: string;
    MONGO_URI: string;
  }
}

위에서 우리는 NodeJS 네임스페이스에서 액세스할 수 있는 ProcessEnv 인터페이스를 확장하고 사용자 정의 환경 변수 유형을 지정했습니다.

이제 코드에 process.env를 작성하면 intellisense는 process.env에서 사용할 수 있는 필드를 자동으로 제안합니다. 이는 훌륭한process.env.MONGO_URI가 더 이상 코드에서 수수께끼가 아닙니다.
tsconfig.json에서 이 파일의 경로를 지정했는지 확인하십시오.

더 나은 접근 방식은 extended-types라고 말할 수 있는 폴더를 만들고 거기에 모든 확장 유형을 유지하고 단일 파일 대신 여기에 해당 폴더의 경로를 지정하는 것입니다.

"typeRoots": ["./global.d.ts", "./node_modules/@types"]

이제 config.ts 파일을 구문 분석하고 코드에서 사용하려는 고유한 사용자 지정.env 유형으로 변환하기 위한 논리를 캡슐화하는 Config 파일을 생성해 보겠습니다.

import path from "path";
import dotenv from "dotenv";

// Parsing the env file.
dotenv.config({ path: path.resolve(__dirname, "../config/config.env") });

// Interface to load env variables
// Note these variables can possibly be undefined
// as someone could skip these varibales or not setup a .env file at all

interface ENV {
  NODE_ENV: string | undefined;
  PORT: number | undefined;
  MONGO_URI: string | undefined;
}

interface Config {
  NODE_ENV: string;
  PORT: number;
  MONGO_URI: string;
}

// Loading process.env as ENV interface

const getConfig = (): ENV => {
  return {
    NODE_ENV: process.env.NODE_ENV,
    PORT: process.env.PORT ? Number(process.env.PORT) : undefined,
    MONGO_URI: process.env.MONGO_URI
  };
};

// Throwing an Error if any field was undefined we don't 
// want our app to run if it can't connect to DB and ensure 
// that these fields are accessible. If all is good return
// it as Config which just removes the undefined from our type 
// definition.

const getSanitzedConfig = (config: ENV): Config => {
  for (const [key, value] of Object.entries(config)) {
    if (value === undefined) {
      throw new Error(`Missing key ${key} in config.env`);
    }
  }
  return config as Config;
};

const config = getConfig();

const sanitizedConfig = getSanitzedConfig(config);

export default sanitizedConfig;

이제 코드에서 config.ts를 간단하게 가져오고 필드에 액세스할 수 있으며 intelllisense가 구성 개체에 있는 필드에 대한 유형 유추를 제공하도록 하는 것이 매우 멋질 것입니다.

import mongoose from "mongoose";
import config from "./config";

const connectDB = async () => {
  const connection = await mongoose.connect(config.MONGO_URI);
  console.log(`🟢 Mongo db connected:`, connection.connection.host);
};

이 게시물이 도움이 되었기를 바라며 TypeScript로 작업할 때 동일한 개념을 다른 유사한 사용 사례로 확장할 수 있습니다.

이에 대한 제 접근 방식에 대한 제안이나 개선 사항이 있으면 언제든지 알려주세요. 언제든지 연락할 수 있습니다.