typescript에서 객체에 key/value 쌍을 추가하는 방법

 

안녕하세요.

오늘은 타입스크립트(typescript)에서 Key/Value 쌍으로 구성된 객체에 Key/Value 아이템을 추가하는 방법에 대해서 알아보겠습니다.

 

자바스크립트 예제 코드

• var obj = {
      id: 1,
      name: '홍길동'
  }
• 해당 객체에 age에 대한 정보도 추가하고 싶을 경우..
• obj.age = 28
• 로 간단하게 처리가 가능합니다.

타입스크립트 예제 코드

• let obj = {
      id: 1,
      name: '홍길동'
  }
• 위와 마찬가지로 age에 대한 정보를 추가하고 싶을 경우..
• obj.age = 28; // 에러발생
  (에러가 발생하는 이유는, typescript는 컴파일 단계에서 obj에 property로 age가 존재하는지 체크하기 때문에 에러가 발생합니다.)
• 해결방법
• 간단하게 obj 객체에 타입을 any로 설정하면 해결됩니다.
• let obj: any = {
      id: 1,
      name: '홍길동'
  }
• obj.age = 28; // ok!
• 타입을 any로 설정함으로써, 컴파일 단계에서 에러를 제거해줍니다.

검색 키워드

• How can I add a key/value pair to a JavaScript object?

• How can I add a key/value pair to a TypeScript object?

 

 

참고자료

• https://stackoverflow.com/questions/1168807/how-can-i-add-a-key-value-pair-to-a-javascript-object

 

모두 즐거운 코딩하세요~

 

 

-------------

 

2017년도에 적었던글을 2025년에 댓글로 인해서 다시 보게 되었습니다.

2017년에 작성했던 글을 2025년 시점에서 다시 읽어보니, 당시에는 TypeScript 타입 시스템에 대한 이해가 부족했고, 그래서 any를 사용하는 수준으로 설명을 마무리한 것이 충분히 미숙했다는 점을 인정합니다.

말씀해주신 것처럼, 단순히 any로 우회하는 방식은 타입 안정성을 포기하는 것이기 때문에 TypeScript가 의도한 개발 방식과 맞지 않습니다. 지적해주신 내용을 바탕으로 지금 시점에서 훨씬 적절한 접근 방식이라고 생각하는 것들에 대해서 다시 설명해보고자 합니다.

 

1) 선택적 프로퍼티(optional property) 사용

interface Person {
  id: number;
  name: string;
  age?: number;
}

const obj: Person = { id: 1, name: '홍길동' };
obj.age = 28;

→ 타입을 변경하지 않아도 확장이 가능하도록 age를 optional로 정의하는 방식입니다. any 없이도 안전하며 가장 자연스러운 해결책입니다.

 

2) 기존 타입 확장(extends)

interface Person {
  id: number;
  name: string;
}

interface PersonWithAge extends Person {
  age: number;
}

let obj: Person = { id: 1, name: '홍길동' };
let obj2: PersonWithAge = { ...obj, age: 28 };

→ OOP 개념과 비슷하게 “새로운 타입”으로 확장하는 방식입니다.

 

3) Spread 연산자를 통한 확장

interface User {
  id: number;
  name: string;
}

const obj: User = { id: 1, name: '홍길동' };

const user = {
  ...obj,
  age: 28
}; // 타입: { id: number; name: string; age: number }

→ 원본 obj 변경 없이 obj를 활용하여 객체를 확장하는 방식입니다.

 

4) 인덱스 시그니처 사용

interface Person {
  id: number;
  name: string;
  [key: string]: any;
}

→ 모든 속성을 허용하고 싶을 때 사용하지만, 타입 안정성이 떨어져 신중하게 써야 합니다.

 

감사합니다.