[typescript] emit 에 타입지정하기 (ts파일 분리)

이슈

Emit에 타입을 지정하고 싶은데 막상 쪼갠 ts파일에서 하려니 쉽지 않았다. 아래는 공식문서에 있는 emit 타입지정에 관한 내용이다.

출처: https://v3.vuejs.org/api/sfc-script-setup.html#typescript-only-features

 

해결

vue파일

import fbDepthCategoryComposable, { Emits } from '@/composables/modules/fb-depth-category'
  
const emit = defineEmits<Emits>();
const {
	categories,
	defaultLabel,
	handleUpdateCategory,
} = fbDepthCategoryComposable(emit);

 

ts파일

import { SelectedDepth } from '@/composables/modules/fb-depth-select';

interface Emits {
  (e: 'update:categoryData', value: SelectedDepth): void;
}

export default function fbDepthCategoryComposable(emit: Emits) {
  const categoriesService = new CategoriesService();
  //default label
  const defaultLabel: SelectBoxRow[][] = [
	[{ name: '대분류', value: '' }],
	[{ name: '중분류', value: '' }],
	[{ name: '소분류', value: '' }],
	[{ name: '세분류', value: '' }]
  ];
}

export {
  Emits,
}

ts 파일에서 타입을 지정한 interface를 만들어 놓고 그걸 export 해서 defineEmit 할때 쓰는 방식으로 해결했다.