[TypeScript] Utility Types - Partial/ Omit / Pick / Exclude / Extract

Partial

interface Profile {
  name: string;
  age: number;
  married: boolean;
}
const cong: Profile = {
  name: "cong",
  age: 27,
  married: false,
};

//Partial<>의 기능: 프로퍼티들을 전부 "?" 옵셔널로 만들어 준다.(필수값이었던 것들을)
const noMarriedCong: Partial<Profile> = {
  name: "cong",
  age: 28,
};

Partial 을 직접 구현해보기 

//Partial을 직접 구현해보기
//맵드 타입스랑 인덱스드 시그니처 사용
type Name = "Human" | "Animal";
//keyof 뒤에는 interface가 올 수 있다. (type alias도 가능, js적으로는 객체 가능)
type P<T> = {
  //어떤 객체가 오든지 그 객체의 키들을 여기에 쓴다.
  //여기서 T는 Profile이다.
  //이 프로퍼티들은 값이 있어도 되고 없어도 되기때문에 ? 로 옵셔널을 걸어준다.
  [key in keyof T]?: T[key];
};

TS에서 변수에 객체의 값을 담을 때에는 .로는 접근이 안되고 index로 접근하여 값을 담을 수 있다.

type Name = Profile['name'] //  을 응용하여 아래와 같이 작성
  // Profile.name 은 접근 안됨 TS에서는 위의 방법 사용

---

🤨Partial 은 마냥 좋은 것은 아니다. 사실상 모든 프로퍼티가 옵셔널이기 때문에 아무 값도 넣지 않아도 정상적으로 실행된다. 하지만 이런 경우는 우리가 바라는 경우가 아닐 것이다.  
-> 이에 대한 대안책으로 Pick 또는 Omit을 사용한다. 

Pick

😋Pick (Profile에서 원하는 프로퍼티만 뽑아오는 유틸리티 타입)

const pickedCong: Pick<Profile, "name" | "age"> = {
  name: "cong",
  age: 28,
};

Omit

😋Omit (Profile에서 원하지않는 프로퍼티를 명시해주면 그것만 제외시켜주는 유틸리티 타입 )

 

const omittedCong: Omit<Profile, "married"> = {
  age: 29,
  name: "cong",
};

-> 두 예제 모두 위에서 Partial에서 하던 동작을 가능하게 해준다. 좀 더 세부적으로 타입을 명시해주기 때문에 Partial 보다 나은 거 같다. 

---

Omit 은 Exclude와 Pick을 혼합해서 만든 유틸리티 타입이기 때문에 직접 구현하고 싶다면 Exclude와 Pick에 관하여 알고 있어야 한다.

lib.es5.d.ts 

Exclude & Extract

-> Exclude는 T타입에서 U를 빼는 것(조건식을 보면 T가 U의 부분 집합이면 버린다(never)고 되어있다.)이며 Extract 는 반대이다.

type Exclude<T, U> = T extends U ? never : T; -> never은 버린다는 의미: never은 쓰이지않으니까(T가 U의 부분집합이면?)
type Extract<T, U> = T extends U ? T : never;

😎제네릭간 extends 이면 3항 연산자를 쓸 수 있다. 타입에는 3항연산자가 들어갈 수 있다.

Exclude & Extract 예시

type Animal = "Cat" | "Dog" | "Human";
type Mammal = Exclude<Animal, "Human">; // Mammal 은 Dog | Cat
type Human = Extract<Animal, "Human">; // Human 은 "Human" -> 즉, Exclude와 반대

• T는 Animal 이고 U는 두번 째 인자인 "Human"이다. 

😎lib.es5.d.ts 명시에서 keyof T 말고 keyof any와 같은 제약 조건은 무슨의미인 지 확인하면 좋다. 틀려보면 에러메세지에서 어떤 의도 인지 알 수 있다. e.g.) S extends keyof any -> S는 string | number | symbol