[타입스크립트] Object vs object vs {}

해당 스택오버플로우 게시물을 보고 요약한 글입니다.

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

Difference between 'object' ,{} and Object in TypeScript

TypeScript에는 Object, {} 및 object라는 세 가지 혼란스러운 타입이 존재합니다.

strictNullChecks 컴파일러 옵션이 비활성화되어 있으면 세 가지 타입 모두 null 및 undefined를 할당할 수 있습니다.
그렇지 않으면 컴파일 오류가 발생합니다.

Object 타입

• 모든 JavaScript 객체에 있는 항목(toString(), hasOwnProperty() 등)을 포함합니다.
  • 해당 멤버에 대한 타입 체킹을 포함합니다.
• 모든 값(primitive, non-primitive)을 Object 타입에 할당할 수 있습니다.
  • Object 멤버의 타입 조건을 만족하는 모든 값을 할당 가능합니다.

---

{} 타입

{}는 빈 객체입니다. 런타임에서는 Object와 거의 동일하지만 컴파일 타임에는 다릅니다.

• 컴파일 타임에 {}에는 Object의 멤버가 없습니다.
  • 따라서 Object 멤버에 대한 타입 체킹을 포함하지 않습니다.

Object에는 빌트인 메서드 필드가 존재하지만 {}에는 존재하지 않습니다.

 

• let x: {} = {toString() { return 2 }}는 컴파일 됩니다.
  • Object와 {}에는 모든 값을 할당할 수 있으며
  • {}는 Object 멤버 함수 toString에 대한 타입 체킹을 포함하지 않기 때문입니다.
• let x: Object = {toString() { return 2 }}는 오류가 발생합니다.
  • 빌트인 메서드 toString은 문자열을 반환해야 하기 때문입니다.
  • Object는 멤버에 대한 타입 체킹을 포함합니다.

---

object 타입

object는 TypeScript 2.2에서 도입되었습니다.

primitive가 아닌 타입(non-primitive)입니다.

즉, 불리언, 숫자, 문자열, 심볼과 같은 primitive 타입을 할당할 수 없습니다.

var strictTypeHeaders: { [key: string]: string } = {}; // non-primitive type
var header: object = {}; // its OK
header = strictTypeHeaders; // its OK
strictTypeHeaders = header; // causes error "Type 'object' is not assignable to type '{ [key: string]: string }`"

마지막 줄에서만 컴파일 오류가 발생합니다.

{ [key: string]: string } 유형이 object 타입보다 더 구체적이기 때문에 발생합니다.

 

header = strictTypeHeaders는 오류가 없습니다.

• 두 타입 모두 non-primitive입니다.
• object는 { [key: string]: string }보다 일반적인 타입입니다.
  • 보다 구체적인 타입에 일반적인 타입을 할당하는 것은 다운캐스팅으로 안전하지 않습니다.

참고

해당 글을 읽다 알게 됨.

https://ui.toast.com/posts/ko_20210505

리액트 컴포넌트를 타입스크립트 제네릭 함수처럼 쓰기