인덱싱 패턴과 딕셔너리 패턴

 

인덱싱 패턴과 딕셔너리 패턴

안녕하세요. 오늘은 타입스크립트 카테고리에 올리기는 하지만 사실 타입스크립트에만 국한되는 개념이 아닌 인덱싱과 딕셔너리 패턴에 대해 정리해보겠습니다.

 

인덱싱 패턴과 딕셔너리 패턴 특징 및 차이점

- 두 패턴 모두 타입스크립트에만 국한되는 개념이 아니다

- 차이점으로는 접근 방식에서 있다.
- 또한 각각 데이터 구조가 다르다.
근데 내 생각엔 걍 비슷한 것 같다 ㅠ 모가몬지

---

🔵 인덱싱 패턴

- '배열'을 기반으로 데이터를 저장한다.

- 인덱스를 사용하여 각 요소에 접근한다.

- 즉, 순서가 있는 컬렉션

 

(1) 인터페이스 정의

interface Indexing {
  [index: number]: string;
}

- number타입의 index와 string을 반환하는 인터페이스

 

(2) 해당 인터페이스 타입의 배열 정의

var arr: Indexing = ['a', 'b', 'c'];

 

(3) index와 타입을 확인해보자

// arr[0] = 10; → number 타입이라 에러
// arr['a'] = '10'; → index가 string 타입이라 에러
arr[0] = 'd'; → OK

---

🔵 딕셔너리 패턴

- 키&값 구조로 '객체'를 기반으로 데이터 저장

마치 사전 ..

 

(1) 인터페이스 정의

interface Dictionary {
	[key: string]: string;
}

- string 타입의 key와 string을 반환

 

(2) 해당 타입의 객체 정의

var obj: Dictionary = {
    //sth: 1, ==> 에러
    //sth: true, ==> 에러
    sth: 'A',
}

- 다른 타입을 넣으면 에러

 

(3) key와 타입을 확인함

// obj['sth'] = 10; ==> 에러
obj['sth'] = 'a';

 

---

 

흠 솔직히 .. 그냥 별 생각 안하고 잘 사용했을 것 같은데 거창하게 어쩌구 패턴 이러면 뭔가 어렵게 느껴지고 그런다...ㅠ

뭔가 그렇다고 그냥 무시하기엔 안될 것 같아서 정리했다.

 

참고 강의 : https://taylog.tistory.com/217

[강의리뷰] 실전 프로젝트로 배우는 타입스크립트 시리즈 강의 후기 (캡틴판교) 😱 타입스크립