[241031] 메인캠프 Day44 - 1 (유틸리티 타입)

수업 중 기억하고 싶은 내용

1. Typescript Utility Type

유틸리티 타입은 미리 정의된 타입 도구로,  기존 타입의 속성이나 구조를 조작하여 원하는 형태의 타입을 쉽게 생성할 수 있도록 하는 타입이다.

즉, 기존 타입을 편리하게 변형하고 재사용하기 위한 타입 도구이다.

 

유틸리티 타입의 주요 목적으로는 타입의 변형 및 조정으로 반복적인 타입 정의를 줄이고, 타입의 안정성과 유지보수성을 향상하는 데 있다.

 

아래 유틸리티 타입을 설명하기 전에 우선 타입 하나를 선언하고 시작해보자.

interface IProfile {
  name: string;
  age: number;
  school: string;
  hobby?: string;
}

 

2. Partial Type

type aaa = Partial<IProfile>;

Partial 타입은 IProfile의 모든 타입을 optional 하게 만들어 주는 타입이다.

설명 그대로 아래와 같이 사용할 수 있게 되는 타입이다.

interface IProfile {
  name?: string;
  age?: number;
  school?: string;
  hobby?: string;
}

 

3. Required Type

type bbb = Required<IProfile>;

Required 타입은 IProfile의 모든 타입을 단어 뜻 그대로 required 하게 만든다.

모든 속성이 필수적으로 입력되도록 변경한다.

interface IProfile {
  name: string;
  age: number;
  school: string;
  hobby: string;
}

 

4. Pick Type

type ccc = Pick<IProfile, "name" | "age">;

Pick 타입은 IProfile 속성 중 원하는 속성만 골라서 사용할 수 있게 해주는 타입이다.

위의 코드처럼 사용하고, 여러 속성을 적을 때는 | 을 사용해서 구분해 준다.

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

 

5. Omit Type

type ddd = Omit<IProfile, "school">;

Omit 타입은 "" 안의 속성을 제외한 모든 속성을 가져오는 타입이다.

interface IProfile {
  name: string;
  age: number;
  hobby?: string;
}

 

6. Record Type

// Union type: 아래 값들 중 하나 골라사용 가능
type eee = "철수" | "영희" | "훈이";

const child1: eee = "철수"; // 철수, 영희, 훈이만 가능
const child2: string = "사과"; // 철수, 영희, 훈이, 사과, 바나나 등등 모두 가능

Record 타입은 키를 기준으로 값을 지정하는 객체 타입이다.

Union 타입이라고 불리는 객체 타입을 사용한다.

Union은 그룹을 의미한다. 위의 코드를 예로 들면 (철수, 영희, 훈이)라는 그룹이 있고, 그 그룹 안의 값을 사용할 수 있는 것이다.

아래 코드처럼 키-값(key-value) 조합으로 작성해서 사용한다.

type 타입 이름 = Record<키로 사용할 타입, 키로 지정한 타입의 타입 지정(이때 기본 타입 외 내가 만든 타입도 가능)>

type fff = Record<eee, number>;
type fff2 = Record<eee, IProfile>;

 

7. 객체의 Key로 Union 타입 만들기

객체가 존재할 때, 해당 객체의 키만 가져오고 싶을 때 사용한다.

여기서 객체는 Union을 의미한다.

type ggg = keyof IProfile; // "name" | "age" | "school" | "hobby"
const myprofile: ggg = "hobby";

 

8. Type vs Interface

interface IProfile {
  candy: number;
}

const qqq: IProfile = {
  name: "철수",
  candy: 3,
  // ...
};

Interface는 Type과 다르게 선언 병합이 가능하다.

따라서 interface 속성을 추가해 줄 수 있다.

 

9. 응용 예제

회원 프로필을 수정하려고 한다.

이때 유틸리티 타입은 어떤 걸 사용해줘야 할까?

 

우선 수정을 하기 위해선 모든 속성이 optional이 되어야 한다.

왜냐. 등록할 때는 필수값이 존재하더라도 수정할 때는 (로직에 따라 다르겠지만) 입력받지 않는 값에 대해서는 default value를 넣어주면 되기 때문이다.

 

따라서 아래와 같이 작성해 주면 된다.

const profile: Partial<IProfile> = {
  name: "영희",
  candy: 45,
};

console.log(profile);

 

짧은 회고

걱정했던 것과는 다르게 유틸리티 타입은 타입 이름 그대로 해석하면 되는 경우가 많아 직관적이었다.

Pick이나 Partial 등 자주 사용할 수 있을 것 같은 타입들도 많아서 잘 공부해 둬야겠다.

 

Utility Type 공식문서

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

Documentation - Utility Types