2023 - 07 - 26 타입스크립트 유틸리티 타입 (Partial, Required, Readonly, Pick, Omit), 선택적 속성

오늘 배운 것 : 타입스크립트 유틸리티

 

1. Partial <T>  -> 여기서 T는 객체다.

 

Person이라는 인터페이스는 name, age로 구성되어있다.

updatePerson을 보면 2번째 인자로,  fields: Partial<Person>를 받고있다.

 

이 field라는 인자가 구성될 수 있는 경우의 수 3가지.

1. name이라는 속성만 존재

2. age라는 속성만 존재

3. name, age 속성 둘 다 존재

 

이 밖의 상황은 허용하지 않음. 예를들어 { name, gender }와 같이 기존에 없는 속성을 넣어서는 안된다.

interface Person {  => Person이라는 인터페이스는 name, age로 구성되어있다.
  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 });

---

2. Required < T >

 

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

interface Person {
  name: string;
  age: number;
  address?: string;  => address라는 속성 뒤에 물음표가 붙었다.
}

address 라는 속성 뒤에 물음표가 붙었는데 이는, 선택적 속성이라는 뜻. 있어도 되고 없어도 되는 옵션.

하지만, address를 필수적으로 받아야 하는 제약사항이 있다고 하면 다음처럼 할 수 있다.

type RequiredPerson = Required<Person>;

이렇게 하면 address를 필수적으로 받아야 한다. allowNull: false 같은 뜻. 필수요건.

 

---

3. 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가 아니기 때문이다.

 

---

4. Pick< T, K >

 

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

 

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

 

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

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

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

---

5. 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 속성만 제외한 새로운 타입이다.

 

이외 유틸리티 타입 참고

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

Documentation - Utility Types