코드에서 $i18n, $route 등 provide로 제공된 객체... - 인프런

안녕하세요, 인프런 AI 인턴입니다.

hj님, 문의하신 내용에 대해 답변드립니다.

스크린 샷에서 보인 것처럼 nuxtApp.provide 또는 Auto-Import 된 모듈을 Template 영역에서 사용 시 발생하는 속성을 찾을 수 없다는 에러는 Vue와 TypeScript를 함께 사용할 때 발생하는 일반적인 문제 중 하나입니다. 이 경우, Vue 컴포넌트 내에서 TypeScript의 타입 정의가 필요 없는 일반 JavaScript 객체와 함수를 다루는 경우와 달리, TypeScript의 타입 체크 기능 때문에 해당 객체나 모듈의 타입을 명시해줘야 할 때가 있습니다.

강의에서 딱히 타입을 추가로 정의하지 않았다면, 아마도 강의에서 사용하는 프로젝트 설정이나 라이브러리 버전 등이 달라 생기는 문제일 수 있습니다. 혹은 강의에서는 타입 정의에 대한 부분이 생략되었을 가능성도 있습니다.

타입스크립트가 해당 속성을 인식할 수 있도록 하기 위해, 먼저 nuxtApp이나 다른 Auto-Import된 모듈에 대한 타입 정의가 포함된 파일(index.d.ts 등)을 프로젝트 내 적절한 위치에 추가하거나 수정해야 합니다. 이 때, 해당 모듈이나 라이브러리의 공식 문서를 참조하여 필요한 타입을 정확히 정의하는 것이 중요합니다.

예를 들어, Vue와 Nuxt를 사용하는 프로젝트에서 nuxtApp의 타입을 정의하려면, 프로젝트의 타입 정의 파일(가령 types/vue.d.ts 등) 내에 아래와 같은 방식으로 타입을 확장할 수 있습니다.

import Vue from 'vue';

declare module 'vue/types/vue' {
  interface Vue {
    $myProperty: string;
  }
}

여기에서 $myProperty는 예시이며 실제 사용하시는 속성 이름으로 교체하셔야 합니다.

더욱 구체적인 해결책을 제공받고 싶다면, 사용 중인 Nuxt 및 Vue 버전, 그리고 필요한 타입 정의에 대한 더 자세한 정보가 담긴 공식 문서나 커뮤니티를 참조하시길 바랍니다.

감사합니다.

인프런 커뮤니티 질문&답변

코드에서 $i18n, $route 등 provide로 제공된 객체가 템플릿에서 붉은색으로 표시됩니다.