TypeScript | 유틸리티 타입 (Utility Types)

Kate Jung·2022년 3월 10일
0

TypeScript

목록 보기
10/10
post-thumbnail

📌 keyof

key값들을 Union형태로 받을 수 있음.

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

type UserKey = keyof User; // "id" | "name" | "age" | "gender"
// keyof를 통해 User interface의 key값들을 Union 형태로 받음

const uk1:UserKey = ""; // [에러 발생]
const uk2:UserKey = "id"; // [에러 해결] User interface의 key값 중 하나 입력

📌 Partial<T>

모든 프로퍼티 → 옵셔널로 전환 (즉, 일부만 사용 가능)

  • 없는 프로퍼티 사용 시 에러 발생
interface User {
    id: number;
    name: string;
    age: number;
    gender: "m" | "f";
}

// [에러 발생] 이유: age, gender 無
let admin1: User = { // 👈
    id: 1,
    name: "Bob",
};

// [에러 無]
let admin2: Partial<User> = { // 👈
    id: 1,
    name: "Bob",
};
/*
- 아래와 같음:
interface User {
    id?: number;
    name?: string;
    age?: number;
    gender?: "m" | "f";
} */

📌 Required<T>

모든 프로퍼티 → 필수로 전환

interface User {
    id: number;
    name: string;
    age?: number; // 👈 옵션
}

let admin: Required<User> = { // 👈
    id: 1,
    name: "Bob",
    age: 30, // 👈 Required<T>를 넣어서 age도 필수. 안 넣으면 에러 발생
}

📌 Readonly<T>

모든 프로퍼티 → 읽기 전용으로 전환

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

// [기존] 처음 할당 후, 수정 가능
let admin1: User = {
    id: 1,
    name: "Bob",
};
admin1.id = 4;

// [적용] 처음 할당 후, 수정 불가
let admin2: Readonly<User> = {
    id: 1,
    name: "Bob",
};
admin2.id = 4; // ⛔ [id 에러 발생] 

📌 Record<K, T>

K: key
T: type

🔹 예시 1

[점수 객체 제작] 1~4학년의 점수 입력

  1. 적용 전

    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: "B",
        3: "C",
        4: "D",
    }
  2. 리팩토링 1 | Record<K, T> 활용

    Record<키 값, 타입 값>Record<학년, 성적>

    const score: Record<'1'| '2' | '3' | '4', 'A' | 'B' | 'C' | 'D'> = {
        1: "A",
        2: "C",
        3: "B",
        4: "D",
    }
  3. 리팩토링 2 | 타입(학년, 성적) 분리

    가독성 ↑

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

🔹 예시 2

적절한 값이 입력되었는지 체크하는 함수 제작

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
}
/*
[함수 기능]
user를 받아서 결과 객체(result) 제작 -> 조건 체크 -> 결과 리턴

[result 타입]
keyof User: result의 key는 User의 key
boolean: type은 모두 boolean */

📌 Pick<T, K>

T타입에서 K프로퍼티만 골라서(Pick) 사용.

  • Omit<T, K> 반대
interface User {
    id: number;
    name: string;
    age: number;
    gender: "M" | "W"
}

const admin: Pick<User, "id" | "name"> = { // 👈 User에서 "id"와 "name"만 사용
    id: 0,
    name: "Bob"
}

📌 Omit<T, K>

T타입에서 K프로퍼티만 생략(Omit)

  • Pick<T, K> 반대
interface User {
    id: number;
    name: string;
    age: number;
    gender: "M" | "W"
}

const admin: Omit<User, "age" | "gender"> = { // 👈 User에서 age & gender 제외한 나머지 사용
    id: 0,
    name: "Bob"
}

📌 Exclude<T1, T2>

T1 타입들 중 T2타입과 겹치는 타입 제외

  • Omit과 차이

    • Omit: 프로퍼티들 제거.
    • Exclude: Type으로 제거.
// ex 1)
type T1 = string | number;
type T2 = Exclude<T1, number> // string. (T1에서 number를 제외)

// ex 2)
type T3 = string | number | boolean;
type T4 = Exclude<T3, number | string> // boolean

📌 NonNullable<Type>

null & undefined 제외한 타입 생성

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

참고

  • 코딩앙마_타입스크립트
profile
복습 목적 블로그 입니다.

0개의 댓글