[TypeScript] 타입스크립트 객체 타입

🌈 객체 타입을 정의하는 방법

1. object로 정의하기

객체를 의미하는 object로 타입을 정의한다.

let user: object = {
    id: 1,
    name: "김기지"
};

그런데 여기서 user의 id를 꺼내면 문제가 발생한다.

이는 타입스크립트의 object 타입은 단순 값이 객체임을 표현하는 것 외에는 아무런 정보도 제공하지 않기 때문이다.

따라서 이 타입은 객체의 프로퍼티에 대한 정보를 전혀 가지고 있지 않기 때문에 프로퍼티에 접근할 수 없다.

 

그렇다면 변수에 저장된 객체의 구조를 그대로 타입으로 만들려면 어떻게 해야할까?

객체 리터럴 타입을 이용한다.

---

2. 객체 리터럴 타입

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

let user: {
    id: number,
    name: string
} = {
    id: 1,
    name: "김기지"
};

• 변수 user의 타입을 
  • number 타입의 id
  • string 타입의 name
• 프로퍼티를 갖는 객체 타입으로 정의

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

console.log(user.id); // 1

여기서 타입스크립트는 기존의 정적 타입 시스템을 따르는 C언어나 Java와는 달리 객체의 타입을 정의할 때 프로퍼티를 기준으로 객체의 구조를 정의하듯이 타입을 정의한다. 이런 특징을 구조적 타입 시스템(Property Based Type System)이라고 부르며 객체의 구조를 결정하는 것은 프로퍼티가 된다. (C언어나 Java와 같이 이름을 기준으로 타입을 정의하는 타입 시스템은 명목적 타입 시스템이라고 한다.)

 

---

🌈 특수한 프로퍼티 정의하기

1. 선택적 프로퍼티 (Optional Property)

객체 타입을 정의할 때 특정 프로퍼티를 선택적이거나 읽기 전용으로 만드는 방법

두 프로퍼티 중 하나만 존재하는 상황이 발생해 하나의 프로퍼티만을 입력하는 경우 오류가 발생한다.

 

이러한 경우에는 id 프로퍼티를 선택적 프로퍼티로 만들어준다.

let user: {
    id?: number, // 프로퍼티의 이름 뒤에 ?를 붙인다.
    name: string
} = {
    id: 1,
    name: "김기지"
};

• ?를 붙여주면 선택적 프로퍼티라는 의미를 가진다.
  • id 프로퍼티는 없어도 되는 프로퍼티이지만 
  • 존재한다면 number타입 이어야함

 

 

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

특정 프로퍼티를 읽기 전용으로 만드는 방법

특정 프로퍼티를 값에 접근하는 일이 없게  읽기 전용으로 만들고 싶은 경우에는 프로퍼티의 이름 앞에 readonly 키워드를 붙인다.

let user: {
    id?: number,
   readonly name: string
} = {
    id: 1,
    name: "김기지"
};

• readonly 키워드가 붙여진 읽기 전용 프로퍼티는 값에 접근해 수정할 수 없다.

 

---

🔗 타입스크립트 강의

한 입 크기로 잘라먹는 타입스크립트 - 인프런 | 강의