쉽게 시작하는 타입스크립트와 타입스크립트 공식문서에 내용을 정리한 포스트입니다.
타입스크립트 - 유틸리티 타입
유틸리티 타입은 이미 정의되어 있는 타입 구조를 변경하여 재사용하고 싶을 때 사용하는 타입입니다. 타입스크립트 공식문서
1. Pick 타입
특정 타입의 속성을 뽑아서 새로운 타입을 만들어낼 때 사용합니다.
✅문법
1
2
| Pick<대상 타입, "대상 타입 속성 이름">
Pick<대상 타입, "대상 타입 속성 이름1" | "대상 타입 속성 이름2"...>
|
✅예시
1
2
3
4
5
6
| interface Profile {
id: string;
address: string;
}
type ProfileId = Pick<Profile, "id">;
|
위 코드는 id와 address 속성을 갖는 인터페이스에서 id 속성만 뽑아 새로운 타입을 정의한 예입니다. 따라 다음과 같이 ProfileId는 id가 string인 타입이 정의됩니다.
1
2
3
| type ProfileId = {
id: string;
};
|
또한 속성을 여러개 추출도 가능합니다.
1
2
3
4
5
6
7
| interface UserProfile {
id: string;
name: string;
address: string;
}
type User = Pick<UserProfile, "id" | "name">;
|
User은 UserProfile에서 id와 name의 속성을 추출해서 다음과 같이 새로운 타입으로 지정됩니다.
1
2
3
4
| type User = {
id: string;
name: string;
};
|
2. Omit 타입
특정 타입에서 몇 개의 속성을 제외한 나머지 속성으로 새로운 타입을 만들어낼 때 사용합니다.
✅문법
1
2
| Omit<대상 타입, "대상 타입 속성 이름">
Omit<대상 타입, "대상 타입 속성 이름1" | "대상 타입 속성 이름2"...>
|
✅예시
1
2
3
4
5
6
7
| interface UserProfile {
id: string;
name: string;
address: string;
}
type User = Omit<UserProfile, "address">;
|
위 코드는 id와 name, address 속성을 갖는 인터페이스에서 address 속성만 제외하고, 나머지 속성들로 새로운 타입을 정의한 예입니다. User 다음과 같은 타입을 가집니다.
1
2
3
4
| type User = {
id: string;
name: string;
};
|
3. Partial 타입
특정 다입의 모든 속성을 모두 옵션 속성으로 변환한 타입으로 만들어줍니다. HTTP의 PUT처럼 데이터를 수정하는 REST API를 전송할 때 사용되는 타입입니다.
✅문법
✅예시
1
2
3
4
5
6
| interface Todo {
id: number;
text: string;
}
type OptionalTodo = Partial<Todo>;
|
위 코드는 id와 text 속성을 가지는 인터페이스를 만든 후, 모든 속성을 옵션으로 변경하는 Partial 유틸리티 타입을 사용하여 옵셔널한 속성을 가지는 새로운 타입을 정의한 예입니다.
OptionalTodo는 다음과 같은 타입을 가집니다.
1
2
3
4
| type OptionalTodo = {
id?: number;
text?: string;
};
|
✅예시2
1
2
3
4
5
6
7
| interface Todo {
id: number;
text: string;
checked: boolean;
}
function updateTodo(todo: Todo) {}
|
Todo는 할 일을 의미하고, updateTodo는 할일 정보를 서버에게 전달해주는 함수입니다. 서버에서는 정보 변경을 위해 할일의 속성을 다르게 넘겨달라고 할 수도 있습니다.
1
2
3
4
5
6
7
8
| // id 속성만 넘기는 경우
function updateTodo(todo: { id: number }) {}
// id와 title 속성만 넘기는 경우
function updateTodo(todo: { id: number; title: string }) {}
// 할일 데이터 모두 넘기는 경우
function updateTodo(todo: Todo) {}
|
위와 같은 타입은 유틸리티 타입을 사용하여 타입 코드를 재활용하여 정의할 수도 있습니다.
1
2
3
4
5
6
7
8
| // id 속성만 넘기는 경우
function updateTodo(todo: Pick<Todo, "id">) {}
// id와 title 속성만 넘기는 경우
function updateTodo(todo: Omit<Todo, "checked">) {}
// 할일 데이터 모두 넘기는 경우
function updateTodo(todo: Todo) {}
|
어떤 값을 넘길 때 함수의 파라미터 타입을 정확하게 정의할 수도 있지만, Partical 유틸리티 타입을 사용해서 모든 경우를 만족시키는 코드를 작성할 수 있습니다.
1
| function updateTodo(todo: Partial<Todo>);
|
다음과 같이 모든 케이스에 사용이 가능합니다.
1
2
3
| updateTodo({ id: 1 });
updateTodo({ id: 2, title: "todo 1" });
updateTodo({ id: 2, title: "todo 1", checked: false });
|
4. Exclude 타입
유니언 타입을 구성하는 특정 타입을 제외할 때 사용합니다.
✅문법
1
2
| Exclude<대상 유니언 타입, "제거할 타입 이름">
Exclude<대상 유니언 타입, "제거할 타입 이름1","제거할 타입 이름2">
|
✅예시
1
2
| type Languages = "C" | "java" | "typescript" | "react";
type TrueLanguages = Exclude<Languages, "react">;
|
위의 코드는 “C”,”java”,”typescript”,”react” 문자열 타입을을 가지는 유니언 타입으로 가지는 Languages 타입이 정의되어있습니다. TrueLanguages타입은 Languages에서 ‘react’를 제외한 새로운 유니언 타입으로 정의됩니다.
1
| type TrueLanguages = "C" | "java" | "typescript";
|
5. Record 타입
속성 키가 key이고, 속성 값이 type인 객체 유형으로 변환해줍니다. 다른 유형에 속성을 매핑하는데 사용할 수 있습니다.
✅문법
1
| Record<객체 속성의 키로 사용할 타입, 객체 속성의 값으로 사용할 타입>
|
✅예시
1
2
3
4
5
6
7
8
9
10
11
| interface Cat {
age: number;
type: string;
}
type CatName = "coco" | "bori" | "nabi";
const cats: Record<CatName, Cat> = {
coco: { age: 1, type: "russian-blue" },
bori: { age: 10, type: "scottish-fold" },
navi: { age: 5, type: "persian" }
};
|
고양이의 나이와 고양이의 종류를 속성으로 가지는 Cat 인터페이스와, 고양이의 이름을 가지는 CatName 타입이 있습니다. Record 유틸리티 타입을 사용하여 CatName을 키 값으로 가지며, 타입으로는 Cat을 가지는 객체 cats를 만들 수 있습니다.