TypeScript 도전기_enum/object literal, 유틸리티 타입

지난 포스팅에 이어 타입에 대한 포스팅을 이어나간다.

 

#1. enum과 object literal 비교하기 !

1) enum의 장점
- 명확한 상수 값을 정의하여 코드의 가독성을 높인다.
- 컴파일 시에 자동으로 숫자 값으로 매핑되므로 따로 값을 할당할 필요가 없다. 
(직접 할당도 가능하다.)

2) Object literal

const obj = {
  a: [1,2,3],
  b: 'b',
  c: 4
}

- 선언 키워드가 enum이 아닌 const / let으로 사용
- 키/value Pair 

3) object literal이 가지는 장점
- enum의 경우 각 멤버는 상수이기에 Number, String 타입의 값만 대입할 수 있다.
- 객체 리터럴의 경우 어떤 타입의 값도 대입할 수 있다.
- 또한 코드 내에서 사용하기 전에 값이 할당되어야 하므로, 런타임 에러를 방지할 수 있다. 

4) 언제 사용!?
- enum을 쓰면 좋은 경우
* 간단한 상수 값을 그룹화해서 관리를 할 때
* enum은 상수 값이기 때문에 각 멤버의 값이 변하면 안된다는 조건

- 객체 리터럴
* 멤버의 값이나 데이터 타입을 맘대로 변경
* 복잡한 구조와 다양한 데이터 타입을 사용해야 할 때

 

#2. 유틸리티 타입 훑어보기

1) Partial<T> 

interface Person {
  name: string;
  age: number;
}

const updatePerson = (person: Person, fields: Partial<Person>): Person => {
  return { ...person, ...fields };
};

const person: Person = { name: "Spartan", age: 30 };
const changedPerson = updatePerson(person, { age: 31 });

- 일부 속성만 제공하는 객체 생성
- 위 예제에서 updatePerson 함수 내 2번째 인자로 Partial<Person> 타입의 fields를 받고 있으며 경우의 수는 아래와 같다.
  * name이라는 속성만 있어도 된다.
  * age 라는 속성만 있어도 된다.
  * name, age라는 속성이 둘 다 있어도 된다. 
  * 단 기존에 없는 속성을 넣어서는 안된다. 
- Partial<T> 타입으로 유연하게 타입의 속성을 선택해서 객체를 만들 수 있다. 

2) Required<T>

interface Person {
  name: string;
  age: number;
  address?: string; // 속성 명 뒤에 붙는 ?가 뭘까요
}

type RequiredPerson = Required<Person>;

- 모든 속성을 필수로 만든다.
- 위 예제에서 address에 ? 를 붙임으로 선택적 속성(없어도 되는 속성)으로 구성했으나, 

type RequiredPerson = Required<Person>으로 address를 필수 값으로 만들었다. 

3) Readonly<T>
- 타입 T의 모든 속성을 읽기 전용으로 만든다.
- 이로써 완전한 불변 객체로 취급할 수 있다. 

interface DatabaseConfig {
  host: string;
  readonly port: number; // 인터페이스에서도 readonly 타입 사용 가능해요!
}

const mutableConfig: DatabaseConfig = {
  host: "localhost",
  port: 3306,
};

const immutableConfig: Readonly<DatabaseConfig> = {
  host: "localhost",
  port: 3306,
};

mutableConfig.host = "somewhere";
immutableConfig.host = "somewhere"; // 오류!

4) Pick<T,K> 
- 타입 T에서 K 속성들만 선택하여 새로운 타입을 만든다. 
- 이를 통해 타입의 일부 속성만을 포함하는 객체를 쉽게 생성할 수 있다. 

interface Person {
  name: string;
  age: number;
  address: string;
}

type SubsetPerson = Pick<Person, "name" | "age">;

const person: SubsetPerson = { name: "Spartan", age: 30 };

- SubsetPesrson은 Person 이라는 인터페이스에서 name, age 속성만 선택해서 구성된 새로운 타입

5) Omit<T,K>
- 타입 T,에서 K 속성들만 제외한 새로운 타입을 만든다.
- 기존 타입에서 특정 속성을 제거한 새로운 타입을 생성

interface Person {
  name: string;
  age: number;
  address: string;
}

type SubsetPerson = Omit<Person, "address">;

const person: SubsetPerson = { name: "Alice", age: 30 };

참고자료
https://www.typescriptlang.org/ko/docs/handbook/utility-types.html

Documentation - Utility Types

 

아직은 많이 헷갈리는 부분이 많기에 계속 코딩을 하며 익숙해지는게 첫번째인듯 하다.