Typescript 2일차

윱니·2023년 12월 13일

1. enum과 object literal

1. enum

  • 열거형 데이터 타입
  • 상수의 그룹화를 위해서 아주 좋은 타입
  • 컴파일 시에 자동으로 숫자 값으로 매핑되므로 따로 값 할당 x

2. object literal (객체 리터럴)

  • 키 + 값 의 쌍(pair)으로 구성된 객체를 정의하는 방식
  • enum이 number, string 값만 데입할 수 있었다면 object literal은 어떤 타입의 값도 대입 가능
  • 코드 내에서 사용하기 전에 값이 할당되어야 하므로 런타임 에러 방지

3. 언제 enum? 언제 object literal?

  • enum은 간단한 상수 값을 그룹화 해서 관리할 때 적합, enum은 상수 값이기 때문에 각 멤버의 값이 변하면 안된다는 조건
  • object literal은 멤버의 값이나 데이터 타입을 맘대로 변경할 수 있음, 복잡한 구조와 다양한 데이터 타입을 사용해야 할 때

2. 유틸리티 타입

1. Partial<T>

  • 타입 T의 모든 속성을 선택적으로 만듦
  • 기존 타입의 일부 속성만 제공하는 객체를 쉽게 생성
interface Person {
  name: string;
  age: number;
}

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

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

2. Required<T>

  • Partial<T> 타입과는 반대로 Required<T> 타입은 타입 T의 모든 속성을 필수적으로 만듦
  • T타입 객체에 정의된 모든 속성이 반드시 전부 제공이 되는 객체를 생성할 때 쓰임

3. Readonly<T>

  • 타입 T의 모든 속성을 읽기 전용으로 만듦
  • readonly 타입의 속성들로 구성된 객체가 아니어도 완전한 불변 객체로 취급 가능
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"; // 오류!

=> DatabaseConfig는 불변 객체라고 할 수 없음 (host가 readonly가 아니기 때문) 하지만 Readonly<T>타입으로 불변 객체로 만들 수 있음

4. Pick<T, K>

  • 타입 T에서 K 속성들만 선택하여 새로운 타입을 만듦
  • 이를 통해 타입의 일부 속성만을 포함하는 객체를 쉽게 생성할 수 있음
interface Person {
  name: string;
  age: number;
  address: string;
}

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

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

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

5. Omit<T, K>

  • 타입 T에서 K속성들만 제외한 새로운 타입을 만듦
  • Pick<T, K>유틸리티 타입과 반대의 동작
  • 이를 통해 기존 타입에서 특정 속성을 제거한 새로운 타입을 쉽게 생성할 수 있음
interface Person {
  name: string;
  age: number;
  address: string;
}

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

const person: SubsetPerson = { name: "Alice", age: 30 };
profile
코린이 탈출을 기원하는 코린이

0개의 댓글