[TypeScript] 객체

본 내용은 이정환님의 "한 입 크기로 잘라먹는 타입스크립트" 강의 내용을 바탕으로 작성되었습니다.

 

TypeScript에서는 2가지 방식으로 객체의 타입을 정의할 수 있습니다.

// object로 정의
let user: object = {
  id: 1,
  name: "user1",
};
user.id; // ❌오류, 'object' 형식에 'id' 속성이 없습니다.


// 객체 리터럴로 정의
let user: {
  id: number;
  name: string;
} = {
  id: 1,
  name: "user1",
};
user.id; // ⭕️

위의 예시와 같이 object로 정의하는 방법과 객체 리터럴로 정의하는 방법이 있습니다.

object로 정의할 경우 객체의 특정 프로퍼티에 접근하려고 하면 오류가 발생하는 것을 볼 수 있습니다.

이런 오류가 발생하는 이유는 TypeScript의 object 타입은 단순 값이 객체임을 표현하는 것 외에 다른 정보를 제공하지 않기 때문입니다.

 

그렇다면 객체의 특정 프로퍼티에 접근하고 싶으면 어떻게 해야할까요?

답은 위의 예시에서 보이는 것처럼 객체 리터럴 타입을 사용하면 됩니다.

객체 리터럴 타입은 중괄홀,ㄹ 열고 객체가 갖는 프로퍼티를 직접 나열해 만드는 타입입니다.

이렇게 객체 리터럴을 사용할 경우, 위의 예시에서  user.id가 오류없이 잘 동작하는 것을 볼 수 있습니다.

 

 

다음으로는 객체 리터럴 타입을 사용하여 객체의 타입을 정의할 때 특정 프로퍼티가 선택적으로 존재하거나 읽기 전용으로

만드는 방법에 대해 보겠습니다.

 

선택적 프로퍼티(Optional Property) : 

let user: {
  id: number;
  name: string;
} = {
  id: 1,
  name: "user1",
};

user = {
  name: "user2", // ❌ 오류 발생!
};



let user: {
  id?: number; // optional property
  name: string;
} = {
  id: 1,
  name: "user1",
};

user = {
  name: "user2", // ⭕️
};

위의 첫번째 user 예시를 보면 user의 타입은 id와 name 프로퍼티 모두를 받아야하는데 마지막 라인에서 name만 존재하는 객체를

할당했기 때문에 오류가 발생하게 됩니다.

특정 프로퍼티를 생략 가능하도록 만들고 싶다면 위의 두번째 user 예시처럼 프로퍼티의 이름 뒤에 ? 를 붙여주어 선택적 프로퍼티(optional property)를 만들어 주면 생략이 가능하게 됩니다.

이때 id는 선택적 프로퍼티로 생략이 가능하지만 값이 존재할 경우 그 값은 반드시 number 타입으로 작성되어야 합니다.

 

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

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

user.name = "changed"; // ❌ 오류 발생

읽기 전용 프로퍼티는 말 그래로 읽기만 가능한 프로퍼티입니다.

읽기 전용 프로퍼티로 만들기 위해서는 위의 예시처럼 프로퍼티의 이름 앞에 readonly 키워드를 붙여주기만 하면 됩니다.

 

 

 

 

출처 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8