Vue.js는 매우 강력한 이벤트 처리 기능을 제공합니다. 이러한 이벤트 처리를 타입스크립트로 수행하려면 몇 가지 주의할 점이 있습니다.

1. 이벤트 핸들러 정의

Vue 컴포넌트에서 이벤트 핸들러를 정의할 때, 핸들러 함수의 시그니처를 정확히 지정해야 합니다.

import Vue from 'vue';

export default Vue.extend({
  methods: {
    handleClick(event: MouseEvent): void {
      // 이벤트 핸들러 내용
    }
  }
});

위의 예제에서 handleClick 메소드는 MouseEvent를 매개변수로 받고, 반환 값으로 void를 가집니다.

2. 이벤트 호출

HTML 템플릿에서 이벤트를 호출할 때에도 이벤트 객체의 타입을 명시해주어야 합니다.

<template>
  <button @click="handleClick">클릭</button>
</template>

3. 커스텀 이벤트

커스텀 이벤트를 작성할 때에는 CustomEvent를 이용하여 발생시킨 값의 타입을 지정할 수 있습니다.

export default Vue.extend({
  methods: {
    handleCustomEvent() {
      const eventData: string = 'Custom Event Data';
      const event = new CustomEvent('custom-event', {
        detail: eventData
      });
      this.$emit('custom-event', event);
    }
  }
});

위의 예제에서 CustomEvent 생성자의 detail에 데이터 타입을 명시하여 커스텀 이벤트를 발생시킵니다.

타입스크립트를 사용하여 Vue 이벤트 처리를 할 때는 핸들러와 이벤트 호출 시의 타입을 명확히 지정함으로써 코드의 안정성을 향상시킬 수 있습니다.

이상으로 Vue 타입스크립트로 이벤트를 처리하는 방법에 대해 알아보았습니다.

Vue.js 공식 문서 TypeScript 공식 문서