[TIL 2023.07.26] 타입스크립트 enum과 object literal의 차이점 / 주요 유틸리티 타입

💻오늘 배운 내용

• enum, object literal의 차이점과 언제 사용하면 좋을지 파악할수 있다.
• 주요 유틸리티 타입 학습
• 두 번째 TypeScript 프로그램 코드를 이해하고 발전시킬 수 있다.

 

enum과 object literal의 차이점

enum

enum UserRole {
  ADMIN = "ADMIN",
  EDITOR = "EDITOR",
  USER = "USER",
}

enum UserLevel {
  NOT_OPERATOR, // 0
  OPERATOR // 1
}

열거형 데이터 타입. 상수의 그룹화를 할 때 적절하게 쓰인다.

코드의 가독성을 높이고 명확한 상수 값을 정의할 수 있다.

컴파일 시에 자동으로 숫자 값으로 매핑되므로 따로 값을 할당할 필요가 없다.

 

object literal

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

enum이라는 키워드가 아닌 const 또는 let 키워드를 사용

키 + 값의 쌍(pair)으로 구성된 객체를 정의하는 방식

 

☑️ enum에 비해 object literal이 가지는 장점

• enum의 각 멤버는 상수였기 때문에 number, string 타입의 값만 대입할 수 있었다.
• 하지만, 객체 리터럴에서는 어떤 타입의 값도 대입을 할 수 있다
• 즉, 객체 리터럴은 다양한 데이터 타입을 지원하며 유연한 구조를 가질 수 있다
• 또한, 코드 내에서 사용하기 전에 값이 할당되어야 하므로, 런타임 에러를 방지할 수 있다.

enum을 쓰면 좋은 경우

• enum은 간단한 상수 값을 그룹화해서 관리를 할 때 적합
• 또한, enum은 상수 값이기 때문에 각 멤버의 값이 변하면 안된다는 조건이 있다

객체 리터럴을 쓰면 좋은 경우

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

 

주요 유틸리티 타입

Partial<T> 타입

타입 T의 모든 속성을 선택적으로 만든다.

기존 타입의 일부 속성만 제공하는 객체를 쉽게 생성

 

Required<T> 타입

Partial<T> 타입과는 반대로 타입 T의 모든 속성을 필수적으로 만든다.

T 타입 객체에 정의된 모든 속성이 반드시 전부 제공이 되는 객체를 생성해야 할 때 사용

 

Readonly<T> 타입

타입 T의 모든 속성을 읽기 전용(read-only)으로 만든다

readonly 타입의 속성들로 구성된 객체가 아니어도 완전한 불변 객체로 취급

 

Pick<T, K> 타입

타입 T에서 K 속성들만 선택하여 새로운 타입을 만든다

일부 속성만을 포함하는 객체를 쉽게 생성

 

Omit<T, K> 타입

타입 T에서 K 속성들만 제외한 새로운 타입을 만든다

Pick<T, K> 유틸리티 타입과는 반대의 동작

기존 타입에서 특정 속성을 제거한 새로운 타입을 쉽게 생성

 

❓발생한 이슈/고민

별다방 프로그램 만들기

 

프로그램 기능

• 음료 등록 기능 - 어드민
• 음료 삭제 기능 - 어드민
• 음료 조회 기능 - 어드민, 고객
• 음료 주문 기능 - 고객
• 음료 준비 완료 기능 - 어드민
• 음료 수령 기능 - 고객

 

💡해결과정

1. 유저 (관리자, 고객) / 음료 / 주문 에 대한 인터페이스를 생성한다.

interface User {
  id: number;
  name: string;
  role: 'admin' | 'customer';
}

interface Beverage {
  name: string;
  price: number;
}

interface Order {
  orderId: number;
  customerId: number;
  customerName: string;
  beverageName: string;
  status: 'placed' | 'completed' | 'picked-up';
}

 

2. 어떤 데이터를 관리해야할지 고민해본다.

-role과 status를 상황에 따라 바뀌게끔 해줘야 하나 생각하고 있었는데, 정답은 음료와 주문이었다.

 

3. 유저가 관리자인지, 고객인지 권한을 체크하는 함수를 만든다.

-boolean 타입 활용

 

4.음료 추가, 삭제 / 음료 조회, 찾기 함수를 만든다.

-관리자만 또는 고객만 호출할 수 있게 조건을 추가한 다음 동작에 대한 코드 작성

 

5. 음료 완료 / 음료 수령 함수를 만든다.

-현재의 아이디와 오더의 아이디가 같다면, order의 status를 변경 해준다

 

🧐궁금점과 부족한 내용

 

매개변수 밖에서 타입을 지정해주는 건 무슨 의미인지 이해할 수 없어 검색해보았다.

 

예시)

function isAdmin(user: User): boolean {
  return user.role === "admin";
}

여기서 boolean은 리턴값의 타입을 의미

 

타입스크립트에서 void란?

'아무것도 없이 공허함'을 뜻하는 타입인데 

return할 자료가 없는 함수의 타입으로 사용가능하다.

 

📋레퍼런스

https://codingapple.com/unit/typescript-function-types/