[TIL]2023.07.28 Type Script 적응기 유틸리티 타입(Partial, Required, Readonly, Pick, Omit) 정리 😬

Nick·2023년 7월 28일
0

TIL: 오늘을 돌아보자

목록 보기
56/95
post-thumbnail
post-custom-banner

어제에 이어 고급 타입에 대해 기록해보자

유틸리티 타입

Partial

  • 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 타입의 fields를 받고있다.
  • 이 field라는 인자가 구성이 될 수 있는 경우의 수는 다음과 같다.
    • name이라는 속성만 있어도 됨
    • age라는 속성만 있어도 됨
    • name, age라는 속성이 둘 다 있어도 됨
    • 이 밖의 상황은 허용하지 않음 ( ex: { name, gender }와 같이 기존에 없는 속성을 넣어서는 안됨)
  • con ) Partial<T> 타입으로 유연하게 타입의 속성을 선택해서 객체를 만들 수 있다!

Required

Partial<T> 타입과는 반대로 Required<T> 타입은 타입 T의 모든 속성을 필수적으로 만든다!
다시 말해서, T 타입 객체에 정의된 모든 속성이 반드시 전부 제공이 되는 객체를 생성해야 할 때 쓰인다!

예시

interface Person {
  name: string;
  age: number;
  address?: string; // 속성 명 뒤에 붙는 ?가 뭘까요
}
  • 위에 있는 Person이라는 인터페이스에 address라는 속성 추가
  • address에 ?
    • 얘는 선택적 속성이다 (있어도 되고 없어도 됨)
  • 하지만, address를 필수적으로 받아야 하는 제약사항이 있다고 하면 다음과 같이 할 수 있다,
	type RequiredPerson = Required<Person>;

이렇게 Required<T> 타입을 통해 선언하면 address 입력도 필수가 된다!

Readonly

Readonly 타입은 타입 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"; // 오류!
  • atabaseConfig는 불변 객체라고 할 수 없다. 왜냐하면 host가 readonly가 아니니까!
  • 하지만, ReadOnly<T> 타입으로 불변 객체로 만들 수 있음!

Pick<T, K>

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>

  • 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 };
  • 여기서 SubsetPerson 타입은 Person 타입에서 address 속성만 제외한 새로운 타입이다.

참조문헌 : 타입스크립트 공식문서

profile
배우고 도전하는것을 멈추지 않는 개발자 입니다.
post-custom-banner

0개의 댓글