왜 타입에서 맘대로 지정 못 하는 거야??!?!??!?

<script>
import {DataType} from '@/composables/data'; // 데이터 타입 import

const props = defineProps({
 	data: {
    	type: Array,
        default: [] as DataType[],
    }
})
</script>

type에서는 너 맘대로 할 수 없다구~

• type에서는 기존과 다르게 타입도 꼭 대문자로 시작해야함
  • string, array로 쓰면 오류남...
• 외부에서 받아온 interface를 직접 넣어도 오류남...
• default 안 써주면 노란줄 찍찍 그어서 경고 떠서 꼭 넣어주는데 여기에 as로 타입을 단언해줄 수 있음 (근데 타입 단언 그렇게 선호하진 않음)

해결방법

<script>
import type {PropType} from 'vue'; // import 필요함
import {DataType} from '@/composables/data'; // 데이터 타입 import

const props = defineProps({
 	data: {
    	type: Array as PropType<DataType[]>, // PropsType을 as로 단언
        default: [] as DataType[],
    }
})
</script>

PropType

• 이제 props의 타입을 지정해줄 수 있고, DataType[]의 형태 가져옴
• type에 as를 이용하여 단언해줌 (여기 단언은 착한 단언이야^^)
  • 물론 default에도 빈 배열을 둘 거면 as 붙여줘야함
• import 시 뒤에 type 붙여서 import type으로 선언