TypeScript 오브젝트 타입 Object Type 예제

JavaScript에서 기본적인 것 중 하나로 오브젝트가 있습니다.

오브젝트는 여러 타입의 값을 대입할 수 있는 구조로 되어있습니다.

타입스크립트 오브젝트 타입 데이터형

TypeScript에서 JavaScript의 오브젝트처럼 사용하고 싶은 경우에는 {}를 사용합니다.

예를 들어 {foo: string; bar: number} 라고 작성하면 foo라는 프로퍼티는 string 타입의 값을 가질 수 있고 bar라는 프로퍼티는 number 타입의 값을 가질 수 있는 오브젝트가 됩니다.

그리고 이것은 interface로 사용할 수 있습니다.

JavaScript에는 없고 TypeScript에서만 사용할 수 있습니다. 오브젝트 타입에 이름을 지정할 수도 있습니다.

interface MyObj {
	foo: string;
	bar: number;
}

const a: MyObj = {
	foo: 'foo',
	bar: 3,
};

{foo: string; bar: number}라는 타입에 MyObj라는 이름을 지정해주었습니다.

예제에서는 const를 사용하고 있지만, 사용하지 않아도 지정한 오브젝트를 사용할 수 있습니다.

주의 점으로는 interface이기 때문에 선언한 값은 전부 사용해야 합니다.

interface MyObj {
	foo: string;
	bar: number;
}

// 에러:
// Type '{ foo: string; }' is not assignable to type 'MyObj'.
// Property 'bar' is missing in type '{ foo: string; }'.
const b: MyObj = {
	foo: 'foo',
};

JavaScript에서는 오브젝트를 자유롭게 변경할 수 있습니다.

프로퍼티는 변경은 물로, 삭제도 할 수 있습니다.

하지만 TypeScript에서는 지정한 타입 외에는 사용할 수 없다는 것을 주의해서 사용해야 합니다.

TypeScript에서는 다음과 같이도 사용할 수 있습니다.

interface MyObj {
	foo: string;
	bar: number;
}

interface MyObj2 {
	foo: string;
}

const a: MyObj = {foo: 'foo', bar: 3};
const b: MyObj2 = a;

MyObj2에는 foo 프로퍼티만을 가지고 있는 오브젝트 타입이지만 MyObj2르 가진 변수 b에 MyObj 타입을 가진 변수 a의 값을 대입할 수 있습니다.

변수 a의 값에는 string 타입의 값인 ‘foo’를 가지고 있기 때문에 MyObj2 타입의 요건을 충족시키고 있다고 볼 수 있습니다.

일반적으로 이러한 것을 MyObj는 MyObj2의 부분 타입이라고도 말합니다.

이것은 오브젝트 리터럴의 특수한 처리이기 때문에 아래와 같이 작성을 하면 에러가 발생하니 주의해야 합니다.

interface MyObj {
	foo: string;
	bar: number;
}

interface MyObj2 {
	foo: string;
}

// 에러:
// Type '{ foo: string; bar: number; }' is not assignable to type 'MyObj2'.
// Object literal may only specify known properties, and 'bar' does not exist in type 'MyObj2'.
const b: MyObj2 = {foo: 'foo', bar: 3};

변수 b에 대입하려고 한 {foo: ‘foo’, bar: 3}을 보면 string 타입의 값을 가지고 있지만 number타입을 지정해주지 않았기 때문에 MyObj2 타입을 가지고 있는 변수 b에는 대입할 수 없습니다.

하지만 오브젝트 리터럴의 경우에는 내부적으로 처리를 해주기 때문에 가능합니다.

어떻게 보면은 편리하게 사용할 수 있지만, 개발자가 잘못하여 오브젝트 리터럴을 대입하는 경우 의도하지 않는 결과를 만들 수도 있으니 편리한 만큼 사용하는 데에도 주의를 가져야 합니다.