Vue3 + Typescript Props interface 사용법 기본값 설정

Props는 자식 컴포넌트에게 데이터를 전달할 수 있는 방법입니다.

 

Vue3에서 타입스크립트를 이용해서 사용할 수 있습니다.

Vue3에서 <script setup>을 사용하는 방법과 사용하지 않는 방법이 있습니다.

 

타입스크립트와 setup으로 사용하시려면 아래와 같이 

스크립트문을 선언하고 사용할 수 있습니다.

<script setup lang="ts">
// code
</script>

 

<script setup> 없이 Props 사용하기

export default {
  props: {
    name: {
      type: String,
    },
    age: {
      type: Number,
    },
  },
};

<script setup> 으로 Props 사용하기

const props = defineProps({
  name: {
    type: String,
  },
  age: {
    type: Number,
    default: 20,
  },
});

이 방법으로 사용할 수 있지만, 타입스크립트를 쓰는 의미가 없어서 다른 방법도 있습니다.

 

interface로 타입 정의 하고 Props 사용하기

interface로 타입을 선언하과

defineProps 제네릭타입으로 선언합니다.

interface Props {
  name: String;
  age?: Number;
}
const props = defineProps<Props>();

 

Props에 기본값 넣기 1 - withDefaults

interface Props {
  name: String;
  age?: Number;
}

const props = withDefaults(defineProps<Props>(), {
   age: 20
});

 

withDefaults 컴파일러 매크로입니다.

해당 매크로를 사용하면 Property 속성을 default 값이 생기게 됩니다.

 

@Deprecated - Props에 기본값 넣기 2 - 구조 분해

interface Props {
  name: String;
  age?: Number;
}
const { age = 30 } = defineProps<Props>();

간단하게 구조 분해를 이용해서 값을 넣을 수 있습니다.

하지만 해당 방법 현재 방법은 실험적인 방법으로 폐기되었습니다.

 

사용을 하려면 vue-macro를 설치해야 합니다.

Nuxt 3에서 해당 설정을 해야 합니다.

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    reactivityTransform: true,
  },
});

Reactivity Transform | Vue.js