Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 개발자 회고
- 함수선언식
- Object in Object
- Type {children: Element} has no properties in common with type IntrinsicAttributes
- null 병합 연산자
- 객체 속 객체
- rerender
- mobx react
- type script
- useState
- 지역스코프
- Object.is
- 회고
- til
- 객체
- 2023 회고
- react
- object
- 모던 자바스크립트 Deep Dive
- 모던자바스크립트
- 옵셔널 체이닝 연산자
- Object Type
- 이직
- 전역스코프
- 객체 리터럴
- 개발자
- 23년 상반기
- 함수호이스팅
- Java Script
- 모던자바스크립트 Deep Dive
Archives
- Today
- Total
Pie_Archive
[TypeScript] 객체 속 객체(?)의 타입을 정의하는 방법 본문
최근 데이터를 설계하다가 이런 구조를 짜게 됬다. (아래는 위 케이스를 간소화 한 코드입니다.)
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에는 중괄호와 함께 타입을 지정해주면, 깔끔하게 인터페이스 정의가 완료되었다.
역시 급하게 배운 타입스크립트라 큰 문제지만...
이렇게 하나씩 배워가서 다행이기도 한 듯 하다.
최근 프로젝트 구조를 설계하면서 자료구조랑 시간복잡도 공부의 필요성에 대해 느끼고 있는데,
어서 빨리 프로젝트 끝나는대로 제대로 공부해봐야겠다.
'Front End' 카테고리의 다른 글
[React] 부모 요소의 Event 제어하기 (0) | 2022.05.31 |
---|---|
[React] 리액트에서 멋지게 클래스 사용하기 (0) | 2022.05.28 |
[React] Input: Text 훌륭하게 구현하기 (0) | 2022.05.20 |
React + Type Script 로 팝업창 만들기( + Type {children: Element} has no properties )에러 해결방법 (0) | 2022.05.18 |
⚛️React hooks + MobX 사용해보기 (1) (0) | 2022.04.03 |