정구리의 우주정복
[TypeScript] Utility Types - Omit, Pick, Exclude 본문
반응형
Omit : 객체 형태의 타입에서 특정한 프로퍼티들을 제외 시켜줌 ( 객체 에서 프로퍼티 를 제외 )
Pick : 객체 형태의 타입에서 특정한 프로퍼티들을 선택 해줌 ( 객체에서 프로퍼티 를 선택)
Exclude : 여러개의 타입이 함께 존재하는 유니언 타입에서 특정 타입을 제거해준다 ( 타입 에서 타입 을 제외 )
Omit
특성 속성만 제거한 타입을 정의할 수 있다 (Pick 의 반대)
// interface 생성
interface Food {
hambuger : string;
chicken : string;
pizza : string;
hotdog : string;
}
// Food 에서 hambuger 를 제외해준다
type WithoutFood = Omit<Food,'hambuger'>
// hambuger 을 제외한 나머지를 사용할 수 있다
const withoutFood : WithoutFood = {
chicken:'a',
pizza:'b,
hotdog:'c'
}
// error : 제외한 hambuger 를 사용하려 하면 에러가 발생한다
const withoutFood : WithoutFood = {
hambuger:'d,
chicken:'a',
pizza:'b',
hotdog:'c',
}
// 유니언 타입으로도 사용이 가능하다.
type withoutFood = Omit<Food, 'hambuger'|'chicken'>
Pick
특정 속성만 사용한 타입을 정의할 수 있다 (Omit 의 반대)
type WithoutFood = Pick<Food, 'hambuger'>
// Food 에서 선택한 hambuger 만 사용이 가능하다
const withoutFood : WithoutFood = {
hambuger: 'ha'
}
// error : 선택한 hambuger 이외의 것을 사용하려 하면 에러가 난다
const withoutFood : WithoutFood = {
humbuger:'ha',
chicken:'haha'
}
// 위의 Omit과 동일한 동작을 하는 Pick 만들기
type WithoutFood = Pick<Food, 'chicken'|'pizza'|'hambuger'>
Exclude
여러개의 타입이 함께 존재하는 union type 에서 특정 타입을 제외한 타입을 정의할 수 있다.
// union type 선언
type Alphabet = 'a'|'b'|'c'|'d'
// a 와 b 라는 타입을 제거한다
type ExcludeAlphabet = Exclude<Alphabet,'a'|'b'>
// work
const c : ExcludeAlphabet = 'c'
// error
const a : ExcludeAlphabet = 'a'
exclude 의 활용법
enum 에서 특정 타입을 제외하고 싶을 때 Exclude 를 사용하면 된다 (Omit 이나 Pick 을 사용하면 제외되지 않는다)
// enum 을 선언
enum Languages {
KOREAN='kr',
ENGLISH='en',
JAPANESE='jp'
}
// Exclude 를 사용해서 제외할 수 있다.
type WithoutJapan = Exclude<Languages,Languages.JAPANESE>
// work
const kor: WithoutJapan = Languages.KOREAN;
// error : 제외한 JAPANESE 를 불러오려해 에러가 난다
const eng: WithoutJapan = Languages.JAPANESE;
// error : Omit 을 사용하면 제외 되지 않는다
type WithoutKorean = Omit<Languages,Languages.KOREAN>
// 실제 제외되지 않았기 때문에 정상 동작한다
const withoutKor: WithoutKorean = Languages.KOREAN;
console.log(withoutKor)
반응형
'WEB DEVELOP > STUDY' 카테고리의 다른 글
[WEB] div 를 input 태그처럼 사용하기 (div contenteditable, contenteditable 커서 맨뒤로) (0) | 2023.03.21 |
---|---|
[Vue.js] 맥에 vue.js 설치하기, 권한 오류 해결하기 (2) | 2023.02.20 |
[TypeScript] 내가 보려고 끄적 (0) | 2023.02.20 |
[PHP] for문 사용법 , count() 배열 길이 구하기,배열 요소 출력하기 (0) | 2020.07.11 |
Javascript 자주 쓰는 문서 객체 정리 (0) | 2019.03.06 |
Comments