Typescript 병합 선언과 개별 선언

* 같은 파일에서 동일한 이름에 타입과 함수가 있으면 에러가 발생하지 않지만 import 해서 동일한 이름에 타입으로 가져와 사용한다면 에러가 발생한다.  

//todoList.tsx

import type { Mybodyinfo, TodoData, TodoAdd } from "@components/home/type";

.
.
.
// error ms : Individual declarations in merged declaration 
// 'TodoAdd' must be all exported or all local.ts(2395)

export const TodoAdd = (props: TodoAdd) => {
  return (
    <Button padding={props.padding ? props.padding : "10px 20px"} h="auto" bg="#CEEBEE" color="#5CBEC7" onClick={props.onClick}>
      <Flex flexDirection="column" alignItems="center" gap="5px" justifyContent="center">
        <>{props.Icon}</>
        <Text fontSize={props.fontSize ? props.fontSize : "10px"}>{props.text}</Text>
      </Flex>
    </Button>
  );
};

* 단순하게 타입으로 네임 동일에 문제라기 보다는 내보내기로 병합되는 항목이 아니라 가져오기가 로컬 선언과 병합될 수 없다는 것입니다.

그렇기 때문에 가져오기한 type을 export한 로컬 선언과 병합할려면 type 네임을 변경 해야한다. 

import type { Mybodyinfo, TodoData, TodoAdd as TodoAddInterface } from "@components/home/type";
.
.
.
export const TodoAdd = (props: TodoAddInterface) => {

* 네임스페이스로 해결하는 방법도 있지만 네임스페이스 자체를 권장하지 않기 때문에 사용하지 않았습니다. 

* 부족한 부분이 있으면 댓글로 알려주시길 바랍니다.

 

 

참조자료
https://www.merixstudio.com/blog/typescript-declaration-merging/

Declaration merging in TypeScript for regular devs | Merixstudio

https://stackoverflow.com/questions/58670409/individual-declarations-in-merged-declaration-departmentlistcomponent-must-be

Individual declarations in merged declaration 'DepartmentListComponent' must be all exported or all local.ts(2395) Routing compo

https://github.com/microsoft/TypeScript/issues/36684

3.8 RC Regression? "Individual declarations in merged declaration" · Issue #36684 · microsoft/TypeScript