본문 바로가기
프론트앤드 개발

nuxtjs .d.ts 파일에 전역 상수 추가하는 방법

by 긴자손 2023. 4. 18.
728x90
반응형

Nuxt.js에서 -9로 할당된 전역 상수를 만들려면, 다음과 같이 nuxt-env.d.ts 파일을 만들고, 해당 파일에서 상수를 선언하면 됩니다.

declare module '@nuxt/types' {
  interface Context {
    $myGlobalConsts: Readonly<{
      MINUS_NINE: number;
    }>;
  }
}

declare module '@nuxt/types/config/runtime' {
  interface NuxtRuntimeConfig {
    myGlobalConsts: Readonly<{
      MINUS_NINE: number;
    }>;
  }
}

위의 코드에서 Context와 NuxtRuntimeConfig를 확장하여 $myGlobalConsts 상수를 추가합니다. 또한, 읽기 전용인 Readonly를 사용하여 상수의 값이 변경되지 않도록 합니다.

이제 상수를 사용하려면, 다음과 같이 전역으로 선언된 Vue 인스턴스에서 해당 상수를 추가해주면 됩니다.

import Vue from 'vue';

Vue.prototype.$myGlobalConsts = Object.freeze({
  MINUS_NINE: -9,
});

이제 다른 Vue 컴포넌트에서 $myGlobalConsts를 사용할 수 있습니다.

<template>
  <div>
    {{ $myGlobalConsts.MINUS_NINE }}
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$myGlobalConsts.MINUS_NINE); // -9
  }
}
</script>

이렇게 함으로써, TypeScript를 사용하여 Nuxt.js에서 -9로 할당된 전역 상수를 만들수 있습니다.

 

728x90
반응형