Vue 3 + Typescript에서 소품 선언 작업

이 게시물에서는 <script setup>를 사용하여 Vue 3 + Composition API에서 구성 요소 소품으로 작업하는 방법을 보여줄 것입니다. 작업할 수 있는 방법이 거의 없습니다. 살펴보겠습니다!

defineProps() 매크로를 사용하여 다음과 같이 props를 선언할 수 있습니다.

1 - 문자열 배열

<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>

2 - 개체 구문

<script setup>
const props = defineProps({
  title: String,
  likes: Number
})

console.log(props.title)
</script>

2.1 - 세부 정보가 포함된 개체 구문

<script setup>
const props = defineProps({
     title: {
         type: String,
         required: true,
         default: '---'
     },
})
</script>

Vue 3에서 Typescript로 소품 작업하기

Typescript를 사용하여 Vue 3 스크립트 설정에서 소품을 선언하는 방법을 살펴보겠습니다.

1 - 유형 기반 선언

<script setup lang="ts">
defineProps<{
  title?: string
  likes: number
}>()
</script>

이 경우 제목과 좋아요 소품이 있고 제목은 선택 사항이고 좋아요는 필수 소품입니다.

2 - 기본 소품 값을 사용한 유형 기반 선언

<script setup lang="ts">
 withDefaults(defineProps<{
   title?: string
   likes: number,
 }>(), {
     // here we have default values
     title: '---',
 })
</script>

3 - PropType을 사용한 고급 유형

PropType 인터페이스를 사용하려면 vue에서 가져와야 합니다.

<script setup lang="ts">
import { type PropType } from 'vue'

export interface Book {
  title: string
  author: string
  year: number
}

const props = defineProps({
    book: {
        type: Object as PropType<Book>,
        required: true,
    }
})
</script>

그게 다야!

Component props 선언에 대한 자세한 내용을 읽고 알아보려면 Vue 3 official documentation about props.을 방문하십시오.

안녕!