TypeScript 객체

객체

객체 타입을 정의하는 방법

타입스크립트에서는 두가지 방법으로 객체의 타입을 정의할 수 잇다.

Object로 정의하기

먼저 간단한 객체를 하나 만들어보자

let user = {
    id: 1,
    name: "김감자",
};

이제 타입을 정의해보자

let user: object = {
    id: 1,
    name: "김감자",
};

하지만 타입을 이렇게 정의하면 한가지 문제가 발생한다.

위 이미지처럼 점 표기법으로 객체의 특정 프로퍼티에 접근하려고 하면 오류('object' 형식에 'id' 속성이 없습니다.)가 발생한다.

위와 같은 에러메세지가 발생하는 이유는 우리가 정의한 object타입은 단순 값이 객체임을 표현하는것 이외에는 아무런 정보도 제공하지 않는 타입이기 때문이다.
따라서 이 타입은 객체의 프로퍼티에 대한 정보를 전혀 가지고 있지 않아서 이러한 오류가 발생하는 것이다.
하지만 프로그래머가 변수 user에 저장된 객체의 구조를 그대로 타입으로 만들고 싶을때는 어떻게 해야할까?

객체 리터럴 타입

위에서 살펴본 에러메세지를 해결하는 방법으로는 객체 리터럴 타입을 이용하는 방법이 있다.

let user: {
    id: number;
    name: string;
} = {
    id: 1,
    name: "김감자",
};

위와 같이 변수 user의 타입을 id는 number타입, name은 string타입인 프로퍼티를 갖는 객체 타입으로 정의할 수 있다.
이렇게 객체 리터럴과 비슷한 문법으로 객체 타입을 정의한 타입을 객체 리터럴 타입이라고 한다.

이렇게 변수의 타입을 객체 리터럴 타입으로 정의하면 이제 타입내에 정의되어 있는 프로퍼티에 이상 없이 접근할 수 있게 된다.
지금처럼 점 표기법을 예시로 작성하였지만 괄호 표기법을 사용할때에도 동일하게 잘 접근된다.

또 이렇게 프로퍼티에 마우스 커서를 올려보면 위 이미지처럼 프로퍼티 값의 타입도 잘 나타나는것을 볼 수 있다.

let dog = {
    name: "김밀리",
    color: "Brown",
};

위 객체의 타입같은 경우

let dog: {
    name: string;
    color: string;
} = {
    name: "김밀리",
    color: "Brown",
};

위와 같이 정의할 수 있다.

한가지 알 수 있는 사실은 타입스크립트는 기존의 정적 타입 시스템을 따르는 언어인 C나 Java와 달리 객체의 타입을 정의할 때 프로퍼티를 기준으로 객체의 구조를 정의하듯이 타입을 정의한다는 점이다.

타입스크립트의 이런 특징을 구조적 타입 시스템이라고 부른다. 객체의 구조를 결정하는 것은 프로퍼티이다.
따라서 타입스크립트는 이 객체에 어떤 프로퍼티들이 있어야 하는지 정의하는 방식으로 객체의 타입을 정의한다.
구조적 타입 시스템을 Property Based Type System이라고도 한다.

(C나 Java는 타입스크립트의 특징과는 달리 이름을 기준으로 타입을 정의하기때문에 명목적 타입 시스템이라고 한다.)

즉, 타입스크립트는 명목적 타입 시스템이 아닌 구조적 타입 시스템을 가진다.

특수한 프로퍼티 정의하기

객체 타입을 정의할 때 특정 프로퍼티를 선택적이거나 읽기전용으로 만드는 타입스크립트의 독특한 문법에 대해서 알아보자.

let user: {
    id: number;
    name: string;
} = {
    id: 1,
    name: "김감자",
};

위 코드로 프로퍼티를 선택적으로 만들어보자

선택적 프로퍼티(Optional Property)

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

위 이미지와 같이 이름은 있지만 아직 id가 없는 유저가 존재할 수도 있다.
하지만 이렇게 코드를 작성하면 타입스크립트에서는 오류가 발생한다.
user의 타입은 id와 name 프로퍼티가 있는 객체인데 name만 존재하는 객체를 할당했기 때문이다.

이렇게 특정 프로퍼티를 상황에 따라 생략해도 괜찮게끔 만들고 싶다면 해당 프로퍼티를 선택적 프로퍼티로 만들어줘야한다.
선택적 프로퍼티를 설정하는 방법은 프로퍼티의 이름 뒤에 ? 를 붙여주면 된다.

id 프로퍼티 뒤에 붙은 물음표의 의미는 이 프로퍼티는 이제 생략 가능한 선택적(Optional) 프로퍼티라는 의미이다.

그러나 한가지 주의해야할 점이 있다.
만약 위 예제코드에서 선택적 프로퍼티가 존재한다면 그때의 value의 타입은 반드시 number타입이어야 한다는 점이다.

따라서 위와 같이 id프로퍼티를 추가하고 value를 string 타입의 값으로 설정하면 오류가 발생한다.

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

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

name 프로퍼티는 readonly 프로퍼티가 되었기때문에 프로퍼티의 값을 수정하려고 하면 위 이미지와 같이 오류가 발생하게 된다.
이를 통해 의도치 않은 프로퍼티의 수정을 방지할 수 있다.

 

관련 강의 - 한입크기로 잘라먹는 타입스크립트