[Typescript] Object vs object vs {}

타입 스크립트를 처음 사용할 때 가장 많이 헷갈리는 세 개념이다.

object vs Object vs {}

object

원시형이 아닌 모든 값들을 받을 수 있다. 여기서 원시형은 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined 7가지 이다.
Typescript 2.2 에서 도입 되었다.

function foo(bar:object){
  console.log(bar);
}

foo([1,2,3]) // OK
foo({a:1, b:2}) // OK
foo(123) // Error!!

Object

자바스크립트에 포함된 모든 생성자들은 Object를 extend한다. 따라서 Object에는 모든 객체가 할당될 수 있다. (이에 대한 자세한 설명은 별도의 게시글에서 하도록 하겠다.)

function foo(bar:Object){
  console.log(bar);
}

foo([1,2,3]) // OK
foo({a:1, b:2}) // OK
foo(123) // OK

{}

Object와 완전히 동일하다. 필자는 {} 타입은 빈 객체만 받는 타입이 아닐까 하고 생각했지만, 테스트 결과 Object와 동일하게 동작함을 파악할 수 있었다.

function foo(bar:{}){
  console.log(bar);
}

foo([1,2,3]) // OK
foo({a:1, b:2}) // OK
foo(123) // OK

Object vs any

any에 아무 값이나 들어갈 수 있고 Object에도 아무 값이나 들어갈 수 있다면 둘의 차이는 뭘까? 예시를 보자.

let foo: any;
let bar: Object;

console.log(foo.customMethod()); // ...(1)
console.log(bar.customMethod()); // ...(2)

파일을 실행을 하면 (1), (2) 둘 다 에러가 난다. 하지만 두 에러의 종류는 조금 다르다.

(1)의 경우, foo 의 타입이 any 이기 때문에 어떠한 값이 들어와도 된다. 즉 customMethod가 있는지 없는지는 트랜스파일 단계에서는 문제가 되지 않는다는 것이다.

(2)의 경우 트랜스파일 단계에서 에러가 난다. Object 타입에 customMethod 라는 메서드가 정의 되어있지 않기 때문이다.

출처

difference-between-object-and-in-typescript
any-vs-object