타입스크립트의 객체를 다루는 방식

객체

이번에는 타입스크립트에서 객체를 다루는 방식을 이야기해 보겠다.

일단 코드는 다음과 같으니 참고하길 바란다.

예시 코드 >

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

let config: {
  readonly apiKey: string;
} = {
  apiKey: 'MY API KEY',
};

// config.apiKey = "hacked";

---

먼저, 객체를 선언한다. 여기까지는 자바스크립트와 동일하다.

이때, 내가 객체에 할당하고 싶은 변수에 대한 타입을 작성해 두면 된다.

객체 리터럴 타입

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

---

객체 리터럴 타입이란, 중괄호를 열어서 객체에 해당되는 리터럴 타입을 할당하는 것을 말한다. 리터럴 타입은 제일 엄격한 타입이라고 생각하면 편하다. (값 그 자체를 타입처럼 여긴다.)

선택적 프로퍼티

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

예를 들어, 당신에게 user의 id가 뭔지를 모르는 상황이라고 가정하자. 이때 할당해 주는 것이 "?" 명령어다. 이 명령어를 변수옆에 할당해 주면 된다. 이것을 선택적 프로퍼티라고 한다. 코드는 위에서 제공해주었다.

---

readonly

let config: {
  readonly apiKey: string;
} = {
  apiKey: 'MY API KEY',
};

config.apiKey = "hacked"; // 읽기 전용 속성이므로 'apiKey'에 할당할 수 없습니다.

위 코드를 보자. config라는 객체를 생성. 이후 apikey라는 변수를 할당하고, 그 변수에는 'MY API KEY'가 할당되었다.

근데 이후 config의 apikey에 접근해서 "hacked"를 선언한다면? 이런 식으로 코드를 짜면 안 된다.

이것을 방지하기 위해. apikey 변수 앞에 readonly를 붙여주면, 이제 앞으로 이 속성은 "읽기 전용 속성"이 되어서 따로 할당을 할 수 없게 만들 수 있다.

---