[TS] Typescript 자주 사용되는 utility types정리

[TS] 타입스크립트 자주 사용되는 utility 정리

 

@ keyof : 키값을 타입으로 추출합니다.

// keyof : 키값을 타입으로 추출합니다.
interface User{
    id : number;
    name : string;
    age : number;
    gender : "m" | "f";
}

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

const uk:UserKey = "id";
const uk2:UserKey = "ss";  // 에러 : Type '"ss"' is not assignable to type 'keyof User'

@ Partial<T> : 타입을 모두 optional 하게 바꿔줍니다.

// Partial<T> : 타입을 optional 하게 바꿔줍니다.
interface User{
    id : number;
    name : string;
    age : number;
    gender : "m" | "f";
}

// Partial<User>는 아래와 같습니다.
// interface User{
//     id? : number;
//     name? : string;
//     age? : number;
//     gender? : "m" | "f";
// }


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

@ Required<T> : 타입을 모두 필수값으로 바꿔줍니다.

// Required<T> : 타입을 모두 필수값으로 바꿔줍니다.
interface  Admin {
    id :number;
    name : string;
    age?: number;
}
// Required<Admin> 은 아래와 같습니다.
// interface  Admin {
//     id :number;
//     name : string;
//     age: number;
// }

let tom : Required<Admin> = {
    id : 1,
    name : "Bob"
}
// age가 필수로 바뀌었기 때문에 위와 같이 작성하면 에러가 발생합니다.
// 에러를 해결 하기 위해서는 아래와 같이 age를 추가해주어야 합니다.
let jack : Required<Admin> = {
    id : 1,
    name : "Bob",
    age : 10
}

@ Readonly<T> : 타입을 읽기전용으로 바꿔줍니다.

// Readonly<T> : 타입을 읽기전용으로 바꿔줍니다.
interface Guest {
    id : number;
    name : string;
    age?: number;
}

let annie : Readonly<Guest> = {
    id : 1,
    name : "Bob",
}

annie.id = 4; // 에러발생 : Readonly타입일때는 값을 바꿀수 없다.

@ 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 = {
//     1 : "A",
//     2 : "C",
//     3 : "B",
//     4 : "D",
// }

// 위의 주석된 코드와 아래의 코드는 동일하게 동작한다.
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 Student {
    id : number;
    name : string;
    age : number;
}

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

@ Pick<T,K> : 원하는 타입을 뽑아서 사용할 수 있다.

@ Omit<T,K> : 특정 타입을 빼고 사용할 수 있다.

// Pick<T,K> : 원하는 타입을 뽑아서 사용할 수 있다.
const bob : Pick<Teacher, "id" | "name">  = {
    id : 0,
    name : "Bob",
};

// Omik<T,K> : 특정 타입을 빼고 사용할 수 있다
const jane : Omit<Teacher, "age" | "gender"> = {
    id : 0,
    name :"Jane"
}

@ Exclude<T1,T2> : Type T1에서 T2타입과 겹치는 타입을 제외시켜준다.

@ NonNullable<Type> : Type에서 undefined, null을 제외시켜준다.

// Exclude <T1, T2>  : Type T1에서 T2타입과 겹치는 타입을 제외시켜줍니다.
type T1 = string | number | boolean;
type T2 = Exclude <T1, number | string > // T2 는 boolean만 남게 됩니다.

// NonNullable<Type> : Type에서 undefined, null을 제외시켜줍니다.
type T3 = string | null | undefined | void;
type T4 = NonNullable<T1>   // string과 void만 남게 됩니다.