[TypeScript] 객체(key:value) 생성하기

시작하기에 앞서..

TypeScript로 객체를 생성하면서 단순한 interface로 객체 타입을 정하면 변수에 key값을 넣었을때, value값을 제대로 가져오지 못했었던 경험이 있다. 다음 코드를 보자.

interface IPerson {
  name: string;
  age: number;
}

let person: IPerson = {
  name: 'sunny',
  age: 26,
};

let key = 'name';
console.log(person.name); //sunny
console.log(person[key]); //Error

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IPerson'. No index signature with a parameter of type 'string' was found on type 'IPerson'.ts(7053)
기본적으로 변수로 객체의 값을 가져올 때는 점표기법(Dot notation)을 사용할 수 없고 괄호표기법(Bracket Notation)을 사용해야한다. 이 에러를 해결하기 위해서는 key, value의 타입을 명확하게 지정해주면 된다.

1. Index Signature(대괄호로 객체를 접근하는 방법)

let person: { [key: string]: string | number } = {
  name: 'sunny',
  age: 26,
};

Union Type을 사용하여 두 가지 이상의 타입으로 지정할 수 있다.

2. Record Type

TypeScript Version2.1 부터 도입된 문법으로 Record<Key, Type>형식으로 키가 Key이고 값이 Type인 객체 타입이다.

let person: Record<string, string | number> = {
  name: 'sunny',
  age: 26,
};

인덱스 시그니처의 단점으로 리터럴 타입을 key나 value 타입으로 사용할 수 없다.

리터럴 타입? string, number 두 가지가 있다.

type strLiterType = 'MON'|'TUE'|'WED';
type numLiterType = 1 | 2 | 3;

이 문제점을 Record나 맵드 타입을 사용하면 쉽게 해결할 수 있다.
(본 포스팅에서는 Record를 사용하는 방법만 제시하겠다.)

type names = '홍길동' | '둘리' | '마이콜';
type age = 26 | 27 | 28;
//key값으로 names, value값으로 age 이외의 값을 넣으면 Error 발생
let human: Record<names, age> = {
  홍길동: 26,
  둘리: 27,
  마이콜: 28,
};

//key에만 literal Type을 적용하는 경우, 
//value에는 number타입의 아무 숫자나 넣을 수 있다.
let human: Record<names, number> = {
  홍길동: 21,
  둘리: 22,
  마이콜: 23,
};

하지만, 주의해야할 것은 리터럴 타입으로 key값을 지정해줄 경우 변수로 객체의 값에 접근할 수 없다.

3. Map 객체 사용

ES6부터 사용 가능한 데이터 구조로, 다음 문서에서 Object와 Map을 비교하는 내용을 알 수 있었다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Keyed_collections
Map 공식 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map

let key = 'name';
let person4 = new Map<string, string | number>();
//데이터 저장
person4.set('name', 'sunny');
person4.set('age', 26);
//데이터 조회
person4.get(key);
//데이터 존재 여부
person4.has(key);

변수로 Map 인스턴스 메서드 사용이 가능하다.

4. Enum 사용

enum E {
  X,
  Y,
  Z,
}

let enumKey: keyof typeof E = 'X';
console.log(E[enumKey]);

typeof 키워드 : 객체 데이터를 객체 타입으로 변환해주는 연산자

keyof 키워드 : 개체 형태의 타입을, 따로 속성들만 뽑아 Union 타입으로 만들어주는 연산자

따라서, keyof typeof E = 'X' | 'Y' | 'Z'로 문자열 리터럴 타입이 되고, 이것을 enumKey의 타입으로 지정해주는 것이다.