⭐️ 유틸리티 타입
✅ 유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법이다.
유틸리티 타입을 꼭 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입을 변환할 수 있지만 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있다.
1️⃣ Pick
✅ 픽타입은 특정 타입에서 몇 개의 속성을 선택하여 타입을 정의할 수 있다.
✏️ Example
커머스 사이트에 상품 목록 페이지와 상품 상세 페이지가 있다.
- 목록 페이지에는
id,name,price,brand,stock속성이 사용 - 상세 페이지에는
id,name,price속성만 사용
Product에 대한 속성들은 interface에 담겨있다. 이때 상세페에지에서 동작하는 displayProductDetail의 인자로 id,name,price를 주기 위해 별도의 interface를 생성하였다.
✅ Product interface를 타입으로 정의할 경우 모든 속성들에 대한 값을 주어야하기 때문에 별도의 interface를 주었는데, 이것은 중복코드가 발생하여 코드가 길어지는 단점이 존재한다.
이때 사용할 수 있는 유틸리티타입 중 하나가 Pick 이다.
✅ Pick을 통해 가져올 interface와 사용할 일부를 작성하여 중복을 줄일 수 있다.
2️⃣ Partial
✅ 파셜타입은 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다.
✏️ Example
이번에는 상품의 정보를 업데이트하는 로직을 구현하려고 한다. 하지만, 상품의 name속성만 업데이트하고 싶은데 모든 속성을 다 바꿔야하는 부분을 감안하여 ?:을 사용하여 optional 속성으로 변경해주는 것이다.
✅ 따라서, optional 속성이 담긴 별도의 interface를 작성하게 되는데, 이것 역시 코드가 중복되고 길어진다는 단점이 존재한다.
물론 in과 keyof 을 통해서 Product의 속성들을 UpdateProduct의 optional 속성으로 가져오는 식으로도 구현이 가능하다.
하지만, 이는 Partial과 비슷한 기능동작을 한 것이고 Product 속성에 국한되어 있다.
💡 잠깐) Partial 구조
: 위에서와 같이 실제 Partial의 구조는 제네릭을 사용한 구조이다.
✅ 그래서 Patial타입을 사용하여 특정 타입의 부분 집합을 만족하게 정의하여 선택적으로 속성 업데이트가 가능하다.
3️⃣ Omit
✅ 오밋타입은 특정 타입에서 지정된 속성만 제거한 타입을 정의해 준다.
오밋은 앞서 본 Pick과 반대되는 개념이라고 생각하면 된다.
사용할 일부를 지정하는 것이 아니라 생략할 일부를 지정하는 것이다.
⭐️ 맵드 타입
맵드 타입이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해주는 문법을 의미한다.
마치 자바스크립트 map()API 함수를 타입에 적용한 것과 같은 효과를 가진다.
맵드타입 기본 문법
맵드 타입은 위에서 살펴본 자바스크립트의 map 함수를 타입에 적용했다고 보면 된다.
이를 위해서는 아래와 같은 형태의 문법을 사용해야 한다.
맵드타입 기본 예제
✅ [K in Heroes] 부분은 마치 자바스크립트의 for in 문법과 유사하게 동작한다.
{ Hulk: number } // 첫번째 순회
{ Thor: number } // 두번째 순회
{ Capt: number } // 세번째 순회앞에서 정의한 Heroes 타입의 3개의 문자열을 각각 순회하여 number 타입을 값으로 가지는 객체의 키로 정의된다.
맵드타입 실전 예제
✏️ Example1.
실제로 서비스를 개발할 때는 위와 같은 코드보다는 아래와 같은 코드를 더 많이 사용
✅ 위 코드는 키와 값이 있는 객체를 정의하는 타입을 받아 그 객체의 부분 집합을 만족하는 타입으로 변환해주는 문법이다.
따라서, Subset타입을 적용하면 아래와 같은 객체를 모두 정의할 수 있다.
✏️ Example2.
앞서 본 partial 예시에서 partial와 비슷한 동작을 하는 코드를 봤었는데, 다시 한번 정리해보자.
1️⃣ 사용자 프로필을 조회하는 API 함수가 있다.
2️⃣ 사용자 프로필을 모두 조회하는 것이 아니라면 속성들을 optional하게 설정해야할 것이고, 따라서 optional 속성들로 다시 interface를 생성. (👎 중복 선언 발생)
3️⃣ 중복된 interface의 코드를 아래와 같은 방식으로 재활용 가능
4️⃣ 위의 코드를 더 줄여서 아래와 같이 정의 가능
5️⃣ 위의 코드를 in, keyof를 사용해서 더 줄여서 정의 가능
✅ 그래서 아까 보았던 partial 개념과 비슷한 기능을 한다고 하였었다.
Mapped Type 자세한 글
참조 및 참고하기 좋은 사이트
