인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

오재환님의 프로필 이미지
오재환

작성한 질문수

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

맵드 타입 기반의 유틸리티 타입 2 - Pick, Omit, Record

extends 키워드에서 서브타입과 슈퍼타입 관한 질문입니다.

해결된 질문

작성

·

31

0

안녕하세요.
Pick 유틸리티에서 직접 구현하는 부분 중 extends 키워드에서 혼돈이 생겨 질문드립니다.

// 슈퍼 타입
type A = {
  name: string,
  age: number,
}

// 서브 타입
type B = {
  name: string,
  age: number,
  color: string
}

type make<T, K extends keyof T> = {
  [key in K]: T[key]
}

const testMake: make<B, 'name' | 'age'> = {
  name: '',
  age: 1,
}

위에 예시처럼 type A는 슈퍼타입이고 type B는 서브타입으로 알고 있습니다.

'name' | 'age' extends 'name' | 'age' | 'color'

extends 키워드의 경우 좌항이 우항 값을 포함하는지를 묻는 것인데 여기서 좌항이 서브타입이고 우항이 슈퍼타입이 된다는 것에서 혼돈이 생겼습니다.

type 별칭에서 A, B의 관계와 extends 키워드에서 좌항과 우항의 관계가 다른지 궁금합니다.
질문 끝으로 좋은 강의 만들어주셔서 감사합니다.

답변 1

1

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

결론부터 깔끔하게 말씀드리자면, 객체 타입에서는 프로퍼티가 적은 쪽이 슈퍼 타입이 되지만, 유니언 타입에서는 연산에 참여하는 타입이 많을수록 슈퍼타입이 됩니다.

그 이유는 객체 타입에서의 프로퍼티 정의는 "이 프로퍼티가 꼭 있어야 해" 같은 제약 사항에 가깝지만, 유니언 타입으로 묶인 타입들의 정의는 "이 타입도 될 수 있어" 같은 옵션에 가깝기 때문입니다.

예시로 다음 객체 타입은 a, b, c 프로퍼티가 존재해야 한다는 제약을 만드는 것과 같습니다.

type Obj = { a: string; b: stirng; c: string; }

단면 다음 유니언 타입은 a, b, c 무엇이든 될 수 있어 라는 옵션을 설정하는 것과 같습니다.

type Union = a | b | c

 

따라서 결론적으로 "name" | "age" 보다는 "name" | "age" | "color"가 더 슈퍼타입입니다.

오재환님의 프로필 이미지
오재환

작성한 질문수

질문하기