[typescript] 유틸리티 타입

이 내용은 코드앙마의 타입스크립트 강좌를 정리해놓은 자료이다.

---

keyof

키 값을 유니온 형태로 받을 수 있다.

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

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

//const uk: UserKey = ""; // 오류
const uk: UserKey = "id"; // 정상

위에서 keyof User를 하면 'id' | 'name' | 'age' | 'gender와 동일하다.

Partial<T>

partial은 프로퍼티를 모두 optional로 바꿔준다.

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

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

이렇게 하면 오류가 난다. User의 속성 중 age와 gender가 없다는 오류이다.

이럴때는 Partial로 감싸주면 된다.

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

이 모습은 아래와 같다.

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

Required<T>

Required는 모든 프로퍼티를 필수로 바꿔준다.

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

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

위에서 age는 optional인데 Required를 넣으면 오류가 발생한다. age도 필수 프로퍼티가 되어버리는 것이다.

Readonly<T>

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

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

admin.id = 4;

Readonly를 사용하면 최초 생성은 가능하지만 수정은 불가능하게 된다.

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 : 'D'
}

Score 인터페이스를 정의하고 1,2,3,4의 score를 지정한다.

이를 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의 예제를 하나 더 보면

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'
}

User에서 id와 name만 가져와서 사용할 수 있다.

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를 제외하고 사용하는 방식이다.

Omit과 다른점은 프로퍼티를 제거하는 방식이고 Exclude는 타입을 제외하는 방식이다.

type T1 = string | number | boolean;
type T2 = Exclude<T1, number | string>; // boolean만 사용 가능하다.

NonNullable<Type>

null을 제외한 타입을 생성한다. null만 빼는 것은 아니고 undefined도 함께 제거한다.

type T1 = string | null | undefined | void;
type T2 = NonNullable<T1>; // string과 void만 남는다.

위에서 T2는 string과 void만 사용할 수 있다.