[TypeScript] 객체

📌 객체

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프로퍼티가 없다라고 뜸

그럼 어떻게 해야할까?

---

객체 리터럴 타입

객체 리터럴 타입을 이용하면 해결됨

let user: {
  id: number;
  name: string;
} = {
  id: 1,
  name: "이도서",
};

user.id;

변수 user의 타입을 number타입의 id 그리고 string타입의 name프로퍼티를 갖는 객체 타입으로 정의했음.

변수의 타입을 객체 리터럴 타입으로 정의하면 이제 타입내에 정의되어 있는 프로퍼티에 이상 없이 접근할 수 있게됨.

---

특수한 프로퍼티 정의

객체 타입을 정의할 때 특정 프로퍼티를 선택적이거나 읽기 전용으로 만드는 타입스크립트의 독특한 문법이 있음.

1. 선택적 프로퍼티

자바스크립트에서 객체를 다루다보면 자주 특정 프로퍼티는 있어도 되고 없어도 되는 그런 상황이 존재함.

예를 들어 다음과 같이 이름은 있지만 아직 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: "도서",
};

---

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

다음으로는 읽기 전용 프로퍼티임.

특정 프로퍼티를 읽기 전용으로 만들고 싶다면 다음과 같이 프로퍼티의 이름 앞에 readonly 키워드를 붙이면 됨.

// name은 이제 Readonly 프로퍼티가 되었음}={  id:1,  name:"이도서",};
let user:{  id?:number;readonly name:string;
user.name="dskfd";// 오류 발생

name 프로퍼티는 이제 읽기 전용 프로퍼티가 되었기 때문에 마지막 라인처럼 프로퍼티의 값을 수정하려고 하면

오류가 발생하게 됨. 이를 통해 의도치 않은 프로퍼티의 수정을 방지할 수 있음.