TIL - 20230727(유틸리티타입)

민태영·2023년 7월 26일

타입스크립트의 유틸리티 타입

기존의 인터페이스나 제니릭 등의 기본 문법보다 훨씬 더 간결한 문법으로 타입으로 타입을 정의 할 수 있으며 이미 정의해놓은 타입을 변환할 때 유용하게 쓰인다.

자주 사용되는 유틸리티 타입 몇가지
1. Partial:
특정 타입의 부분 집합을 만족하는 타입을 정의 할 수 있다.
모든 속성이 필수적으로 들어가지 않아도된다.

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

const updatePerson = (person: Person, fields: Partial<Person>): Person => {
  return { ...person, ...fields };
};
const person: Person = {} // 가능 
const person: Person = { name: "Spartan", age: 30 };
const changedPerson = updatePerson(person, { age: 31 });
  1. Required:
    Partial타입과 반대로 T타입 객체에 정의된 모든 속성이 반드시 전부 제공이 되는 객체를 생성해야할 때 쓰인다.
    address뒤에 ?가 붙은 것은 선택적 속성으로 있어도 없어도 되는 속성이지만 Required를 붙이면 필수적 요소가 된다.
interface Person {
  name: string;
  age: number;
  address?: string; // 속성 명 뒤에 붙는 ?가 뭘까요
}

type RequiredPerson = Required<Person>;
  1. Pick:
    Pick타입은 특정 타입에서 몇 개의 속성을 선택(pick)하여 타입을 정의할 수 있다.
    아래의 SusetPerson은 Person이라는 인터페이스에서 name, age속성만 선택해서 구성된 새로운 타입이다.
interface Person {
  name: string;
  age: number;
  address: string;
}

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

const person: SubsetPerson = { name: "Spartan", age: 30 };
  1. Omit:
    Omit타입은 Pick과 반대로 T에서 K속성들만 제외한 새로운 타입을 만든다.

아래는 Persone에서 address를 Omit으로 제외한 새로운 타입 SunsetPerson을 확인할 수 있다.

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

type SubsetPerson = Omit<Person, "address">;

const person: SubsetPerson = { name: "Alice", age: 30 };
  1. Readonly:
    Readonly<"T"> 타입은 T의 모든 속성을 읽기 전용으로 만들어 완전한 불변 객체로 취급할 수 있다.

앞에 readonly를 붙인 immutalbleConfig의 host를 "string"에서 "somewhere"로 바꿀려고 접근할 시 에러가 뜨는걸 확인 할 수 있다.

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"; // 오류!
profile
꿈을 꾸는 개발자

0개의 댓글