TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공한다.
유틸리티 타입을 이용하면 타입 변환을 더 쉽게 할 수 있다.
Partial<Type>
Type의 모든 속성을 선택적으로 사용할 수 있다.
주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환한다.
type Partial<T> = {
[P in keyof T]?: T[P];
};
원형은 다음과 같다.
코드를 통해 Partial에 대해 알아보자
type Person = {
name: string;
email: string;
};
const App = () => {
const name: Partial<Person> = {
name: "seongyeon",
};
const email: Partial<Person> = {
email: "ysy2565@naver.com",
};
return <div>study partial</div>;
};
export default App;
위와 같이 Person 타입은 name과 email을 필수 프로퍼티이기 때문에, 안쓰면 오류를 내뱉어야하지만, email과 name의 변수에 각 속성이 하나씩 없어도, 에러 없이 잘 동작할 수 있다.
Required<Type>
Type의 모든 속성들을 필수적으로 만드는 유틸리티 타입이다.
optional의 속성일지라도 필수 프로퍼티로 변경되어진다.
type Required<T> = {
[P in keyof T]-?: T[P];
};
원형은 위와 같이 나와 있다.
코드를 통해 Required에 대해 알아보자
type Person = {
name: string;
email?: string;
};
const App = () => {
const name: Required<Person> = {
name: "seongyeon",
};
//'email' 속성이 '{ name: string; }' 형식에 없지만 'Required<Person>' 형식에서 필수입니다.
return <div>study Required</div>;
};
export default App;
위와 같이 Person의 email프로퍼티는 optional이지만, Required를 주는 순간 email 프로퍼티가 없다고 오류를 발생하는 것을 확인할 수 있다.
Readonly<Type>
Type의 모든 속성을 읽기 전용으로 설정한 타입을 구성한다.
생성된 타입의 모든 속성은 재할당 할 수 없다.
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
원형은 위와 같다.
코드를 통해 Readonly를 알아보자
type Person = {
name: string;
email?: string;
};
const App = () => {
const person: Readonly<Person> = {
name: "Delete inactive users",
};
person.name = "Hello"; // 읽기 전용 속성이므로 'email'에 할당할 수 없습니다.
return <div>study partial</div>;
};
export default App;
위와 같이 person은 Person타입을 Readonly해주었다.
Readonly는 오직 읽기만 가능하고, 수정이 불가능하다.
수정을 하려고하면 위처럼 읽기 전용 속성으로 수정이 불가하다는 오류를 발생하는 것을 확인할 수 있다.
Record<Key, Type>
타입 Type의 속성 집합 Key로 타입을 구성한다.
타입의 속성들을 다른 타입에 매핑시키는데 사용할 수 있다.
type Record<K extends keyof any, T> = {
[P in K]: T;
};
원형은 위와 같다.
type Person = {
name: string;
email?: string;
};
type Key = "home" | "about" | "contact";
const App = () => {
const x: Record<Key, Person> = {
about: { name: "about" },
contact: { name: "contact" },
home: { name: "home" },
};
return <div>study partial</div>;
};
export default App;
Key 타입은 home, about, contact의 키를 허용할 수 있다.
Person 타입의 속성은 name과 email로,
Record는 Key라는 타입의 key를 가지며, person의 속성을 가지는 타입을 갖도록 매핑할 수 있다.
Pick <Type, Key>
Type에서 속성 key의 집합을 선택해 타입을 구성한다.
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
};
type Person = {
name: string;
email: string;
age: number;
};
const App = () => {
type PersonDetail = Pick<Person, "name" | "age">;
const person: PersonDetail = {
name: "seongyeon",
age: 24,
};
return <div>study</div>;
};
export default App;
Type에서 Key에 해당되는 프로퍼티만을 선택해서 사용할 수 있다.
Person의 속성은 name, email, age로 3가지의 속성이지만, Pick을 사용하여 name과 age의 프로퍼티만 사용할 수 있다.
Omit<Type, Key>
Type에서 모든 속성을 선택한 다음 key를 제거한 타입을 구성한다.
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
type Person = {
name: string;
email: string;
age: number;
};
const App = () => {
type PersonDetail = Omit<Person, "email">;
const Person: PersonDetail = {
name: "Clean room",
age: 24,
};
return <div>study</div>;
};
export default App;
Person은 name, email, age의 세가지 프로퍼티를 가지는 타입이지만, Omit을 사용하여 해당 Key를 제거한 후, 남은 프로퍼티만을 사용할 수 있다.
이 외에도 유틸리티 타입은 많이 있다.
이번 포스팅한 유틸리티 타입은, 내가 사용하고 많이 들어봤던 유틸리티 타입이다.
남은 유틸리티 타입에 대해서는 공부하고 다음 포스팅을 작성해야겠다.