object 타입

설명

TypeScript에서는 변수에 초기 설정된 값을 암시적으로 할당 가능한 데이터 타입으로 설정하기에 초기 설정된 값과 다른 형태로 할당될 경우 다음과 같은 오류를 출력합니다.

let Dom = {
  version: '0.0.1',
  el(){},
  css(){}
};

// [오류]
// [ts]
// '{ append(): void; }' 형식은 '{ version: string; el(): void; css(): void; }' 형식에 할당할 수 없습니다.
//   객체 리터럴은 알려진 속성만 지정할 수 있으며 '{ version: string; el(): void; css(): void; }' 형식에 'append'이(가) 없습니다.
// (method) append(): void
Dom = {
  append(){}
};

객체의 각 속성별 타입을 명시하려면 다음과 같이 코드를 작성할 수 있습니다.

let Dom: {version:string, el:()=>void, css:()=>void};

Dom = {
  version: '0.0.1',
  el(){},
  css(){}
};

또는

let Dom: {version:string, el:()=>void, css:()=>void} = {
  version: '0.0.1',
  el(){},
  css(){}
};

하지만 타입으로 설정되지 않은 객체의 속성을 새롭게 추가할 경우, 다음과 같은 오류 메시지를 출력합니다.

// [오류]
// [ts] '{ version: string; el: () => void; css: () => void; }' 형식에 'each' 속성이 없습니다.
// any
Dom.each = function(){};

새롭게 추가할 each 속성을 타입에 추가하면 문제가 해결되겠지만, 매번 새로운 속성을 추가할 때마다 타입을 지정하는 것은 매우 번거롭습니다. 새 속성을 추가해도 오류 메시지를 출력하지 않게 구성하려면 [propName: string]: any를 사용할 수 있습니다.

let Dom: {
  version: string,
  el: () => void,
  css: () => void,
  [propName: string]: any // ⬅︎
};

Dom = {
  version: '0.0.1',
  el(){},
  css(){}
};

Dom.each   = function(){};
Dom.map    = function(){};
Dom.filter = function(){};

실습

참고

Handbook - Basic Typestypescriptlang

TypeScript - Object 타입