[TypeScript] 유틸리티 타입(Utility Type)이란?

 

오늘은 유틸리티 타입에 대해 알아보겠습니다.

 

 

[ 유틸리티 타입 ]

TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공합니다. 이런 유틸리티들은 전역으로 사용이 가능합니다.

 

[ Partial <T> ]

T의 모든 프로퍼티를 선택적으로 만드는 타입을 구성합니다. 이 유틸리티는 주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환합니다.

 

interface Todo {
    title: string;
    description: string;
}
 
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
    return { ...todo, ...fieldsToUpdate };
}
 
const todo1 = {
    title: 'organize desk',
    description: 'clear clutter',
};
 
const todo2 = updateTodo(todo1, {
    description: 'throw out trash',
});
 
console.log(todo2);

 

 

[ Readonly<T> ]

T의 모든 프로퍼티를 읽기 전용(readonly)으로 설정한 타입을 구성합니다. 즉 생성된 타입의 프로퍼티는 재할당할 수 없습니다.

 

interface Todo {
    title: string;
}
 
const todo: Readonly<Todo> = {
    title: 'Delete inactive users',
};
 
todo.title = 'Hello'; // 오류: 읽기 전용 프로퍼티에 재할당할 수 없음
 

 

이 유틸리티는 런타임에 실패할 할당 표현식을 나타낼 때 유용합니다. (예, frozen 객체의 프로퍼티에 재할당 하려고 하는 경우)

 

※ object.freeze 

function freeze<T>(obj: T): Readonly<T>;

 

 

[ Record<K,T> ]

타입  T 의 프로퍼티의 집합 K  로 타입을 구성합니다. 이 유틸리티는 타입의 프로퍼티들을 다른 타입에 매핑시키는 데 사용될 수 있습니다.

 

interface PageInfo {
    title: string;
}
 
type Page = 'home' | 'about' | 'contact';
 
const x: Record<Page, PageInfo> = {
    about: { title: 'about' },
    contact: { title: 'contact' },
    home: { title: 'home' },
};

 

[ ⭐️ Pick<T,K> ]

T에서 프로퍼티 K의 집합을 선택해 타입을 구성합니다.

 

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}
 
type TodoPreview = Pick<Todo, 'title' | 'completed'>;
 
const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
};

 

[ ⭐️ Omit<T,K> ]

T에서 모든 프로퍼티를 선택한 다음 K를 제거한 타입을 구성합니다.

 

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}
 
type TodoPreview = Omit<Todo, 'description'>;
 
const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
};

 

[ Exclude<T,U> ]

T에서 U에 할당할 수 있는 모든 속성을 제외한 타입을 구성합니다. ( 일종의 차집합 )

 

type T0 = Exclude<"a" | "b" | "c", "a">;  // "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">;  // "c"
type T2 = Exclude<string | number | (() => void), Function>;  // string | number

 

[ Extract<T,U> ]

T에서 U에 할당 할 수 있는 모든 속성을 추출하여 타입을 구성합니다.  ( 일종의 교집합 ) 

 

type T0 = Extract<"a" | "b" | "c", "a" | "f">;  // "a"
type T1 = Extract<string | number | (() => void), Function>;  // () => void

 

[ NonNullable<T,U> ]

T에서 null과 undefined를 제외한 타입을 구성합니다. 

 

type T0 = NonNullable<string | number | undefined>;  // string | number
type T1 = NonNullable<string[] | null | undefined>;  // string[]

 

[ Parameters<T> ]

함수 타입 T의 매개변수 타입들의 튜플 타입을 구성합니다.

 

declare function f1(arg: { a: number, b: string }): void
type T0 = Parameters<() => string>;  // []
type T1 = Parameters<(s: string) => void>;  // [string]
type T2 = Parameters<(<T>(arg: T) => T)>;  // [unknown]
type T4 = Parameters<typeof f1>;  // [{ a: number, b: string }]
type T5 = Parameters<any>;  // unknown[]
type T6 = Parameters<never>;  // never
type T7 = Parameters<string>;  // 오류
type T8 = Parameters<Function>;  // 오류

 

[ ConstructorParameters<T> ]

ConstructorParameters <T> 타입은 생성자 함수 타입의 모든 매개변수 타입을 추출할 수 있게 해 줍니다. 모든 매개변수 타입을 가지는 튜플 타입(T가 함수가 아닌 경우 never)을 생성합니다.

 

