[TypeScript] 타입스크립트 객체 (Property 기반 타입 시스템 / 선택적 Property

 

 

1. Object 타입

// object로 타입지정

let user1:object = {
  id: 1,
  name: '김도현',
};

user1.id; //'object'형식에 'id'속성이 없습니다.

 

object로 타입을 지정해 주는 경우, user1이 객체라는 정보밖에 없기 때문에, 안에 있는 객체들의 정보는 알 수 없어 점표기법으로 id속성에 접근하게 되면 오류가 발생하게 된다.

 

그렇다면 어떻게 해결해야 할까? 리터럴 방법을 사용해야 한다.

 

 

 

2. 객체 리터럴 

// 객체 리터럴 방식으로 타입지정
let user2: {
    id:number;
    name:string;
} = {
    id:1,
    name:"김도현",
}

user2.id; // 정상적으로 인식

 

 

위처럼 선언하는 방식을 객체의 각 속성을 리터럴 하는 방법과 비슷하다해서 객체 리터럴 타입이라고 부른다.

객체 리터럴 방식으로 객체를 선언하게 되면, 점표기법으로 user2.id에 접근하는 것도 오류 없이 정상적으로 작동하는 것을 볼 수 있다.

 

 

그렇기에 대부분 TypeScript에서는 객체의 타입을 지정할 때, object방법보다 객체 리터럴 타입으로 많이 선언하게 된다.

 

 

 

3. Property 기반 타입 시스템

 

Q. TypeScript만 왜 이따구로 타입을 지정함?

 

A. object면 object고 string이면 string인 거지, TypeScript에서는 특이하게도 객체 타입을 또 아이디, 이름 프로퍼티를 기반으로 정의하고, 다른 객체에서도 각 프로퍼티마다 기반으로 타입을 정의한다.

 

즉 TypeScript에서는 객체의 type을 정의할 때 Object같이 단순하게 정의하는 것이 아니라, 이 객체를 이루는 Property나 Method가 어떻게 생겼는지와 같이 객체의 구조를 기준으로 Type을 정의한다.

 

이렇게 TypeScript에서 객체를 정의하는 방식을 Property기반 타입 시스템이라고도 부른다.
(c언어, java의 경우 이름만을 기준으로 타입을 작성하는 것을 명목적 타입 시스템이라 한다.)

 

---

TypeScript는 대부분의 언어가 사용하는 명목적 타입시스템이 아닌, Property기반 타입 시스템을 사용한다.

---

 

 

 

4. 선택적 Property

let user: {
  id: number;
  name: string;
} = {
  id: 1,
  name: '김도현',
};


user = {
    name:"홍길동"
}

 

만약 이처럼 Id를 아직 모르기 때문에 name부터 입력하는 경우, 오류가 발생하게 된다.

 

 

Q. Id를 선택적으로 있어도 되고, 없어도 되는 property로 지정하고 싶을 때에는 어떻게 해야 할까?

 

A.

let user: {
  id?: number;
  name: string;
} = {
  id: 1,
  name: '김도현',
};

 

Id property뒤에?를 붙여주면 된다.

id?:number; 의 경우 "Id가 없어도 되고 있어도 되지만, 있으면 number여야 한다."를 의미한다.

이렇게 id와 같이 있어도 되고 없어도 되는 property를 선택적 property 또는 optional property라고 부른다.

 

 

 

5. 읽기 전용 property

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

config.apiKey = 'hacked';

 

이렇게 바꾸면 안 될 것 같은 property의 경우, 어떻게 apiKey를 못 바꾸게 할까?

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

config.apiKey = 'hacked';

 

 

 

타입을 지정할 때 property이름 앞에 readonly만 붙여주면 쉽게 점표기법으로 접근하여 property의 값을 변경하는 것을 막을 수 있다.

 

이처럼 readonly가 붙은 property를 읽기 전용 property라고 한다.

 

 

 

 

 

 

 

- 이 포스팅은 '이정환 - 한 입 크기로 잘라먹는 타입스크립트 (인프런)' 강의를 참고하여 작성되었습니다.

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런