[Typescript] shims-vue.d.ts와 env.d.ts 차이

shims-vue.d.ts와 env.d.ts의 차이

d.ts는 무엇인가?

• type declare에서 따온 것으로 생각하면 되며 type을 정의하기 위해 존재하는 파일이다.
  • 즉, JS코드의 타입 정보를 이해할 수 있도록 도와준다.
• TS환경에서 타입 체킹이 필요한 타입들을 불러서 체크해야되기 때문에 @types로 시작되는 라이브러리들이 있는 이유이다.

shims-vue.d.ts

• Vue 파일을 Typescript 환경에서 인식할 수 있도록 도와주는 파일이다.

  • Typescript는 .vue 파일을 모듈로 인식하지 못하기 때문에 이를 해결하고자 위의 파일을 활용한다.

    // shims-vue.d.ts 예시
    declare module '*.vue' {
      import { DefineComponent } from 'vue';
      const component: DefineComponent<{}, {}, any>;
      export default component;
    }

  • 내용을 간략하게 보자면, DefineComponent는 Vue3에서 컴포넌트를 타입으로 정의하며 .vue 파일을 컴포넌트로 봤을 때 타입을

env.d.ts

• 환경 변수(process.env, import.meta.env) 타입을 정의하는 파일
• vite, next 등 타입 선언, 환경 설정, 커스텀 타입 등에 활용된다.
  • .env파일과 env.d.ts의 연결을 진행

shims-vue.d.ts vs env.d.ts

• 사실 둘의 비교를 통해 차이점을 알기는 어렵지만, .d.ts 파일이 뭔지, 파일이 존재하지만 어떤 역할을 하는지 알고자 글을 작성하였다.