카테고리 없음

TypeScript의 유틸리티 타입을 알아보자 (1)

qloz 2022. 11. 3. 16:29
728x90

TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공한다.

유틸리티 타입을 이용하면 타입 변환을 더 쉽게 할 수 있다.

Partial<Type>

Type의 모든 속성을 선택적으로 사용할 수 있다.

주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환한다.

type Partial<T> = {
    [P in keyof T]?: T[P];
};

원형은 다음과 같다.

코드를 통해 Partial에 대해 알아보자

type Person = {
  name: string;
  email: string;
};

const App = () => {
  const name: Partial<Person> = {
    name: "seongyeon",
  };
  const email: Partial<Person> = {
    email: "ysy2565@naver.com",
  };
  return <div>study partial</div>;
};

export default App;

위와 같이 Person 타입은 name과 email을 필수 프로퍼티이기 때문에, 안쓰면 오류를 내뱉어야하지만, email과 name의 변수에 각 속성이 하나씩 없어도, 에러 없이 잘 동작할 수 있다.

Required<Type>

Type의 모든 속성들을 필수적으로 만드는 유틸리티 타입이다.

optional의 속성일지라도 필수 프로퍼티로 변경되어진다.

type Required<T> = {
    [P in keyof T]-?: T[P];
};

원형은 위와 같이 나와 있다.

코드를 통해 Required에 대해 알아보자

type Person = {
  name: string;
  email?: string;
};

const App = () => {
  const name: Required<Person> = {
    name: "seongyeon",
  };
//'email' 속성이 '{ name: string; }' 형식에 없지만 'Required<Person>' 형식에서 필수입니다.
  return <div>study Required</div>;
};

export default App;

위와 같이 Person의 email프로퍼티는 optional이지만, Required를 주는 순간 email 프로퍼티가 없다고 오류를 발생하는 것을 확인할 수 있다.

Readonly<Type>

Type의 모든 속성을 읽기 전용으로 설정한 타입을 구성한다.

생성된 타입의 모든 속성은 재할당 할 수 없다.

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

원형은 위와 같다.

코드를 통해 Readonly를 알아보자

type Person = {
  name: string;
  email?: string;
};

const App = () => {
  const person: Readonly<Person> = {
    name: "Delete inactive users",
  };

  person.name = "Hello"; // 읽기 전용 속성이므로 'email'에 할당할 수 없습니다.
  return <div>study partial</div>;
};

export default App;

위와 같이 person은 Person타입을 Readonly해주었다.

Readonly는 오직 읽기만 가능하고, 수정이 불가능하다.

수정을 하려고하면 위처럼 읽기 전용 속성으로 수정이 불가하다는 오류를 발생하는 것을 확인할 수 있다.

Record<Key, Type>

타입 Type의 속성 집합 Key로 타입을 구성한다.

타입의 속성들을 다른 타입에 매핑시키는데 사용할 수 있다.

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

원형은 위와 같다.

type Person = {
  name: string;
  email?: string;
};

type Key = "home" | "about" | "contact";

const App = () => {
  const x: Record<Key, Person> = {
    about: { name: "about" },
    contact: { name: "contact" },
    home: { name: "home" },
  };
  return <div>study partial</div>;
};

export default App;

Key 타입은 home, about, contact의 키를 허용할 수 있다.

Person 타입의 속성은 name과 email로,

Record는 Key라는 타입의 key를 가지며, person의 속성을 가지는 타입을 갖도록 매핑할 수 있다.

Pick <Type, Key>

Type에서 속성 key의 집합을 선택해 타입을 구성한다.

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};
type Person = {
  name: string;
  email: string;
  age: number;
};

const App = () => {
  type PersonDetail = Pick<Person, "name" | "age">;

  const person: PersonDetail = {
    name: "seongyeon",
    age: 24,
  };
  return <div>study</div>;
};

export default App;

Type에서 Key에 해당되는 프로퍼티만을 선택해서 사용할 수 있다.

Person의 속성은 name, email, age로 3가지의 속성이지만, Pick을 사용하여 name과 age의 프로퍼티만 사용할 수 있다.

Omit<Type, Key>

Type에서 모든 속성을 선택한 다음 key를 제거한 타입을 구성한다.

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
type Person = {
  name: string;
  email: string;
  age: number;
};

const App = () => {
  type PersonDetail = Omit<Person, "email">;

  const Person: PersonDetail = {
    name: "Clean room",
    age: 24,
  };
  return <div>study</div>;
};

export default App;

Person은 name, email, age의 세가지 프로퍼티를 가지는 타입이지만, Omit을 사용하여 해당 Key를 제거한 후, 남은 프로퍼티만을 사용할 수 있다.

이 외에도 유틸리티 타입은 많이 있다.

이번 포스팅한 유틸리티 타입은, 내가 사용하고 많이 들어봤던 유틸리티 타입이다.

남은 유틸리티 타입에 대해서는 공부하고 다음 포스팅을 작성해야겠다.

728x90