TypeScript Object, object, {} 비교

들어가며

타입스크립트의 객체는 세 가지 타입이 있는데, 헷갈릴 수 있기 때문에 정리해보았다.

Object

• 자바스크립트 객체와 완전히 동일하다.
• 즉, toString(), hasOwnProperty() 등을 가지고 있다. Object.prototype. ...으로 쓸 수 있는 API들을 다 쓸 수 있다.
• primitive type, none-primitive 모두 할당될 수 있다.

{}

• Object와 비슷하지만 비어있다.
• runtime에는 Object와 같지만 컴파일 시에는 다르다.
• 컴파일 시에는 Object의 멤버를 가지고 있지 않고, Object가 더 엄격한 객체이다.

object

• typescript에서 추가된 객체 타입으로, non-primitive type을 할당할 수 있지만, primitive type은 할당할 수 없다.
• {[key:string]:any} 와 비슷하다.

{[key: string]: string}

• 가장 엄격한 객체이다.

느슨한 순으로 따지면, {} >Object>object>{[key:string]: string}이다.

Example Code

var o: object;
o = { prop: 0 }; // OK
o = []; // OK
o = 42; // Error
o = "string"; // Error
o = false; // Error
o = null; // Error
o = undefined; // Error

var p: {}; // or Object
p = { prop: 0 }; // OK
p = []; // OK
p = 42; // OK
p = "string"; // OK
p = false; // OK
p = null; // Error
p = undefined; // Error

var q: { [key: string]: any };
q = { prop: 0 }; // OK
q = []; // OK
q = 42; // Error
q = "string"; // Error
q = false; // Error
q = null; // Error
q = undefined; // Error

var r: { [key: string]: string };
r = { prop: 'string' }; // OK
r = { prop: 0 }; // Error
r = []; // Error
r = 42; // Error
r = "string"; // Error
r = false; // Error
r = null; // Error
r = undefined; // Error

Reference

https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript