[Typescript/에러일지] TS2561: Object literal may only specify known properties

 

 

Ant Design에서 <Dropdown>, <Menu>를 같이 적용하려는데 생긴 이슈...

인터페이스를 까봐도 잘 읽혀지지 않아서 타입스크립트 공부가 필요하다고 생각했다.

 

 

 

우선 데이터를 이렇게 선언했고

type MenuItem = Required<MenuProps>['items'][number]
function getItem(label: React.ReactNode, key: React.Key, children?: MenuItem[]): MenuItem {
  return {
    label,
    key,
    children,
  } as MenuItem
}

// Sider 메뉴
const items: MenuItem[] = [
  getItem('A', 'A', [
    getItem(<Link href="/a">a 메뉴</Link>, 'key-a'),
    getItem(<Link href="/b">b 메뉴</Link>, 'key-b'),
  ]),
  getItem('B', 'B', [getItem(<Link href="/c">테스트</Link>, 'key-c')]),
]

// Dropdown 메뉴
const menuItems: MenuItem[] = [getItem('로그아웃', 'logout')]

 

 

 

이렇게 각각 할당하려고했으나 Dropdown에서 문제가 생겼다.

<Dropdown menu={{ munuItems }}>
    <Button>버튼명</Button>
</Dropdown>

<Layout.Sider collapsible>
    <Menu items={items} />
</Layout.Sider>

 

 

 

 

여기서 인터페이스를 까보면 DropdownProps의 menu는 MenuProps이다.

export interface DropdownProps {
    ...
    menu?: MenuProps;
}

export interface MenuProps extends Omit<RcMenuProps, 'items'> {
    ...
    items?: ItemType[];
}

 

 

내 선언부를 보면 MenuProps의 items로 타입을 지정해놨기 때문에 Dropdown은 { items: 데이터 } 형식으로 작성해야하는 것 같다.

type MenuItem = Required<MenuProps>['items'][number]

 

 

 

이렇게 지정해주면 해결된다

// as-is
<Dropdown menu={{ munuItems }}>
    <Button>버튼명</Button>
</Dropdown>

// to-be
<Dropdown menu={{ items: munuItems }}>
    <Button>버튼명</Button>
</Dropdown>

 

 

 

 

---

 

출처

How do I make multiple dropdowns with ant-design that have different options?