[typescript] Vue.js에서 타입스크립트의 데코레이터 활용하기

15 Dec 2023

typescript

Vue.js와 타입스크립트(TypeScript)를 함께 사용하는 경우, 데코레이터를 활용하여 코드를 보다 간결하고 유연하게 만들 수 있습니다. 데코레이터는 클래스, 메소드, 프로퍼티 등을 꾸밈으로써 새로운 기능을 추가하는 방법을 제공합니다. Vue.js에서 타입스크립트의 데코레이터를 사용하는 방법을 살펴보겠습니다.

Vue 파일에서 데코레이터 사용하기

Vue 파일에서 타입스크립트 데코레이터를 사용하기 위해서는 ‘vue-class-component’와 ‘vue-property-decorator’ 패키지를 설치해야 합니다. 그런 다음, 데코레이터를 활용하여 Vue 컴포넌트를 작성할 수 있습니다.

// Vue 파일에서 데코레이터 사용 예시
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  @Prop(String) private message!: string;

  private get formattedMessage(): string {
    return this.message.toUpperCase();
  }
}
</script>

위 예시에서 @Component와 @Prop은 데코레이터를 이용하여 Vue 컴포넌트를 정의하고 프로퍼티를 선언하는 예시입니다.

데코레이터를 활용한 Vue 컴포넌트 작성

// 데코레이터를 활용한 Vue 컴포넌트 작성 예시
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  @Prop(String) private message!: string;

  private get formattedMessage(): string {
    return this.message.toUpperCase();
  }
}

위 예시에서 @Component는 Vue 컴포넌트를 정의하고, @Prop은 프로퍼티를 선언하는 역할을 합니다.

데코레이터를 활용한 Vuex 모듈 작성

데코레이터는 Vuex 모듈을 작성할 때에도 유용하게 활용될 수 있습니다. 아래 예시는 데코레이터를 사용하여 Vuex 모듈을 작성하는 방법을 보여줍니다.

// 데코레이터를 활용한 Vuex 모듈 작성 예시
import { Module, VuexModule, Mutation, Action } from 'vuex-class-modules';

@Module
export default class MyModule extends VuexModule {
  private count = 0;

  @Mutation
  private incrementCount() {
    this.count++;
  }

  @Action
  public async increment() {
    this.context.commit('incrementCount');
  }
}

위 예시에서 @Module, @Mutation, @Action 등의 데코레이터를 사용하여 Vuex 모듈을 정의하는 방법을 보여줍니다.

Vue.js와 타입스크립트를 함께 사용할 때, 데코레이터를 적극적으로 활용하면 코드를 보다 간결하고 가독성 있게 작성할 수 있습니다. 데코레이터를 사용하여 Vue 컴포넌트나 Vuex 모듈을 작성하는 방법에 대해 자세히 알아보았습니다.

더 많은 정보를 원하시면 Vue Property Decorator 및 Vuex-Class의 공식 문서를 참고하시기 바랍니다.