타입스크립트 유틸리티 타입 part1 (스테픈 2km완료)

in sct-kr •  3 months ago 

타입스크립트를 공부하면서

유틸리티 타입에 대해서 정리해봐야겠네요

일단 정리에 앞서 타입 정의에는 인덱스 방식을 사용해서도 가능한데요

인덱스 타입(Index Types)은
객체 타입의 속성을 동적으로 접근하고 사용할 수 있도록 합니다.
이를 통해 객체의 키와 값에 대한 타입을 더 유연하게 정의할 수 있습니다

image.png

이런형태로 타입을 지정받는것도 가능합니다.

Mapped 타입도 있는데

제네릭과 사용법이 비슷하나 좀더 유용한것 같다.

기존에 타입지정할때는

image.png

이런 형태로 하나씩 타입을 다 써가며 지정했는데

예를 들어 타입을 하나 더 만들어보자.

image.png

이런 타입이 있다고 생각해보자

여기에 몇몇 키에 리드온리를 주던 ? 연산자를 넣어서 있어도 되고 없어도 되는식으로 변경하고 싶다면

image.png

새롭게 하나를 만들어 추가해서 해도 된다.

하지만 위 방식은 번거롭다.

매번 새롭게 만들어야하고..

이런때 사용하는게 Mapped 타입인데

image.png

위처럼 옵션을 만들되

내부에 for in 반복문 형식으로 작성해준다.

제네릭으로 타입을 받는 형태이며

받은 타입의 내부에 키를 순회하며 가져오기 때문에 타입을 중복해서 만들필요가 없다.

image.png

이런식으로 사용하기 때문에

해당 타입을 이용해 만든 변수에는

객체 내부에 키를 하나 안써도 문제가 없다

확실히 사용하기 좋은 방식인듯하다.

타입스크립트의 조건부 타입(Conditional Types)
해당 타입은 타입의 조건에 따라 다른 타입을 선택할 수 있도록 해줍니다.
이는 타입스크립트의 고급 타입 시스템에서 매우 유용한데요.
조건부 타입은 다음과 같은 형식을 가집니다

image.png

여기서 T가 문자열이나 숫자로 할당 가능하면 타입은 스트링이나 넘버가 가 되게 됩니다.

뭐.. 이밖에도

Partial 타입. Required , Readonly, Pick, Omit, Exclude, NonNullable 등등.. 유틸리티 타입이 정말 많은데요

아직 해당 타입을 사용할일이 많지는 않아서.. 예시를 들기가 조금 애매하군요

추가적인 부분은 추후 포스팅을 이어가는게 좋겠습니다


스테픈 2km완료

image.png

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE BLURT!