Vue.js 및 TypeScript로 클래스 기반 구성 요소를 작성하는 방법

소개

Vue.js 2는 클래스 스타일 구성 요소를 지원합니다. Angular(2+) 배경에서 온 경우 구성 요소의 더 복잡한 부분을 설명하기 위해 속성 및 데코레이터를 사용하여 클래스로 구성 요소를 작성하는 패턴에 익숙할 것입니다.

표준 Vue.js 구성 요소에 비해 클래스 스타일 구성 요소가 갖는 가장 큰 장점은 이것이 컴파일된 구성 요소에서 실제로 가리키는 위치를 더 명확하게 만들고 더 간결한 코드를 허용한다는 것입니다.

이 기사에서는 vue-class-component 및 vue-property-decorator를 사용하여 Vue.js 클래스 기반 구성 요소에서 TypeScript를 지원하는 방법을 소개합니다.

전제 조건

이 문서를 따라 하려면 다음이 필요합니다.

• Node.js를 로컬에 설치했습니다. Node.js를 설치하고 로컬 개발 환경을 만드는 방법에 따라 수행할 수 있습니다.
• 단일 파일 구성 요소에 대한 어느 정도의 지식.
• TypeScript 규칙에 어느 정도 익숙합니다.

이 튜토리얼은 Node v15.1.0, npm v6.14.8, Vue.js v2.6.11, TypeScript v3.9.3, @vue/cli v4.5.0, vue-class-component v7.2.3 및 vue-property-decorator v8.4.2.

1단계 - 프로젝트 설정

vue-class-component 및 vue-property-decorator가 설치되어 있어야 합니다.

@vue/cli를 사용하여 새 Vue.js 프로젝트를 만들 수 있습니다.

npx @vue/cli create vue-typescript-example

이 자습서의 목적을 위해 구성에는 다음이 필요합니다.

@vue/-plugin-typescript는 typescript, vue-class-component 및 vue-property-decorator 를 설치합니다. .

그런 다음 프로젝트 디렉터리로 이동합니다.

cd vue-typescript-example

이 시점에서 TypeScript 및 클래스 스타일 구성 요소에 대해 설정된 Vue.js 프로젝트가 있습니다.

2단계 — TypeScript로 단일 파일 구성 요소 작성

클래스 구성 요소는 Vue 개체를 확장하는 TypeScript 클래스입니다. 단일 파일 구성 요소에서 <script> 언어를 ts로 설정하고 클래스를 default로 내보내야 합니다.

코드 편집기에서 App.vue를 열고 TypeScript로 이 예제 단일 파일 구성 요소를 만듭니다.

<template>
  <div>
    <label>Update myDataProperty
      <input :value="myDataProperty" @input="updateMyProperty($event)"/>
    </label>
    <div>{{ myDataProperty }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  // Data property
  myDataProperty: string = 'Data Property'

  // Component method
  updateMyProperty ($event: { target: { value: string } }) {
    this.myDataProperty = $event.target.value
  }
}
</script>

데이터 속성은 클래스 및 메서드에서 직접 정의됩니다.

@Component(componentConfig) 데코레이터가 이를 가능하게 합니다. Vue.js가 컴파일 과정에서 이해할 수 있는 형식으로 클래스를 변환합니다.

이 시점에서 브라우저에서 애플리케이션을 컴파일하고 관찰하면 입력 필드와 Data Property라는 단어가 표시됩니다. 입력 필드와 상호 작용하면 myDataProperty가 업데이트되고 변경 사항이 반영됩니다.

3단계 — 구성 요소 소품 사용

vue-property-decorator의 @Prop(config) 데코레이터를 사용하여 데이터 속성과 거의 같은 방식으로 입력 속성을 선언할 수 있습니다.

다음은 기본값이 입력 속성인 구성 요소 소품인 exampleProperty를 사용하는 TypeScript의 예입니다.

<template>
  <div>{{ exampleProperty }}</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  @Prop({ default: 'Input Property' })
  exampleProperty!: string
}
</script>

JavaScript에서 이는 다음과 같습니다.

export default {
  props: {
    exampleProperty: {
      type: String,
      default: 'Input Property'
    }
  }
}

이 시점에서 브라우저에서 애플리케이션을 컴파일하고 관찰하면 입력 속성 메시지가 표시됩니다.

4단계 - 계산된 속성 사용

계산된 속성은 클래스에서 getter 및 setters로 작성됩니다.

다음은 myComputedProp을 가져오고 난수를 반환하는 TypeScript의 예입니다.

<template>
  <div>{{ myComputedProp }}</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  get myComputedProp() {
    return Math.random()
  }
}
</script>

JavaScript에서 이는 다음과 같습니다.

export default {
  computed: {
    myComputedProp() {
      return Math.random()
    }
  }
}

이 시점에서 브라우저에서 애플리케이션을 컴파일하고 관찰하면 임의의 숫자가 표시됩니다.

5단계 - 감시자 사용

감시자는 @Watch(propertyString, config) 데코레이터로 만들 수 있습니다.

다음은 myWatchedProperty가 onPropertyChanged를 트리거할 때를 감시하는 TypeScript의 예입니다.

<template>
  <div>
    <label>Update myWatchedProperty
      <input :value="myWatchedProperty" @input="updateMyProperty($event)"/>
    </label>
    <div>{{ myWatchedPropertyStatus }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  myWatchedProperty: string = 'Watched Property'
  myWatchedPropertyStatus: string = ''

  @Watch('myWatchedProperty')
  onPropertyChanged(value: string, oldValue: string) {
    this.myWatchedPropertyStatus = 'Watched Property Changed'
  }

  updateMyProperty ($event: { target: { value: string } }) {
    this.myWatchedProperty = $event.target.value
  }
}
</script>

JavaScript에서 이는 다음과 같습니다.

export default {
  data() {
    return {
      myWatchedProperty: null
    }
  }

  methods: {
    onPropertyChanged(value, oldValue) {
      // ...
    }
  }

  watch: {
    myWatchedProperty: {
      handler: 'onPropertyChanged',
      immediate: false,
      deep: true
    }
  }
}

이 시점에서 브라우저에서 애플리케이션을 컴파일하고 관찰하면 입력 필드가 표시됩니다. 입력 값을 변경하면 Watched Property Changed 메시지가 표시됩니다.

결론

이 기사에서는 vue-class-component 및 vue-property-decorator를 사용하여 Vue.js 클래스 기반 구성 요소에서 TypeScript를 지원하는 방법을 배웠습니다.

이 기사에서는 @Component, get 및 set을 소개했습니다. vue-class-component에서 사용할 수 있는 선언의 전체 목록은 공식 문서를 참조하세요.

이 기사에서는 @Prop 및 @Watch도 소개했습니다. vue-property-decorator에서 사용할 수 있는 데코레이터의 전체 목록은 공식 문서를 참조하세요.

TypeScript에 대해 자세히 알아보려면 TypeScript 주제 페이지에서 연습 및 프로그래밍 프로젝트를 확인하십시오.