TIL | env파일 자동완성 및 Triple-Slash Directives 정리

env 파일 자동완성 및 에러 해결

  const fetchData = async () => {
    const response = await fetch(process.env.REACT_APP_TEST_ENV) 
    // Type 'undefined' is not assignable to type 'RequestInfo | URL'.ts(2345)
    const result = response.json()
    return result
  }

  useEffect(() => {
    fetchData().then(console.log)

  },[])

• 위와 같이 .env 파일의 타입 이슈를 해결하기 위해서는 환경 변수(.env) 타입 설정이 필요하다.
• CRA 를 ts로 설치하였을때 src 디렉토리에 react-app-env.d.ts 파일이 생기는데, 해당 파일 내부에 아래와 같이 원하는 환경변수의 타입을 지정하면 자동완성 및 에러 해결이 가능하다.

/// <reference types="react-scripts" />

declare namespace NodeJS {
  interface ProcessEnv {
    REACT_APP_TEST_ENV: string; // 환경 변수의 타입을 지정하도록 한다. (기존의 ProcessEnv interface를 확장)
  }
}

---

 

Triple-Slash Directives

• 최상단에 /// <reference types="react-scripts" />로 주석 처리된 문구는, Triple-Slash Directives로, 단일 XML 태그를 포함한 한 줄 주석이며 컴파일러 지시어로써 사용된다.
• 파일간의 의존성을 선언하는 역할을 하며, 컴파일 프로세스에 추가적인 파일을 포함하도록 컴파일러에게 지시한다.
• CRA에서는 react-scripts 모듈 의존성을 선언함으로써 react-app.d.ts파일이 컴파일 프로세스에 포함하도록 지시가 되는 것이다.
• 아래와 같이 react-scrips에서 기본적으로 타입을 제공하는 확장자들을 확인할 수 있으며, 추가로 타입이 필요한 경우 /// <reference types="react-scripts" /> 주석이 선언된 ~.d.ts파일 내부에 원하는 확장자, 환경 등의 타입을 확장함으로써 사용할 수 있다. (기존에는 프로젝트 초기 세팅시, 필요 없다고 생각하고 삭제한 후에 필요한 확장자 파일 타입이 존재할 경우 ~.d.ts 파일 추가 및 타입 지정을 하였지만 불필요한 작업인 듯싶다.)

/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: 'development' | 'production' | 'test';
    readonly PUBLIC_URL: string;
  }
}

declare module '*.avif' {
  const src: string;
  export default src;
}

declare module '*.bmp' {
  const src: string;
  export default src;
}

declare module '*.gif' {
  const src: string;
  export default src;
}

declare module '*.jpg' {
  const src: string;
  export default src;
}

declare module '*.jpeg' {
  const src: string;
  export default src;
}

declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.webp' {
    const src: string;
    export default src;
}

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;
}

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

---

 

Reference

• Triple-Slash Directives - TypeScript
• Typescript and React .env
• typescript and create-react-app .env