[타입스크립트 기본] 객체

해당 게시글은

강의 사이트, 인프런에서 이정환님이 진행하시는

'한 입 크기로 잘라먹는 타입스크립트' 를

들어보며 블로그를 작성하려고 합니다.

다음 게시글 내용은 해당 강의에 핸드북의 내용으로

출처는 다음과 같습니다.

 

https://ts.winterlood.com/7250edd7-a3fd-4662-b756-f11f927c73f2

타입스크립트를 소개합니다 - 타입스크립트 개론

 

이번 글에서는 타입스크립트에서

객체 타입을 정의하는 방법에 대해 살펴보았습니다.

src 폴더 아래 chapter3.ts 파일을 생성합니다.

 

객체 타입을 정의하는 방법

타입스크립트에서는 2 가지 방식으로

객체의 타입을 정의할 수 있습니다.

 

object 로 정의하기

객체 타입을 정의하기에 앞서

간단한 객체를 하나 만듭니다.

let user = {
  id: 1,
  name: "이정환",
};

 

다음으로 user 의 타입을

객체를 의미하는 object 로 정의합니다.

let user: object = {
  id: 1,
  name: "이정환",
};

 

타입이 잘 정의되었습니다.

그런데 이렇게 타입을 정의하면 한 가지 문제가 발생합니다.

let user: object = {
  id: 1,
  name: "이정환",
};

user.id;

위 코드의 user.id 처럼

점 표기법으로 객체의 특정 프로퍼티에 접근하려고 하면,

오류가 발생합니다.

오류 메시지를 확인해보면,

다음과 같이 'object' 타입에 'id' 프로퍼티가 없다고 나옵니다.

 

그런데 이상합니다.

분명 user 변수에 id 와 name 프로퍼티를 갖는 객체를 저장했고,

타입도 object 로 잘 정의해주었는데

왜 이런 오류가 발생하는 걸까요?

그 이유는 타입 스크립트의 object 타입은 단순 값이 객체임을 표현하는 것 외에는

아무런 정보도 제공하지 않는 타입이기 때문입니다.

따라서 이 타입은 객체의 프로퍼티에 대한 정보를 전혀 갖고 있지 않습니다.

그렇기 때문에 이렇게 프로퍼티에 접근하려고 하면,

오류가 발생합니다.

 

그런데 원하는 건 이런 게 아니였습니다.

변수 user 에 저장된 객체의 구조를 그대로 타입으로 만들고 싶었는데,

그럼 어떻게 해야 할까요?

이럴 때에는 object 가 아닌 객체 리터럴 타입을 이용해야 합니다.

 

객체 리터럴 타입

객체 리터럴 타입은 다음과 같이

중괄호를 열고, 객체가 갖는 프로퍼티를 직접 나열해 만드는 타입입니다.

let user: {
  id: number;
  name: string;
} = {
  id: 1,
  name: "이정환",
};

user.id;

변수 user 의 타입을

number 타입의 id, 

string 타입의 name 프로퍼티를

갖는 객체 타입으로 정의했습니다.

이렇듯 객체 리터럴과 비슷한 문법으로

객체 타입을 정의한 타입을 객체 리터럴 타입이라고 부릅니다.

 

변수의 타입을 객체 리터럴 타입으로 정의하면,

타입 내에 정의되어있는 프로퍼티에 이상 없이 접근할 수 있게 됩니다.

지금은 점 표기법으로 접근했지만,

괄호 표기법을 사용할 때에도 동일하게 접근이 가능합니다.

 

또 프로퍼티에 마우스 커서를 올려보면,

다음 그림처럼 프로퍼티의 값의 타입도 잘 나타나는 것을 볼 수 있습니다.

따라서 객체의 타입을 정의할 때에는

앞으로 object 보다는 객체 리터럴 타입을 사용하는 것이 좋습니다.

복습겸 객체를 하나 더 만들어보겠습니다.

 

이번에 만들 객체는 강아지 객체입니다.

let dog = {
  name: "돌돌이",
  color: "brown",
};

이 객체의 타입은 어떻게 정의해야 할까요?

