⌨️서론
이번에는 Utility Type과 관련되어 필자가 배웠던 부분을 정리해보고자 한다. 5부로 마지막을 짓고 이제 프로젝트와 관련된 부분을 정리해보고자 한다. 🙇♂️
지난번 회고에서도 적었듯이 최대한 정확한 정보로 작성하고는 있지만 불가피하게 잘못 된 정보를 적을 수도 있다는 점 미리 양해바란다.
Utility Types
TypeScript는 일반적인 유형 변환을 용이하게 하는 여러 유틸리티 유형을 제공하며, 이 유틸리티는 전역적으로 사용할 수 있다. 이 중 몇 개만 정리할 것이다.
Partial<T>
특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 바꿔주는 타입
//예시
interface Post {
title : string;
tags : string[];
content : string;
thumnailURL ?: string;
}
const draft : Partial<Post> => {
title : "제목은 나중에",
content : "임시저장용",
} // 원래는 tags도 담아야 하지만 선택적 프로퍼티로 바뀌어 안 넣어도 된다.Required<T>
특정 객체 타입의 모든 프로퍼티를 필수 프로퍼티로 바꿔주는 타입
//예시
interface Post {
title : string;
tags : string[];
content : string;
thumnailURL ?: string;
}
const draft : Required<Post> => {
title : "제목은 나중에",
content : "임시저장용",
tags : ["hello"],
thumnailURL : "",
} /* thrumnailURL이 선택적 프로퍼티였지만 Required 유틸리티 타입을 쓰게 되면,
필수 프로퍼티로 되어 넣지 않으면 에러를 일으킨다.*/Readonly<T>
readonly의 기능과 똑같고 모든 프로퍼티가 읽기전용으로 된다. 수정이 불가능하다.
Pick<T, K>
객체 타입으로부터 특정 프로퍼티만 뽑아내는 타입
//예시
interface Post {
title : string;
tags : string[];
content : string;
thumnailURL ?: string;
}
const draft : Pick<Post, “title | content”> => {
title : "제목은 나중에",
content : "임시저장용",
} //원래는 tags를 필수로 넣어야 되지만 이럴경우 title과 content만 쓸 수 있다.Omit<T, K>
객체 타입으로부터 특정 프로퍼티를 제거하는 타입
Omit<Post, “title”> -> title이라는 프로퍼티를 안 넣겠다라는 의미가 된다.
Record<T, K>
// 이럴 경우 이름만 다르고 프로퍼티가 같은 객체가 담겨있기 때문에 비효율적인 모습을 보인다.
type Thumbnail = {
large : {
url : string;
};
medium : {
url : string;
}
small : {
url : string;
}
}
//Record활용하기
type Thumbnail = Record<“large” | “medium” | ”small”, {url : string} > //앞부분은 key 뒷부분은 value를 담게된다.Exclude<T, U>
T에서 U를 제거하는 타입
type T0 = Exclude<"a" | "b" | "c", "a">;
//type T0 = "b" | "c"
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; x: number }
| { kind: "triangle"; x: number; y: number };
type T3 = Exclude<Shape, { kind: "circle" }>
/*
type T3 = {
kind: "square";
x: number;
} | {
kind: "triangle";
x: number;
y: number;
}
*/
‼️Extract<T, U>의 경우는 Exclude와 반대로 T에서 U에 해당하는 타입을 추출한다.‼️
type T0 = Extract<"a" | "b" | "c", "a" | "f">; //type T0 = "a" //위의 type Shape를 응용하면 type T2 = Extract<Shape, { kind: "circle" }> /* type T2 = { kind: "circle"; radius: number; } */
ReturnType<T>
함수의 반환값 타입을 추출하는 타입
function funcA(){return “hello”}
type ReturnA = ReturnType<typeof funcA>;⭐️(...args: any)의 의미⭐️
…arg <- 매개변수 몇개가 들어와도 상관이 없는 것을 의미하며
:any는 저 매개변수들이 모두 any타입이다~라는 뜻
📚참고문헌
https://www.inflearn.com/course/한입-크기-타입스크립트/dashboard
https://www.typescriptlang.org/docs/handbook/utility-types.html#handbook-content
