Vue 3 - 5. Props With Types

<script>
import {EventItem,PropType} from '../types' // PropType: helper method

export default defineComponent({
  props:{
    event:{
      type: Object as PropType<EventItem>, // type: EventItem 또는 type: Object as EventItem으로 쓰면 에러가 발생
                                           // Props에서는 Vue에서 지정한 방법으로 타입을 정의해야한다.
      required: true
    }
  }
}) 
</script>

 

Generic 이란?

function createList(item:number) : number[] { // number뿐만 아니라 다른 타입에서도 작동하도록 resuable하게 만들자
  const newList : number[] = [];
  newList.push(item);
  return newList;
}

위의 함수를 number뿐만아니라 string또는 Boolean과 같은 다른 타입의 리스트를 반환하도록 만들고 싶다.

Genericc은 함수에서 사용되는 변수의 type을 Dynamic하게 정의할 수 있도록 해준다.

fucntion createList<T>(item:T):T[]{
  const newList: CustomType[] = [];
  newList.push(item);
  return newList;
}

const numberList = createList<number>(123);
const stringList = createList<string>("Hello");