오늘은 TypeScript의 유틸리티 타입에 대해서 알아보겠습니다!
참고한 강좌 영상은 아래 첨부합니다 :)
목차
0. keyof
유저 인터페이스의 키 값중 하나를 불러올 때 유용하게 사용할 수 있는 keyof 키워드입니다.
이 키워드를 이용하면 유니온 타입을 사용한 것과 동일한 결과를 변수에 넣을 수 있습니다.
아래와 같이 없는 값을 넣으면 에러가 납니다!
1. partial<T>
partial은 프로퍼티를 모두 Optional(선택적인) 값으로 바꿔줍니다.
위와 같이 인터페이스에 선언한 값들 중 일부 값만 넣으면 에러가 나겠죠?
이럴 때 partial을 사용하면 일부만 사용해서 선언할 수 있게 됩니다.
주석으로 처리된 부분처럼 인터페이스를 바꿔서 사용할 수 있는 것이죠!
아무리 partial이라도 선언하지 않은 키값을 넣을 수는 없습니다.
2. required<T>
required는 반대로 모든 값들을 필수 값으로 만들어줍니다.
아래 예시에서는 age가 선택적인 값으로 되어있지만, Required<User>를 달아주었기 때문에 age가 필수적인 값이 되어버려서 admin을 정상적으로 선언할 수 없게 됩니다.
age를 선언해주면 에러가 사라집니다.
3. readonly<T>
readonly는 말 그대로 읽기 전용으로 바꾸는 것입니다.
선언만 가능하고, 추후에 수정을 할 수 없도록 만드는 것이죠.
4. record<K,T>
record는 키값과 밸류값에 어떤 내용을 할당할 수 있는지 명확하게 해 주고 싶을 때 사용합니다.
여기서 K는 키이고, T는 요소입니다.
아래와 같이 과목별 점수를 담는 객체를 만들어보겠습니다.
뭔가 복잡한 부분이 많죠?
이걸 Record를 이용해서 쉽게 표현할 수 있습니다.
Record 앞에는 키값, 뒤에는 요소 들어간다고 했죠?
1,2,3,4라는 키값에는 A,B,C,D라는 요소가 들어갈 수 있다는 말입니다.
따로 변수를 만들어서 넣어두면 좀 더 편하게 사용할 수 있습니다.
훨씬 깔끔해졌죠?
조금 더 확장해서 알아볼까요!?
user라는 객체를 받아서 이 객체가 올바른 값을 갖고 있는 지를 확인해주는 isValid라는 함수를 만든다고 생각해봅시다.
isValid 안의 result 객체의 키값에는 id, name, age가 들어갑니다.
이 키값은 User 인터페이스의 key값과 같기 때문에 keyof User로 간단하게 사용할 수 있습니다.
각 키값에는 올바른 값이 왔는지를 나타내는 boolean값이 할당되어야 하므로 요소 자리에는 boolean이 들어가면 됩니다.
5. pick<T,K>
T 타입에서 K 프로퍼티만 골라서 사용할 때 사용할 수 있는 것이 바로 pick입니다.
User 인터페이스에서 id, name 키값만 가져와서 사용하고 싶을 때 pick을 사용하시면 됩니다!
6. omit<T,K>
omit은 pick과 반대로 T 타입에서 K 프로퍼티만 제외하고 사용할 수 있게 해 주는 키워드입니다.
위 예제에서 id와 name 대신 age와 gender로 바꾸고 Pick을 Omit로 바꿔주면 동일하게 동작하겠죠?!
7. exclude<T1,T2>
T1 타입에서 T2 타입을 제외하고 사용할 수 있게 해 주는 키워드가 바로 exclude입니다.
omit과 다른 점은 omit은 프로퍼티를 제외하는 것이고, exclude는 타입을 제외합니다.
T1타입에서 T2타입과 겹치는 것들을 제거하는 것이라고 생각하면 됩니다!
아래 사진으로 더 쉽게 이해해봅시다.
T1, T2 타입이 있는데, 만약 T1 타입에서 number랑 string을 제외한 타입을 T2에 넣고 싶을 수 있습니다.
이렇게 작성하고 T2 위에 마우스를 올려보면 boolean만 남는 것을 확인하실 수 있습니다!
8. nonnullable<T>
nonnullable은 null을 제외한 타입을 생성하는 키워드입니다.
이름만 보면 null만 제외하는 것처럼 보일 수 있는데, undefined도 같이 제거합니다.
다양한 타입들 중에서 null과 undefined를 제거하고 싶을 때 사용할 수 있겠죠?!
위 예시처럼 작성하게 되면 T2타입은 string과 void 타입만 남게 됩니다.
최근댓글