Pie_Archive

[TypeScript] 객체 속 객체(?)의 타입을 정의하는 방법 본문

Front End

[TypeScript] 객체 속 객체(?)의 타입을 정의하는 방법

코딩파이 2022. 5. 12. 22:55

지옥의_자료구조.jpg

 

최근 데이터를 설계하다가 이런 구조를 짜게 됬다. (아래는 위 케이스를 간소화 한 코드입니다.)

const projects = {
    name: "1번 프로젝트",
    files : {
        0: ["1번 파일", "2번 파일"],
        1: ["3번 파일", "4번 파일"],
        2: ["5번 파일"]
        //...
    },
}

// 실제로는 배열이 중첩되어 좀 더 복잡한 형태이지만, 간략하게 쓴다.

원래라면 Array 형태로 파일 형태를 구성했겠지만,

이렇게 Object의 각 연결된 index값을 key로 주는 편이 접근하기 용이할 것 같아서 이런식으로 구조를 작성했더니

인터페이스 작성에서 오류가 잔뜩 생겼다.

 

나름대로 코딩테스트 1 단계씩 통과한 머리로 열심히 머리를 굴려봤지만, 아래 실패작들밖에 짜지 못했다.

 

실패 케이스 1

interface IProject {
    name: string;
    files: {
        fileIndex: string[]
    }
}
// 아무리봐도 fileIndex의 타입을 지정하지 않았다.

실패 케이스 2

interface IProject {
    name: string;
    files: IFiles
}

interface IFiles {
    files: {fileIndex: string[]}
}

// 따로 files의 타입을 따로 빼 주었지만, 역시 이래도 fileIndex의 타입을 지정할 수 없었다.

사실 이렇게 코드를 잘못짜면서도
"이렇게 하면 결국 files의 key인 fileIndex는 타입을 지정할 수 없는데..."
라는 의문을 가지면서도 끝까지 삽질해봤지만, 역시나 실패였다.

 

결국 여러 방면으로 검색한 끝에, 방법을 알게 되었다.

interface IProject {
    name: string;
    files: {
        [fileIndex: number ] : string[]
    }
}

 

이렇게 Object의 key에는 중괄호와 함께 타입을 지정해주면, 깔끔하게 인터페이스 정의가 완료되었다.

 

역시 급하게 배운 타입스크립트라 큰 문제지만...
이렇게 하나씩 배워가서 다행이기도 한 듯 하다.

 

최근 프로젝트 구조를 설계하면서 자료구조랑 시간복잡도 공부의 필요성에 대해 느끼고 있는데,

어서 빨리 프로젝트 끝나는대로 제대로 공부해봐야겠다.

 

참고자료:
http://daplus.net/typescript-typescript-%EC%A4%91%EC%B2%A9-%EB%90%9C-%EA%B0%9C%EC%B2%B4%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4%EB%A5%BC-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%A0%95/