유틸리티 타입이란?
TypeScript에서 공통 타입 변환을 용이하게 하기 위해 유틸리티 타입을 제공해 주는 타입으로 꼭 쓰지는 않아도 되지만 적절히 사용하면 유용하게 사용할 수 있습니다.
Partial<T>
T의 모든 프로퍼티를 선택적으로 만드는 타입을 구성합니다.
interface Address {
email: string;
address: string;
}
type MyEmail = Partial<Address>;
const me: MyEmail = {}; // 가능
const you: MyEmail = { email: "noh5524@gmail.com" }; // 가능
const all: MyEmail = { email: "noh5524@gmail.com", address: "secho" }; // 가능
Required<T>
T의 모든 프로퍼티가 필수로 설정된 타입을 구성합니다.
interface Address {
email?: string;
address?: string;
}
type MyEmail = Required<Address>;
const me: MyEmail = {}; // 에러
const you: MyEmail = { email: "noh5524@gmail.com" }; // 에러
const all: MyEmail = { email: "noh5524@gmail.com", address: "secho" }; // 가능
Readonly<T>
T의 모든 프로퍼티를 읽기 전용(readonly)으로 설정한 타입을 구성합니다. 프로퍼티에 재할당할 수 없습니다.
interface Todo {
title: string;
}
const todo: Readonly<Todo> = {
title: 'Delete inactive users',
};
todo.title = 'Hello'; // 에러
Record<K,T>
프로퍼티 key를 타입 K로 정의하고 프로퍼티의 타입을 T로 구성합니다.
interface PageInfo {
title: string;
}
type Page = 'home' | 'about' | 'contact';
const x: Record<Page, PageInfo> = {
about: { title: 'about' },
contact: { title: 'contact' },
home: { title: 'home' },
post: {title:'post'} // 에러
};
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,
description:'4:00PM' // 에러
};
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"
Extract<T,U>
유니온 타입에서 T에서 U에 할당 할 수 있는 모든 속성을 추출하여 타입을 구성합니다.
type T0 = Extract<"a" | "b" | "c", "a" | "f">; // "a"
NonNullable<T>
T에서 null 과 undefined를 제외한 타입을 구성합니다.
type T1 = NonNullable<string[] | null | undefined>; // string[]
ReturnType<T>
T의 리턴타입을 타입으로 구성합니다.
const f1 =():{a:number,b:string }=> {
const a=5;
const b="typescript"
return {a,b}
}
const val:ReturnType<typeof f1>=f1(); //{a:number, b:string}
console.log(val) //5 typescript
상황에 따라 적절하게 사용한다면 많이 유용할 것 같습니다.
아래 참고사이트에서 더 많은 유틸리티 타입을 확인할 수 있습니다.