Vue-Property-decorator

Vue Component

<template>
  <div>
    <h1>TypeScript with Vue</h1>
    <button @click="sayHi">say hi</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
  
// 데코레이터를 이용한 컴포넌트 정의
@Component
export default class App extends Vue {
  // data 속성
  message = 'hello';
 
  // methods 속성
  sayHi() {
    console.log(this.message);
  }
}
</script>

Props

부모 컴포넌트에서 자식 컴포넌트로 msg props를 내려 받았음

<template>
  <div  class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script  lang="ts">
import { Vue, Component, Prop } from  'vue-property-decorator'
  
@Component
export default class Child extends Vue {
  // '!'는 초기화 속성에 붙이는 prefix (타입스크립트에게 미리 알려주는 역할)
  @Prop() private msg!: string
}
</script>

// default 값을 정해줄 수 있음
@Prop({ default: false }) readonly showMsg!: boolean
@Prop(String) private msg!: string;
@Prop([String, Number]) private msg!: string;
@Prop({ default: 'hi' }) private msg!: string;

마무리

typescript + vuex를 공부하면서 작성한 예제는 여기에 올려 놓았다.

참고

vue-property-decorator