타입스크립트 - 타입스크립트 - untility, keyof
유틸리티 타입
partial
특정 타입의 부분 집합을 만족하는 타입을 정의
1
2
3
4
5
6
7
8
9
interface Address {
email: string;
address: string;
}
const me = {};
const you: Partial<Address> = { email: "abc@dcfg.com" };
const all: Address = { email: "abc@dcfg.com", address: "seoul" };
PICK
interface 안에서 특정 타입만 선택
1
2
3
4
5
6
7
8
9
10
interface Todo {
title: string;
description: string;
completed: boolean;
}
type TodoPreview = Pick<Todo, "title" | "completed">;
const todo: TodoPreview = {
title: "clean room",
completed: false
};
Omit
interface 안에서 특정 타입만 제거
1
2
3
4
5
6
7
8
9
10
11
12
interface TodoOmit {
title: string;
description: string;
completed: boolean;
createdAt: number;
}
type TodoPreviewOmit = Omit<TodoOmit, "description">;
const TodoOmit: TodoPreviewOmit = {
title: "clean room",
completed: false,
createdAt: 12341212
};
Exclude
일반 union 유형을 전달한 다음 두번째 인수에서 제거할 타입을 지정
1
2
3
4
5
6
7
8
9
10
type myUnionType = "apple" | "lemon" | "orange" | "berry";
let lemon: myUnionType = "lemon";
// lemon type = "apple" | "lemon" | "orange" | "berry";
let noLemonsPlease: Exclude<myUnionType, "lemon"> = "apple";
// noLemonsPlease type = 'apple' | 'orange' | 'berry'
let noAppleOrOrange: Exclude<myUnionType, "apple" | "orange"> = "lemon";
// noAppleOrOrange type = 'lemon' | 'berry'
Required
원래 유형이 일부 속성을 선택 사항으로 정의한 경우데도 객체에 required 속성이 있는지 확인해야 하는 경우가 있음
1
2
3
4
5
6
7
8
9
10
11
12
13
type User = {
firstName: string;
lastName?: string;
};
let secondUser: User = {
firstName: "Hyemin"
};
// ERROR!!!
let secondUser: Required<User> = {
firstName: "Hyemin"
};
User 타입에서 lastName은 있을 수도 있고, 없을 수도 있지만 Required
를 사용한다면 User타입의 모든 속성이 충족되어야 함
Record<Keys,Type>
속성 키가 Keys고 속성 값이 Type인 객체 타입을 구성
타입의 속성을 다른 타입에 매핑하는데 사용할 수 있음
1
2
3
4
5
6
7
8
9
10
11
interface CatInfo {
age: number;
breed: string;
}
type CatName = "miffy" | "moris" | "boris";
const cats: Record<CatName, CatInfo> = {
miffy: { age: 10, breed: "persian" },
moris: { age: 5, breed: "maine coon" },
boris: { age: 2, breed: "british shorthair" }
};
cats의 key들은 CatName의 타입들이고, value값은 CatInfo의 타입들임
ReturnType<T>
함수의 T의 반환 타입으로 구성된 타입
1
2
3
4
5
6
7
8
9
10
11
type T0 = ReturnType<() => string>;
type T1 = ReturnType<() => void>;
function fn(str: string) {
return str;
}
const a: ReturnType<typeof fn> = fn("hi"); // string
// ERROR!!!
// str의 타입이 string이 아닌 boolean값이기 때문에
const b: ReturnType<typeof fn> = fn(false);
keyof
타입에서 key를 추출할 때 사용
예시1
1
2
3
4
5
6
7
8
interface IUser {
name: string;
age: number;
address: string;
}
type UserKeys = keyof IUser;
// UserKeys type = 'name | 'age' | 'address'
예시2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface IUser {
name: string;
age: number;
address: string;
}
const user = {
name: "hyem",
age: 30,
address: "seoul"
};
type UserKeys = keyof typeof user;
// user 타입들의 key
// UserKeys type = 'name | 'age' | 'address'
예시3
1
2
3
4
5
6
7
enum UserRole {
admin,
manager
}
type UserRoleKeys = keyof typeof UserRole;
// UserRoleKeys type = "admin" | "manager"
This post is licensed under CC BY 4.0 by the author.