[typescript] 타입선언은 대체 어디에 ? ? 타입이 똑같아도 모든파일에서 다 ? (컴포넌트간 타입선언 해보기)

이슈

컴포넌트1과 컴포넌트2 간에 이벤트와 데이터를 전달받는데, 그때마다 타입선언을 해주는데 같은 타입선언이 많았다.
그러다보니 나중에는 타입 하나를 수정하면 2번 수정해야하는 이슈가 발생하였다.

 

해결

타입선언은 메인이 되는곳에서!!! export 해준다. 그리고 그것이 필요한 곳에서 import 해서 가져와 사용한다.

1. 컴포넌트 1 ts파일 (export) ==> export { DepthItem } 해주기 !

//컴포넌트1 ts 파일
interface DepthItem {
	name: string;
    value: number | string;
}

export default componenet1Composable() {
	//컴포넌트 1 composable ts 내용..
    
    //DepthItem 인터페이스 사용하는 곳
    const categories = ref<DepthItem[]>([]);
}

//여기가 포인트 !!! Interface를 export 해주기
export {
  DepthItem
}

 

2. 컴포넌트 2 ts파일 (import) ==> import { DepthItem } 해주기 !

//컴포넌트 2 ts 파일

//여기서 아까 내보낸 인터페이스 가져오기
import { DepthItem } from '/컴포넌트1 ts파일';

export default component2Composable {
	//이런식으로 그대로 사용할 수 있다.
    const result = ref<DepthItem[]>([]);
    
}

 

여기서 만약 이름을 바꾸고 싶다면 ? ? ? as를 사용 !! => import { DepthItem as 바꿀이름 } 해주기 !

//컴포넌트 2 ts 파일

//여기서 아까 내보낸 인터페이스 가져오기
import { DepthItem as Custom } from '/컴포넌트1 ts파일';

export default component2Composable {
	//이런식으로 그대로 사용할 수 있다.
    const result = ref<Custom[]>([]);
    
}