type T0 = ConstructorParameters<ErrorConstructor>;  // [(string | undefined)?]
type T1 = ConstructorParameters<FunctionConstructor>;  // string[]
type T2 = ConstructorParameters<RegExpConstructor>;  // [string, (string | undefined)

 

[ ReturnType <T> ]

함수 T의 반환 타입으로 구성된 타입을 만듭니다.

 

declare function f1(): { a: number, b: string }
type T0 = ReturnType<() => string>;  // string
type T1 = ReturnType<(s: string) => void>;  // void
type T2 = ReturnType<(<T>() => T)>;  // {}
type T3 = ReturnType<(<T extends U, U extends number[]>() => T)>;  // number[]
type T4 = ReturnType<typeof f1>;  // { a: number, b: string }
type T5 = ReturnType<any>;  // any
type T6 = ReturnType<never>;  // any
type T7 = ReturnType<string>;  // 오류
type T8 = ReturnType<Function>;  // 오류

 

[ InstanceType <T> ]

생성자 함수 타입 T의 인스턴스 타입으로 구성된 타입을 만듭니다. 

 

class C {
    x = 0;
    y = 0;
}
 
type T0 = InstanceType<typeof C>;  // C
type T1 = InstanceType<any>;  // any
type T2 = InstanceType<never>;  // any
type T3 = InstanceType<string>;  // 오류
type T4 = InstanceType<Function>;  // 오류
 

 

[ Required <T> ]

T의 모든 프로퍼티가 필수로 설정된 타입을 구성합니다. 

 

interface Props {
    a?: number;
    b?: string;
};
 
const obj: Props = { a: 5 }; // 성공
 
const obj2: Required<Props> = { a: 5 }; // 오류: 프로퍼티 'b'가 없습니다
 

 

[ ThisParameterType ]

함수 타입의 this 매개변수의 타입, 혹은 함수 타입에 this 매개변수가 없을 경우 unknown을 추출합니다.

주의: 이 타입은 --strictFunctionTypes가 활성화되었을 때만 올바르게 동작합니다.

 

function toHex(this: Number) {
    return this.toString(16);
}
 
function numberToString(n: ThisParameterType<typeof toHex>) {
    return toHex.apply(n);
}

 

[ OmitThisParameter ]

함수 타입에서 'this' 매개변수를 제거합니다.

주의: 이  타입은 --strictFunctionTypes가 활성화되었을 때만 올바르게 동작합니다. 

 

function toHex(this: Number) {
    return this.toString(16);
}
 
// `bind`의 반환 타입은 이미 `OmitThisParameter`을 사용하고 있습니다, 이는 단지 예제를 위한 것입니다.
const fiveToHex: OmitThisParameter<typeof toHex> = toHex.bind(5);
 
console.log(fiveToHex());

 

 

[ ThisType <T> ]

이 유틸리티는 변형된 타입을 반환하지 않습니다. 대신, 문맥적 this 타입에 표시하는 역할을 합니다. 이 유틸리티를 사용하기 위해선 --noImplictThis 플래그를 사용해야 한다는 것을 유의하세요

 

type ObjectDescriptor<D, M> = {
    data?: D;
    methods?: M & ThisType<D & M>;  // 메서드 안의 'this 타입은 D & M 입니다.
}
 
function makeObject<D, M>(desc: ObjectDescriptor<D, M>): D & M {
    let data: object = desc.data || {};
    let methods: object = desc.methods || {};
    return { ...data, ...methods } as D & M;
}
 
let obj = makeObject({
    data: { x: 0, y: 0 },
    methods: {
        moveBy(dx: number, dy: number) {
            this.x += dx;  // 강하게 타입이 정해진 this
            this.y += dy;  // 강하게 타입이 정해진 this
            return [this.x, this.y];
        }
    }
});
obj.x = 10;
obj.y = 20;
console.log(obj3.moveBy(5, 5));

 

위 예제에서, makeObject의 인자로 넘겨지는 methods 객체는 ThisType <D & M>를 포함한 문맥적 타입을 가지고 있고, 따라서 methods 객체의 메서드 안에 this 타입은 { x:number, y:number } & { moveBy (dx: number, dy:number): number }입니다. method 프로퍼티의 타입이 추론의 대상이며 동시에 메서드 안의 this 타입의 출처인 것을 주목해 주세요 

 

ThisType <T> 마커 인터페이스는 단지 lib.d.ts에 선언된 빈 인터페이스입니다. 객체 리터럴의 문맥접 타입으로 인식되는 것을 넘어, 그 인터페이스는 빈 인터페이스처럼 동작합니다.