유틸리티 타입

유틸리티 타입

1. 유틸리티 타입

• 이번엔 유틸리티 타입에 대해 알아봅시다.
• 유틸리티 타입은 기존 타입을 변환하거나 새로운 타입을 생성하기 위해 사용되는 내장 타입입니다.
• 유틸리티 타입은 코드를 더 간결하고 유연하게 작성할 수 있도록 도와줍니다.

 

2. keyof

• keyof는 객체의 속성 이름 집합을 가져옵니다.
• 해당 객체의 모든 속성 이름을 포함하는 유니온 타입이 생성됩니다.
• 다음 코드처럼 사용할 수 있습니다.

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

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

// UserKey의 키 값을 입력해야 함
const uk:UserKey = "id";
// const uk2:UserKey = "tel" (오류발생)

 

3. Partial<T>

• Partial<T>는 제공된 타입 T의 모든 속성을 선택적으로 만듭니다.
• 다음 예제처럼 사용할 수 있습니다.

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

// User을 Partial로 감싸주면, 속성을 선택적으로 사용 가능
let admin: Partial<User> = {
    id: 1,
    name: "Kim",
};

 

4. Required<T>

• Required<T>는 제공된 타입 T의 모든 속성을 필수 속성으로 만듭니다.
• 다음 예제처럼 사용할 수 있습니다.

interface User {
    id: number;
    name: string;
    age?: number; // ?를 붙이면 선택적으로 넣을 수 있게 됨.
}

// User을 Required로 감싸주면, 속성을 필수적으로 사용해야 함.
let admin: Partial<User> = {
    id: 1,
    name: "Kim",
    age: 20,
};

 

5. Readonly<T>

• Readonly<T>는 제공된 타입 T의 모든 속성을 읽기 전용으로 만듭니다.
• 다음 예제처럼 사용할 수 있습니다.

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

// User을 Readonly로 감싸주면, 속성 값을 변경할 수 없음
let admin: Readonly<User> = {
    id: 1,
    name: "Kim",
};

admin.id = 3; // 오류 발생

 

6. Record<K, T>

• Record<K, T>는 키의 타입이 K이고, 값의 타입이 T인 객체를 만듭니다.
• 다음 예제처럼 사용할 수 있습니다.

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

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

 

• 다음과 같이 인터페이스를 활용할 수도 있습니다.

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

function isValid(user: User) {
    const result: Record<keyof User, boolean> = {
        id: user.id > 0,
        name: user.name !== "",
        age: user.age > 0,
    };
    return result;
}

 

7. Pick<T>

• Pick<T, K>는 제공된 타입 T에서 일부 속성만 선택합니다. 속성 이름의 집합은 K라는 제네릭으로 전달됩니다.
• 다음 예제처럼 사용할 수 있습니다.

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

// User을 Pick으로 감싸주면, 일부 속성만 선택함
const admin: Pick<User, "id" | "name"> = {
    id: 0,
    name: "Kim",
};

 

8. Omit<T>

• Omit<T>는 제공된 타입 T에서 일부 속성을 제외합니다. 제외할 속성 이름의 집합은 K라는 제네릭으로 전달됩니다.
• 다음 예제처럼 사용할 수 있습니다.

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

// User을 Omit으로 감싸주면, 일부 속성을 제외함
const admin: Omit<User, "age" | "gender"> = {
    id: 0,
    name: "Kim",
};

 

9. Exclude<T, U>

• Exclude<T, U>는 첫 번째로 제공된 타입 T에서 두 번째로 제공된 타입 U에 할당 가능한 모든 속성을 제외한 타입을 생성합니다.
• 다음 예제처럼 사용할 수 있습니다.

type T = string | number | boolean;

// Exclude로 T 타입의 number와 string을 제거함
// 그래서 U 타입은 boolean만 남음
type U = Exclude<T, number | string>;

 

10. NonNullable<T>

• NonNullable<T>는 제공된 타입 T에서 null과 undefined를 제외한 모든 타입을 가져옵니다.
• 다음 예제처럼 사용할 수 있습니다.

type T1 = string | null | undefined | void;

// NonNullable로 T1 타입의 null과 undefined를 제거함
// 그래서 T2 타입은 string과 void만 남음
type T2 = NonNullable<T1>;

 

11. 정리하며

• 지금까지 유틸리티 타입의 정의와 유형에 대해 알아보았습니다.

※ 코딩앙마님의 유튜브 강좌를 참고하였습니다.