벌써 타입스크립트에 관한 4번째 글이네요.
이번 포스팅에서는 타입스크립트에서의 객체 타입에 대한 정의를 예시 코드를 통해 알아보도록 하겠습니다.

✅ object(객체)

타입스크립트에서 객체는 변수에 할당이 되는 값으로 사용됩니다.
객체는 여러 개의 properties(속성)으로 구성되어 있으며, 그 속성은 key와 value로 구성되어 있습니다.

- 📌 객체를 정의하는 방법

타입스크립트에서 객체를 정의하는 방법은 다양한데요. 가장 일반적으로 쓰이는 방법은 객체 리터럴입니다. 리터럴 타입이 뭔지 타입스크립트 포스팅 중 02. 기본타입 에서 간단하게 설명했을 것 입니다. 기억이 안나시면 지난번 포스팅을 봐주세요. 객체 리터럴은 {}를 사용하여 객체를 보여줍니다.

let user = {
    id:1,
    name: "정다희",
};

이런 식으로 중괄호 안에 프로퍼티를 넣어서 사용합니다.
이제 이 코드를 좀 더 자세하게 분석해보겠습니다.

- 📌 object의 잘못된 예시

아까 보여드렸던 id와 name 속성이 있는 객체를 정의하는 예시입니다.

let user:object = {
    id:1,
    name: "정다희",
};

user.id; // object 형식에 id 속성이 없다고 뜸.

근데 위 코드에서 이렇게 객체의 타입을 object로 지정하면 문제가 하나 생깁니다. user.id처럼 객체의 프로퍼티에 접근하려고 하면 object 형식에 id 속성이 없습니다. 라고 오류가 뜹니다. 이렇게 뜨는 이유가 타입스크립트에서 object는 그냥 이 값이 객체다 라는 정도만 알려줄뿐 아무런 정보가 없는 타입이기 때문에 위에 코드처럼 정의를 하면 이 객체의 프로퍼티나 매소드에 값이 어떤 것인지 알 수 없습니다. 즉, 변수 타입이 객체이긴 한데 그 이상은 모른다는 말입니다. 그럼 어떤식으로 접근해야할까요?

- 📌 객체의 리터럴 타입

위와 같은 문제가 있을 때는 객체의 리터럴 타입을 이용해줍니다.

let user:{
	id: number;
    name: string;
} = {
    id:1,
    name: "정다희",
};

user.id; 

이런식으로 프로퍼티의 타입까지 모두 지정해줍니다. 이렇게 수정해주면 user.id; 역시 오류가 없이 잘 나오며, 타입 역시 number로 잘 나옵니다.

즉, 정리하자면

객체의 타입을 정의할 때는 object를 사용하면 객체인 것을 알지만 그 이상의 정보가 없기 때문에 프로퍼티에 접근을 할때 오류가 나 잘 쓰지 않습니다. 대신 객체의 프로퍼티의 타입까지 모두 구조적으로 정의해주는 객체의 리터럴 타입을 사용합니다.

위의 내용은 <한 입 크기로 잘라먹는 타입스크립트> 강의 내용을 참고하면서 작성했습니다.