객체 리터럴 타입으로 정의하면 다음과 같습니다.

let dog:{
  name: string;
  color: string;
} = {
  name: "돌돌이",
  color: "brown",
};

여기서 한 가지 알 수 있는 사실은 

타입스크립트는 기존의 정적 타입 시스템을 따르는 언어인

C 나 Java 와는 달리,

객체의 타입을 정의할 때,

프로퍼티를 기준으로 객체의 구조를 정의하듯이 타입을 정의한다는 점입니다.

 

타입스크립트의 이런 특징을 구조적 타입 시스템이라고 부릅니다.

객체의 구조를 결정하는 것은 프로퍼티입니다.

따라서 타입스크립트는 이 객체에

어떤 프로퍼티들이 있어야 하는지 정의하는 방식으로

객체의 타입을 정의합니다.

마치 "name 과 color 가 있는 객체는 

'강아지 타입'" 이야 라고 보는 것과 비슷합니다.

---

특수한 프로퍼티 정의하기

다음으로는 객체 타입을 정의할 때

특정 프로퍼티를 선택적이거나 일기 전용으로 만드는

타입스크립트의 독특한 문법에 대해 살펴보았습니다.

let user: {
  id: number;
  name: string;
} = {
  id: 1,
  name: "이정환",
};

 

선택적 프로퍼티(Optional Property)

자바스크립트에서 객체를 다루다보면,

자주 특정 프로퍼티는 있어도 되고, 없어도 되는

그런 상황이 존재합니다.

예를 들어, 다음과 같이

이름은 있지만, 아직 id 가 없는 유저가 존재할 수도 있습니다.

let user: {
  id: number;
  name: string;
} = {
  id: 1,
  name: "이정환",
};

user = {
  name: "홍길동", // 오류 발생!
};

그러나 이렇게 코드를 작성하면,

타입스크립트에서는 오류가 발생합니다.

user의 타입은 id 와 name 의 프로퍼티를 갖는 객체인데,

마지막 라인에서 name 만 존재하는 객체를 할당했기 때문이죠.

 

이렇게 특정 프로퍼티를 상황에 따라 생략하도록 만들고 싶다면,

해당 프로퍼티를 선택적 프로퍼티로 만들어줘야 합니다.

선택적 프로퍼티를 설정하는 방법은 간단합니다.

다음과 같이 프로퍼티의 이름 뒤에 ? 를 붙여주면 됩니다.

let user: {
  id?: number; // 선택적 프로퍼티가 된 id
  name: string;
} = {
  id: 1,
  name: "이정환",
};

user = {
  name: "홍길동",
};

id 프로퍼티 뒤에 붙은 물음표의 의미는

이 프로퍼티는 이제 생략 가능한 선택적(Optional) 프로퍼티라는 의미입니다.

 

그러나 한 가지 주의할 점이 있는데

선택적 프로퍼티가 만약 존재한다면,

그때의 value 타입은 반드시 number 타입이어야 한다는 점입니다.

따라서 다음과 같이 id 프로퍼티를 추가하고,

value 를 string 타입의 값으로 설정하면

오류가 발생합니다.

let user: {
  id?: number;
  name: string;
} = {
  id: 1,
  name: "이정환",
};

user = {
  id: "id", // 오류 발생!
  name: "홍길동",
};

 

읽기전용 프로퍼티(Readonly Property)

다음으로는 읽기 전용 프로퍼티에 대해 알아보았습니다.

특정 프로퍼티를 읽기 전에 전용으로 만들고 싶다면

다음과 같이 프로퍼티의 이름 앞에 readonly 키워드를 붙이면 됩니다.

let user: {
  id?: number;
  readonly name: string; // name은 이제 Readonly 프로퍼티가 되었음
} = {
  id: 1,
  name: "이정환",
};

user.name = "dskfd"; // 오류 발생

name 프로퍼티는 이제 읽기 전용 프로퍼티가 되었기 때문에

마지막 라인처럼 프로퍼티의 값을 수정하려고 하면

오류가 발생합니다.

이를 통해 의도치 않은 프로퍼티의 수정을 방지할 수 있습니다.