키모스토리

#7 유틸리티 타입 Utility Types 본문

Web Devlopment/TypeScript

#7 유틸리티 타입 Utility Types

키모형 2025. 3. 27. 00:08
반응형

keyof  :  인터페이스 멤버를 key값으로 사용가능

Partial  : 인터페이스 멤버를 모두 optional 하게 사용

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

// keyof  인터페이스의 멤버변수를 key 값으로 사용. 
type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender'
const uk:UserKey = "id"; 
console.log(uk);


// Partial<T>
let admin: Partial<User> = {
    id:1,
    name:"Bob",
};

// Patial은 아래와 같이 모든 멤버를 optional 로 선언한것과 같다.
// interface User {
//     id?: number;
//     name?: string;
//     age?: number;
//     gender?: "m" | "f";
// }

console.log(admin);

 

Required : 인터페이스 멤버를 모두 필수 항목으로

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

// Required<T> 모든 멤버를 필수항목으로
let admin: Required<User> = {
    id:1,
    name:"Bob",
    age: 30,
};

 

Readonly : 객체를 읽기 전용으로 만듬. 

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

// Readonly<T> 모든 멤버를 필수항목으로
let admin: Readonly<User> = {
    id:1,
    name:"Bob",
    age: 30,
};

admin.id=4; // 수정안됨

 

Record <K, T>

// Record<K, T>

// 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: 'C',
//     3: 'B',
//     4: 'A',
// };

// 위 인터페이스를 이용한 방법을 Record로 변경
// const score: Record<"1"|"2"|"3"|"4","A"|"B"|"C"|"D"> = {
//     1: "A",
//     2: "C",
//     3: "B",
//     4: "D",
// }

// 위 방식에서 타입분리
type Grade = "1"|"2"|"3"|"4";
type Score = "A"|"B"|"C"|"D"
const score: Record<Grade, Score> = {
    1: "A",
    2: "C",
    3: "B",
    4: "D",
}

 

// Record<K, T>

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<K, T>, 키에서 해당값만 허용

- Omit<T,K> , 키에서 해당값 제외 시키기

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

// Pick<K, T>, 키에서 해당값만 허용
const admin: Pick<User, 'id' | 'name'> = {
    id: 0,
    name: "Bob",
    // age: 20,     
    // gender: "m", 
}


// Omit<T,K> , 키에서 해당값 제외 시키기
const user:  Omit<User, 'id' | 'name'> = {
    // id:10,       // 오류
    // name: "Bob", //
    age: 0,
    gender: "m",
}
기타
// Exclude<T1, T2>
type T1 = string | number | boolean;
type T2 = Exclude<T1, number | string>; // boolean 만 남음

// NonNullable<Type>
type T3 = string | null | undefined | void;
type T4 = NonNullable<T3>;
반응형

'Web Devlopment > TypeScript' 카테고리의 다른 글

#6 Generic  (0) 2025.03.26
#5 클래스 (class)  (0) 2025.03.26
#4 리터럴, 유니온/교차 타입  (0) 2025.03.26
#3 함수 (function)  (0) 2025.03.26
#2 인터페이스(interface)  (0) 2025.03.26