Front-end/TypeScript
[TypeScript] 유틸리티 타입 Utility Types
hyebin Lee
2022. 3. 6. 21:54
Utility Types
//keyof
interface User {
id: number;
name: string;
age: number;
gender: "m" | "f";
}
type UserKey = keyof User; //'id' | 'name' | 'age' | 'gender'
const uk1: UserKey = ""; //오류
const uk2: UserKey = "age";
Partial<T>
//Partial<T>
//Partial은 프로퍼티를 모두 옵션으로 바꿔준다. 따라서 일부만 사용할 수 있다.
interface User {
id: number;
name: string;
age: number;
gender: "m" | "f";
}
let admin:Partial<User> = { //Partial로 감싸준다.
id:1,
name:"bob"
}
/* 이 모습과 같다.
interface User {
id?: number;
name?: string;
age?: number;
gender?: "m" | "f";
}
*/
Required<T>
//Required<T>
//모든 프로퍼티를 필수로 바꿔준다.
interface User {
id: number;
name: string;
age?: number;
}
let admin:Required<User> = { //이때 오류가 발생하는데 age도 필수 프로퍼티가 되기 때문
id:1,
name:"bob"
}
Readonly<T>
//Readonly<T>
//모든 프로퍼티를 필수로 바꿔준다.
interface User {
id: number;
name: string;
age?: number;
}
let admin:Readonly<User> = {
id:1,
name:"bob"
}
admin.id = 4; //처음에 할당만 가능하고 수정은 불가
Recod<K,T>
1. K는 key, T는 type
//1학년부터 4학년 점수를 입력받음
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: "D",
4: "A",
};
2. 키값, 타입값을 넣어준다.
//1학년부터 4학년 점수를 입력받음
const score: Record<"1" | "2" | "3" | "4", "A" | "B" | "C" | "D"> = {
1: "A",
2: "C",
3: "D",
4: "A",
};
3. 학년과 성적부분을 타입으로 분리
type Grade = "1" | "2" | "3" | "4"
type Score = "A" | "B" | "C" | "D"
const score: Record<Grade,Score> = {
//키값, 타입값을 넣어준다.
1: "A",
2: "C",
3: "D",
4: "A",
};
Recod<K,T> 응용 예제
interface User {
id: number;
name: string;
age: number;
}
//적절한 값이 입력되어있는지 체크하는 함수
function isValid(user: User) {
const result: Record<keyof User, boolean> = {
//id,nane,age는 유저의 키가 된다. 따라서 keyof User
id: user.id > 0,
name: user.name !== "",
age: user.age > 0,
};
return result;
}
Pick<K,T>
T타입에서 K프로퍼티만 골라서 사용
interface User {
id: number;
name: string;
age: number;
gender: "M" | "F";
}
const admin: Pick<User, "id" | "name"> = {
//User에서 id와 name만 가지고 와서 사용 가능
id: 0,
name: "bob",
};
Omit<K,T>
T타입에서 K프로퍼티만 생략하고 사용
interface User {
id: number;
name: string;
age: number;
gender: "M" | "F";
}
const admin: Omit<User, "age" | "gender"> = {
//age에서 gender을 생략하고 사용가능
id: 0,
name: "bob",
};
Exclude<T1,T2>
T1 타입에서 T2타입과 겹치는 타입 제거 Omit과 다른점은 Omit은 프로퍼티를 제거하고, Exclude는 타입으로 제거한다.
type T1 = string | number | boolean;
type T2 = Exclude<T1, number | string>; //T1에서 number,string 을 제외, boolean 남음
NonNullable<Type>
null을 제외한 타입 생성, undefined도 제외
type T1 = string | null | undefined | void;
type T2 = NonNullable<T1>; //void만 남음