※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다.
어느 데이터 타입에서 다른 데이터 타입으로 변환을 쉽게 해주는 것을 유틸리티 타입이라고 한다. 타입 스크립트에는 Partial이 외에 몇 가지 유틸리티 타입을 제공하고 있다.
Partial타입
Partial 타입은 오브젝트를 변환하는 타입 중 하나로 Partial<T> 형태로 사용하며 T의 모든 속성을 옵셔널 타입으로 만들어준다.
type Human1 = Partial<{
name: string;
age: number;
}>
const human1_1: Human1 = { name: "nao", age: 18 }
const human1_2: Human1 = { name: "nao" }
Human1에는 옵셔널 속성을 선언하기 위한 "?"가 없지만, 변수를 정의할 때 일부의 속성이 없어도 컴파일에러가 발생하지 않는다.
Require타입
Partial 타입과 완전히 반대되는 타입이다. Require<T>로 T에 부여된 속성을 모두 지정하지 않으면 컴파일 에러가 발생한다.
type OriginalHuman = {
name?: string;
age?: number;
}
type Human2 = Required<OriginalHuman>
// 에러
const human2: Human2 = { name: "nao" }
원래 오브젝트 타입은 모든 속성이 선택 사항으로 되어 있지만. Required로 전달함으로써 모든 속성을 지정하지 않으면 에러가 발생하게 한 코드이다.
Readonly타입
T에 부여된 오브젝트 타입 모든 속성을 읽기 전용(readonly)으로 만들 수 있다.
type Human3 = Readonly<{
name: string;
age: number;
}>
const human3: Human3 = { name: "nao", age: 18}
// 에러
human3.name = "Taro"
Human3에서 name 속성에 다른 값을 재할당하려고 하면 "읽기 전용 속성이므로 'name'에 대입할 수 없습니다"와 같은 에러가 발생한다.
Pick타입
Pick<T, K>으로 T이라는 오브젝트 타입에 K를 지정한 이름의 속성만을 가진 새로운 형태가 만들어진다.
type Human4 = Pick<{
name: string;
age: number;
}, "age">
const human4_1: Human4 = { age: 30 }
// 에러
const human4_2: Human4 = { name: "nao" }
Human4를 정의할 때, age 속성만을 지정하고 있기 때문에 human4_2와 같이 지정하지 않은 다른 변수를 선언하면 에러가 발생한다.
Omit타입
Pick타입과 반대이다. Omit<T, K>로 T이라는 오브젝트타입중 K로 지정한 속성을 제외한 새로은 오브젝트 타입이 만들어진다.
type Human5 = Omit<{
name: string;
age: number;
}, "age">
const human5_1: Human5 = { name: "nao" }
// 에러
const human5_2: Human5 = { age: 30 }
Human5에서 age 속성을 제외했으므로, human5_2의 경우 에러가 발생한다.
Extract타입
Extract<T, U>로 T의 구성요소 중 U의 타입인 속성만을 추출하여 반환한다. T는 보통 유니온 타입니다.
type Chaos = "nao" | 30 | true | null | undefined
type chaos_1 = Extract<Chaos, string>
속성중 string 타입인 "nao"만이 출력된다.
Exclude타입
Extract타입과 갑내이다. Exclude<T, U>로 T의 구성요소중 U로 지정한 타입외의 것을 모두 반환해준다.
type Chaos = "nao" | 30 | true | null | undefined
type chaos_2 = Exclude<Chaos, string>
"nao"이외의 속성을 가진 변수가 된다.
NonNullable타입
Exclude<T, null | undefined> 와 같은 의미다.
type Chaos = "nao" | 30 | true | null | undefined
type chaos_3 = NonNullable<Chaos>
Record타입
키가 K, 속성이 T인 오브젝트 타입을 만든다.
type FruitNumbers_2 = Record< "apple" | "orange" | "strawberry", number >;
const fruitPrices_2: FruitNumbers_2 = {
apple: 120,
orange: 80,
strawberry: 50
}
참고자료
'IT > 언어' 카테고리의 다른 글
[Vue3] Composition API Best Practices (0) | 2023.10.03 |
---|---|
[TypeScript] (React의 사용없이)실전적인 기술 모음 (1) | 2023.09.21 |
[TypeScript] 즉시 실행 함수 (0) | 2023.09.18 |
[Vue3] computed/watch/watchEffect (0) | 2023.09.17 |
[Vue3] Provide/Inject 사용법 (0) | 2023.09.14 |