Frontend/TypeScript

[TypeScript] 유틸리티 타입

okojin 2024. 8. 13. 15:56

keyof

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

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

const uk:UserKey = "name"; // User의 key 중 하나 입력가

Partial

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

// Partial로 감싸면 인터페이스의 일부만 사용해도됨
let admin: Partial<User> = {
    id: 1,
    name: "Bob",
};

Required

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

// Required로 감싸면 옵셔널 프로퍼티도 필수가 돼서 에러남
let admin: Required<T> = {
    id: 1,
    name: "Bob",
};

Readonly

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

let admin: Readonly<User> = {
    id: 1,
    name: "Bob",
};
// Readonly로 감싸면 선언만 가능하고 수정 불가능
admin.id = 4;

Record<K, T>

  • 객체의 property와 value의 값을 정의
// 이렇게 하나하나 넣으면 복잡하니
const score: Record<"1" | "2" | "3" | "4", "A" | "B" | "C" | "D"> = {
    1: "A",
    2: "B",
    3: "C",
    4: "D",
};

// 이렇게 사용해준다.
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;
}

Pick<T, K>

  • T의 인터페이스에서 K만 사용하겠다고 선언
interface User {
    id: number;
    name: string;
    age: number;
    gender: "M" | "W";
}

const admin: Pick<User, "id" | "name"> = {
  id: 0,
    name: "Bob",
};

Omit<T, K>

  • 특정 프로퍼티를 생략하고 사용가능
interface User {
    id: number;
    name: string;
    age: number;
    gender: "M" | "W";
}

const admin: Omit<User, "age" | "gender"> = {
  id: 0,
    name: "Bob",
};

Exclude<T1, T2>

  • T1에서 T2를 제거하고 사용
type T1 = string | number | boolean;
type T2 = Exclude<T1, number | string>; // boolean

NonNullable

  • Type의 null과 undefined를 제외하고 사용
type T1 = string | null | undefined | void;
type T2 = NumNullable<T1>; // string | void