[ TypeScript ] 객체의 타입

객체 타입

• 타입스크립트 에서는 객체의 타입을 2가지 방식으로 지정할 수 있다.
• object타입과, 객체 리터럴 타입이다.

object 타입

• object타입은 그냥 변수 옆에 object라고 입력 하면 되는데, 해당 타입은 사용할 일이 거의 없을 것이다.
• 그 이유는 해당 타입으로 타입을 지정하면 점 표기법으로 객체의 프로퍼티에 접근할 수 없기 때문이다.

// 😀 user는 object라는 타입으로 지정을 하고, 객체를 할당
let user: object = {
  id: 1,
  name: "한대희",
};

// 🔥 점 표기법으로 접근시 에러 발생
user.id

객체 리터럴 타입

• 객체 리터럴 타입은 객체 안의 모든 프로퍼티들의 타입을 지정해 주는 방법이다.
• 위의 object타입을 객체 리터럴 타입으로 바꿔 보자.

// 😀 객체의 모든 프로퍼티에 타입을 지정
type object1 = {
  id: number,
  name: string
}

// 😀 변수에 만들어 둔 객체 리터럴 타입을 지정
let user: object1 = {
  id: 1,
  name: "한대희",
};

// 😀 아래의 방식으로도 지정할 수 있다.
let user: { id: number, name: string } = {
  id: 1,
  name: "한대희"
}

// 😀 점 표기법으로 접근 가능
user.id

• 추가적으로 객체 리터럴 타입을 이용하면 Optional 프로퍼티와 ReadOnly프로퍼티로 지정을 할 수가 있다.

1. Optional Property

• 객체 리터럴 타입으로 타입을 정의 할때 만약 특정 프로퍼티는 있어도 되고, 없어도 되는 프로퍼티로 만들고 싶으면 ?를 붙여 주면 된다.
• 아래의 예제를 보자.

type object1 = {
  id: number,
  name: string
}

// 🔥 user는 object1이라는 타입을 따르기 때문에 object1에 정의된 프로퍼티를 모두 입력해 줘야 한다.
// 🔥 아래의 경우는 id가 빠져 있기 때문에 오류가 날 것이다.
let user: object1 = {
  name: 'hdh'
}

// 😀 위의 경우에서 id프로퍼티는 있어도 되고, 없어도 되게 할려면 id에 ?를 분이면 된다.
type object1 = {
  id?: number,
  name: string
}
// 😀 id가 없어도 오류가 나지 않는다.
let user: object1 = {
  name: 'hdh'
}

2. Readonly Property

• 객체 안에서 수정 되면 안되는 프로퍼티를 지정하고 싶다면 앞에 readonly를 붙여 주면 된다.

type object1 = {
  id: number,
  name: string
}


let user1: object1 = {
  id: 1,
  name: 'hdh'
}

// 🔥 점 표기법으로 user1객체의 id 값을 바꿀 수 있다.
user1.id = 2

console.log(user1) // { id: 2, name: 'hdh' }

// 😀 그런데 만약에 id값은 외부에서 수정할 수 없게 하고 싶다면 앞에 readonly를 불여 주면 된다.
type object1 = {
  readonly id: number,
  name: string
}

// 😀 외부에서 값을 수정할려고 하면 에러가 발생한다.
let user1: object1 = {
  id: 1,
  name: 'hdh'
}

// 에러 발생
user1.id = 2