Vue.js는 웹 애플리케이션을 구축하기 위한 프로그레시브 프레임워크로, TypeScript와 함께 사용되면 타입 안정성을 지원하면서 더욱 견고한 애플리케이션을 구축할 수 있습니다. Vue.js 컴포넌트를 타입스크립트로 정의하는 방법에 대해 알아봅시다.

Vue 컴포넌트를 타입스크립트로 정의하는 방법

Vue 컴포넌트를 타입스크립트로 정의하기 위해서는 먼저 해당 컴포넌트에 대한 타입 정보를 가진 인터페이스를 선언해야 합니다. 이를 통해 해당 컴포넌트의 props, methods, data 등을 명시적으로 정의할 수 있습니다.

interface MyComponent {
  props: {
    message: string;
  };
  data: () => {
    count: number;
  };
  methods: {
    increment: () => void;
  };
}

위의 예제에서 MyComponent 인터페이스는 props 객체의 message 속성과 data 함수가 count 속성을 반환하며, methods 객체에는 increment 메서드가 선언되어 있습니다.

Vue 컴포넌트에 타입스크립트 인터페이스 적용하기

선언한 인터페이스를 활용하여 Vue 컴포넌트를 정의합니다.

import Vue from 'vue';

const myComponent = Vue.extend<MyComponent>({
  props: {
    message: String,
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <p>Count: {{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `,
});

Vue.extend 메서드를 사용하여 컴포넌트를 정의할 때, 제네릭 타입으로 선언한 인터페이스를 전달하면 해당 인터페이스에 정의된 타입 정보가 컴포넌트에 적용됩니다.

이제 타입스크립트를 사용하여 Vue 컴포넌트를 보다 안정적으로 정의하고 활용할 수 있게 되었습니다.

참고 자료

• Vue.js 공식 문서
• 타입스크립트 핸드북