1. Mapped Types
자바스크립트의 map을 생각하면 쉽다. 가장 대표적인 사용 예시로 두 가지가 있다.
(1) 키 - value 타입 지정
(2) in
자바스크립트의 for in을 생각하면 쉽다. 위 예시의 경우 OnlyBools는 T 타입의 모든 키에 대해 boolean 값을 가지는 타입을 반환한다.
2. Utility Types
이미 타입스크립트에서는 사람들이 자주 사용할 만한 타입들을 많이 만들어 두었다. 대표적인 예시는 다음과 같다.
(1) Required
Required는 주어진 타입의 모든 프로퍼티를 required로 변경해준다. 위의 예시에서 person은 age가 더 이상 optional이 아니기 때문에 에러가 발생한다.
(2) Partial
Partial은 Required와 반대되는 개념이다. Paritial은 주어진 타입의 모든 프로퍼티를 optional로 바꿔줍니다. 따라서 위의 예시에서 person은 어떠한 프로퍼티를 가지고 있지 않아도 에러가 발생하지 않는다. 그러나 Person 타입에 포함되지 않는 프로퍼티를 가지려고 하면 에러가 발생한다. Partial은 활용하는 예시로 update function을 들 수 있다. 물론 갱신된 객체에 타입을 지정하는 방법도 있겠지만 이 방법을 활용하면 보다 안전하게 갱신요소들을 전달할 수 있다.
(3) Pick
Pick을 사용하면 기존의 타입에서 원하는 프로퍼티만 가지고 새로운 타입을 뽑아낼 수 있다. 위의 예시에서 PersonBrief는 name과 age 두 개의 프로퍼티만을 뽑아낸 것이다. 원하는 프로퍼티들은 | 연산자들을 통해 연결하여 두 번째 인자로 넘겨주면 된다. 다만 추출할 프로퍼티들은 원래의 타입에 존재하는 것들이어야만 한다.
(4) Omit
Omit은 Pick의 정 반대 개념이다. 실제로 내부적으로 구현되어 있는 것 역시 Pick과 Exclude를 활용한 것을 볼 수 있다. Omit은 원본 타입에서 주어진 프로퍼티들을 제외한 타입을 만들어준다. 그렇기 때문에 Omit에서는 원본 타입에 포함되어 있지 않은 프로퍼티들 역시 전달할 수 있다.
(5) Readonly
Readonly는 원본 타입의 모든 프로퍼티를 readonly로 바꿔준다. 따라서 위의 예시에서 person의 프로퍼티값을 임의로 변경하려고 하면 에러가 발생한다.
(6) Record
Record는 한 타입을 key로, 다른 타입을 value로 가지는 새로운 타입을 형성하고 싶을 때 사용한다. 위의 예시에서 people 변수는 Name을 키로 가지면서 Person을 value로 가지는 타입을 가진다.
여태까지 Stackoverflow를 통해 확인한 결과로 key와 value의 타입을 지정할 때 Mapped types와 Record type이 함께 사용되는 것 같다. 위의 예시에서 StringBoolObject1 타입과 StringBoolObject2 타입은 동일한 타입에 해당한다. 둘 중 어떠한 것을 사용할 지는 팀의 스타일에 맞춰서 사용하면 될 것으로 생각된다.
'프론트엔드 기본개념 복습 > Typescript' 카테고리의 다른 글
[React, Typescript] Could not find a declaration file for module 'react/jsx-runtime' (0) | 2022.03.03 |
---|---|
[Typescript] String Union Type을 value로 사용하기 (0) | 2022.02.09 |
[Typescript] Type alias vs Interface (0) | 2022.02.02 |
[Typescript] Intersection Type (0) | 2022.01.31 |
[Typescript] never 타입 (0) | 2022.01.31 |