interface의 특정 property를 추출해 인터페이스로 활용하기

interface의 특정 property만을 추출해서 타입을 선언할 때 활용할 수 있다.

 

아래와 같이 LinkWrapProps 인터페이스는 'links'라는 프로퍼티를 가지고 있는데, 이것은 LinkProps 배열 타입을 가진다.

interface  LinkWrapProps{
    links: LinkProps[];
    ....
}

interface LinkProps{
    activeClassName?: string;
    icon: IconsId;
    label: string;
    to: string;
}

 

 

이제 LinkWrapProps의 links 타입을 가진 변수 LINKS를 선언하고 싶다면 어떻게 해야 할까?

interface의 property name으로 해당 propery type만 불러와서 선언해주면 된다.

const LINKS: LinkWrapProps['links'] = [
    { icon: 'house', label: '홈', to: '/' },
    { icon: 'note-pencil', label: '전자 결재', to: '/approval' },
    { icon: 'notebook', label: 'SNUH 광장', to: '/board' },
    { icon: 'headset', label: '직원 상담실', to: '/counseling' },
    { icon: 'chats-circle', label: '제안톡톡', to: '/suggestion' },
    { icon: 'file-search', label: '감사실', to: '/audit' },
    { icon: 'git-fork', label: '조직도', to: '/organization' },
];

 

위처럼 Object를 불러오듯 interface명[property_name]로 가져오면 된다.

 

여기서 중요한 것은 "  interface명.property_name  " 과 같은 형태로는 불러올 수 없다.

즉, LinkWrapProps['links']는 되고, LinkWrapProps.links 는 안된다!

 

 

 

 

방금처럼 특정 property를 불러오지 않는다면, LinkProps[]로 선언하는 방법이 있고

const LINKS: LinkProps[] = [.....];

 

혹은 links property로 한번 더 감싸주어 가독성이 떨어지는 형태로 작성해야 한다.

const LINKS: NavBarProp = {
	links:[
    	{ icon: 'house', label: '홈', to: '/' },
      { icon: 'note-pencil', label: '전자 결재', to: '/approval' },
      { icon: 'notebook', label: 'SNUH 광장', to: '/board' },
      { icon: 'headset', label: '직원 상담실', to: '/counseling' },
      { icon: 'chats-circle', label: '제안톡톡', to: '/suggestion' },
      { icon: 'file-search', label: '감사실', to: '/audit' },
      { icon: 'git-fork', label: '조직도', to: '/organization' },
    ]
};