본문 바로가기

TypeScript

TypeScript : 고급 타입

enum과 object literal 비교

enum의 장점

  • 코드의 가독성 증가, 명확한 상수 값 정의
  • 컴파일 시에 자동으로 숫자 값으로 매핑되므로 따로 값을 할당할 필요 X
    • 특정 숫자 값으로 매핑되어야 한다면 직접 할당

object literal의 장점

  • 어떤 타입의 값도 대입 가능
  • 코드 내에서 사용하기 전에 값이 할당되어야 하므로, 런타임 에러를 방지

enum을 쓰면 좋은 경우

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

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

  • 멤버의 값이나 데이터 타입을 원하는대로 변경 가능
  • 복잡한 구조와 다양한 데이터 타입을 사용해야 할 때

 

유틸리티 타입

Partial<T> 

타입 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 });

 

  • Person이라는 인터페이스는 name, age라는 속성으로 구성
  • updatePerson 함수 2번째 인자로 Partial<Person> 타입의 fields
  • field라는 인자가 구성이 될 수 있는 경우의 수
    • name이라는 속성만 있어도 O
    • age라는 속성만 있어도 O
    • name, age라는 속성이 둘 다 있어도 O
    • 이 밖의 상황은 허용 X
      • 예를 들어, { name, gender }와 같이 기존에 없는 속성 X

Required<T>

타입 T의 모든 속성을 필수적으로 만듦

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

더보기
interface Person {
  name: string;
  age: number;
  address?: string; // 선택적 속성
}

type RequiredPerson = Required<Person>;

 

Required<T> 타입을 통해 선언하면 address 입력도 필수

Readonly<T>

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

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> 타입으로 불변 객체로 만들 수 있음

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 };

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

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 };

SubsetPerson 타입은 Person 타입에서 address 속성만 제외한 새로운 타입

이 외에도 다양한 유틸리티 타입

https://www.typescriptlang.org/ko/docs/handbook/utility-types.html

 

Documentation - Utility Types

Types which are globally included in TypeScript

www.typescriptlang.org

 

 

'TypeScript' 카테고리의 다른 글

TypeScript : 객체 지향 프로그래밍 - 1 (Class, 상속)  (0) 2024.07.02
강의 복습  (0) 2024.06.30
TypeScript : 기본 타입  (0) 2024.06.29
TypeScript : .d.ts 파일  (0) 2024.06.29
TypeScript : tsconfig.json  (0) 2024.06.29