TypeScript 유틸리티 타입 훑기

M·2023년 8월 6일
0

TIL

목록 보기
29/42

Partial < T >

타입 T의 모든 속성을 선택적으로 만듬.
이를 통해 기존 타입의 일부 속성만 제공하는 객체를 쉽게 생성할 수 있음.

interface User {
  email: string;
  password: number;
}

const updateUser = (user: User, fields: Partial<User>): User => {
  return { ...user, ...fields };
}

const user: User = { email: "test1@gmail.com", password: 1234 };
const changeUser = updateUser(user, { password: 1111 }); // 기존에 있는 속성만 사용가능

기존에 있는 속성만 사용가능하며, 원하는 속성만 골라서 접근할 수 있음.

Required < T >

Partial < T > 타입과는 반대로 T 타입 객체에 정의된 모든 속성이 반드시 전부 제공되어야 함.

interface User {
  email: string; 
  password: number;
  address?: string; // <- address뒤에 ?는 선택적 속성이다. (있어도 되고 없어도 됨) 
}
// address를 필수적으로 받아야 한다면 
type RequiredUser = Required<User>; // <- 이렇게 선언하면 address도 필수적으로 입력받아야 함

Readonly < T >

타입 T의 모든 속성을 읽기 전용으로 만듬 (객체의 상수화)
Readonly을 사용해서 readonly타입의 속성들로 구성된 객체가 아니어도 완전한 불변 객체로 취급할 수 있음.

interface DatabaseConfig {
  host: string; // <- readonly 타입이 아님
  readonly port: number; // <- readonly 타입
}

const mutableConfig: DatabaseConfig = {
  host: "localhost", // <- readonly 타입이 아님
  port: 3306, // <- readonly 타입
};

const immutableConfig: Readonly<DatabaseConfig> = {
  host: "localhost", // <- readonly 타입
  port: 3306, // <- readonly 타입	
};

mutableConfig.host = "somewhere"; // host 속성이 readonly 타입이 아니기 때문에 정상적으로 작동함
immutableConfig.host = "somewhere"; // host 속성이 readonly 타입으로 변경되었으니 에러를 발생
}

Pick < T, K >

타입 T에서 K 속성들만 선택하여 새로운 타입을 만듬.
이를 통해 T타입의 일부 속성만을 포함하는 객체를 쉽게 만들 수 있음.

interface User {
  email: string;
  password: number;
  address: string;
}

type SubsetUser = Pick<User, "email" | "password">; // email과 password만 

const user: SubsetUser = { email: "test1@gmail.com", password: 1234 }; // address는 제외

Omit < T, K >

Pick < T, K >와 다르게 타입 T에서 K 속성들만 제외한 새로운 타입을 만듬.
이를 통해 기존 타입에서 특정 속성을 제거한 새로운 타입을 쉽게 만들 수 있음.

 interface User {
  email: string;
  password: number;
  address: string;
}

type SubsetUser = Omit<User, "address">; // address를 제외 

const user: SubsetUser = { email: "test1@gmail.com", password: 1234 }; // adress를 제외한 나머지를 받음
profile
자바스크립트부터 공부하는 사람

0개의 댓글