ref 타이핑

λ·° νƒ€μž…μŠ€ν¬λ¦½νŠΈ ν”„λ‘œμ νŠΈμ—μ„œ ref μ†μ„±μ˜ νƒ€μž…μ„ μ •μ˜ν•˜λŠ” 방법에 λŒ€ν•΄ μ•Œμ•„λ΄…λ‹ˆλ‹€.

ref μ†μ„±μ΄λž€?

ref 속성은 λ·°μ—μ„œ νŠΉμ • DOMμ΄λ‚˜ μ»΄ν¬λ„ŒνŠΈμ˜ 정보λ₯Ό μ ‘κ·Όν•˜κΈ° μœ„ν•΄ μ‚¬μš©ν•˜λŠ” μ†μ„±μž…λ‹ˆλ‹€.

<div ref="my"></div>

<script>
new Vue({
  mounted() {
    console.log(this.$refs.my); // HTMLDivElement
  }  
})
</script>

ref 속성 νƒ€μž… μ •μ˜ 방법

λ·° μ»΄ν¬λ„ŒνŠΈ νŒŒμΌμ—μ„œ ref 속성을 μ‚¬μš©ν•  λ•ŒλŠ” μ•„λž˜μ™€ 같이 νƒ€μž…μ„ μ •μ˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.



Β 






Β 
Β 
Β 

Β 




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

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

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

반볡적인 νƒ€μž… μ½”λ“œ μ€„μ΄λŠ” 방법

μ»΄ν¬λ„ŒνŠΈλ§ˆλ‹€ 맀번 μœ„μ™€ 같은 ν˜•νƒœμ˜ νƒ€μž…μ„ μ •μ˜ν•˜κΈ°κ°€ λ²ˆκ±°λ‘­λ‹€λ©΄ μ½”λ“œλ₯Ό μ’€ 더 쀄일 수 μžˆλŠ” μ œλ„€λ¦­ νƒ€μž…μ„ μ„ μ–Έν•©λ‹ˆλ‹€.

// src/types.ts
type MyVue<T> = VueConstructor<Vue & T>;
type MyVueRefs<T> = VueConstructor<Vue & { $refs: T }>;

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