느린 개발자

Nuxt2 Typescript 환경에서 $refs를 사용하려고 할 때 TS2532: Object is possibly 'undefined'  에러를 발생하여 어떤 방법으로 해결할지 알아본 내용에 대해서 소개해보려고 합니다. vue-property-decorator와 클래스 형식으로 사용하지 않고 Vue.extend로 구현한 내용입니다. 참고해 주세요!

 

에러 상황

Nuxt3 환경은 아직 여의치 않은 거 같아 Nuxt2 프로젝트로 진행을 하게 되었습니다. Js로 구현된 컴포넌트들을 Ts로 변환하면서 구현해 가던 중 $refs로 해당 자식 컴포넌트의 메서드를 호출하는 일이 생겨 사용할 때 이러한 에러가 났습니다.

• TS2532: Object is possibly 'undefined'
• TS2339: Property 'openSlot' does not exist on type 'Element | Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>> | (Element | Vue<...>)[]'.   Property 'openSlot' does not exist on type 'Element'.

에러

 

 

---

$refs 정의 방법

위에 에러 상황에서 $refs를 사용하는 방법에 대해서 알아보겠습니다. 저희는 VueConstructor 를 사용합니다.

div에 ref를 test로 정의하고 아래처럼 형식을 구성합니다. 타입은 div 박스니 HTMLDivElement로 설정하시면 됩니다.

<template>
  <div>
    <div ref="test"></div>
  </div>
</template>

<script lang="ts">
import Vue, { VueConstructor } from "vue";

export default (Vue as VueConstructor<
  Vue & { $refs: { test: HTMLDivElement } }
>).extend({
  mounted() {
    this.$refs.test;
  }
});
</script>

---

$refs  제네릭으로 정의 방법

<template>
  <div>
    <div ref="test"></div>
  </div>
</template>

<script lang="ts">
import Vue, { VueConstructor } from "vue";

type MyVueRefs<T> = VueConstructor<Vue & { $refs: T }>; // 제네릭으로 선언

export default (Vue as MyVueRefs<{ test: HTMLDivElement }>).extend({
  mounted() {
    this.$refs.test; 
  }
});
 
</script>

 

제 생각이지만,  만약 컴포넌트가 Vuetify나 Bootstrap을 사용하여 타입이 명확하지 않다면, 아니 잘 모르겠다면 위 코드 HTMLDivElement 타입을 any로 두고 사용하셔도 됩니다.