정구리의 우주정복

[TypeScript] Utility Types - Omit, Pick, Exclude 본문

WEB DEVELOP/STUDY

[TypeScript] Utility Types - Omit, Pick, Exclude

Jungry_ 2023. 3. 23. 14:15
반응형

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)
반응형
Comments