TypeScript 공부 #8

☘️유틸리티 타입(Utility Types)

keyof

keyof를 사용하면 인터페이스의 key값을 유니온 형태로 받을 수 있다.

// keyof
interface User {
    id: number;
    name: string;
    age: number;
    gender: "m" | "f";
}

// 'id' | 'name' | 'age' | 'gender'
type UserKey = keyof User;

Partial<T>

Partial은 옵셔널로 바꿔주어, 인터페이스의 일부분만 사용 가능하게 해 준다.

// partial<T>
interface User {
    id: number;
    name: string;
    age: number;
    gender: "m" | "f";
}

let admin: Partial<User> = {
    id: 1,
    name: "짱잼",
}

만약 여기서 Partial이 없으면 다음과 같이 age와 gender 값이 없다는 에러가 발생한다.

Required<T>

Partial과 반대로 Required가 있다. Required는 모든 프로퍼티를 필수로 바꿔준다.

 

age 뒤에 물음표(?)를 붙여 선택적으로 입력받을 수 있게 설정하였지만

// Required<T>
interface User {
    id: number;
    name: string;
    age?: number;
    gender: "m" | "f";
}

Required를 사용할 경우 필수로 입력받게 만들어 다음과 같이 에러가 생긴다.

그래서 age의 값을 넣어줘야 한다.

// Required<T>
interface User {
    id: number;
    name: string;
    age?: number;
    gender: "m" | "f";
}

let admin: Required<User> = {
    id: 1,
    name: "짱잼",
    gender: "f"
}

let u1: User = {
    id: 2,
    name: "철수",
    gender: "m"
}

Readonly<T>

Readonly는 말 그대로 읽기 전용이라는 뜻이다.

 

원래 이렇게 값을 수정할 수 있지만

interface User {
    id: number;
    name: string;
    age?: number;
}

let admin: User = {
    id: 1,
    name: "짱잼",
}

admin.id = 2;

Readonly를 붙이면 다음과 같이 read-only 라서 수정할 수 없다는 에러가 뜬다.

Record<K, T>

Record<K, T>에서 K는 key 이고, T는 type이다.

 

만약 Record를 사용하지 않고, 학년 별로 성적을 입력받을 경우 다음과 같이 복잡하게 작성할 수 있다.

interface Score {
    "1": "A" | "B" | "C" | "D";
    "2": "A" | "B" | "C" | "D";
    "3": "A" | "B" | "C" | "D";
    "4": "A" | "B" | "C" | "D";
}

const score: Score = {
    1: "A",
    2: "D",
    3: "C",
    4: "A",
}

하지만 Record를 사용하여 간편하게 Grade를 key로 사용하고 Score를 type으로 사용할 수 있다.

type Grade = "1" | "2" | "3" | "4"
type Score = "A" | "B" | "C" | "D"

const score: Record<Grade, Score> = {
    1: "A",
    2: "D",
    3: "C",
    4: "A",
}

Pick<T, K>

Pick은 말 그대로 고른다는 의미이며, T 타입에서 K 프로퍼티만 Pick 한다.

 

그래서 User에서 id와 name만 골라 해당 값만 입력하여 사용한다.

interface User {
    id: number;
    name: string;
    age: number;
    gender: "M" | "F"
}

const admin: Pick<User,"id" | "name"> = {
    id: 1,
    name: "짱잼",
}

Omit<T, K>

Pick과 반대로 Omit을 사용하면 특정 프로퍼티를 생략하여 사용할 수 있다.

 

즉 id과 name을 제외한 age와 gender만 사용한다는 뜻이다.

interface User {
    id: number;
    name: string;
    age: number;
    gender: "M" | "F"
}

const admin: Omit<User,"id" | "name"> = {
    age: 1,
    gender: "F"
}

Exclude<T1, T2>

Omit과 비슷하게 Exclude가 있다. 이는 T1에서 T2를 제외하고 사용하는 방식이다.

둘의 차이점은 Omit은 프로퍼티를 제외하고, Exclude는 타입을 제외한다.

 

T1 타입에서 number 타입을 제외한 것이 T2가 된다.

type T1 = string | number | boolean | object;
type T2 = Exclude<T1, number>;

그래서 T2의 타입은 string | boolean | object 가 된다.

NonNullable<Type>

NonNullable은 이름에서도 알 수 있듯이, null을 제외한 타입을 생성하며 null 뿐만 아니라 undefined로 같이 제외시켜 준다.

 

다음과 같이 코드를 작성했을 때,

type T1 = string | null | undefined | boolean;
type T2 = NonNullable<T1>;

T2는 null과 undefined를 제외한 string | boolean만 남게 된다.

---

☘️참고 자료

[유튜브]TypeScript 강좌 - 코딩앙마

---

☘️마무리 하며...

타입스크립트의 다양한 유틸리티 타입을 알게 되었고 정말 유용하여 이를 실제 프로젝트에서도 사용해보고 싶다!