Effective Typescript - 타입 연산과 제네릭 사용으로 반복 줄이기

타입 연산과 제네릭 사용으로 반복 줄이기

타입 반복을 줄이는 가장 간단한 방법은 타입에 이름을 붙이는  것입니다.

위 예제에서 한눈에봐도 반복되어지는 코드가 보입니다. 바로 x와y의 타입이 반복되어지고있습니다.

인터페이스를 활용하여 반복적인것을 줄일수 있습니다.

 

두개의 함수가 같은 타입의 시그니처를 공유하고있다고 가정해보겠습니다. 위예제와는 달리 조금은 복잡해보이기도 하지만 반복되는코드가 보입니다.

첫번째, 매개변수 url,opts 두개의 타입이 반복되어지고있습니다.

두번째, 반환타입이 Promise<Response> 가 반복되어지고있습니다.

 

위 사진과 같이 함수의 타입을 선언함으로써 반복적인 코드를 줄일수있게되었습니다. 

 

또 다른 예제를 살펴보겠습니다.

 

이와같이 반복되는 코드가 있습니다.  위 예제의 코드는 State 를 인덱싱하여 속성의 타입에서 중복을 제거할수있습니다.

이젠 State 내의 속성의 타입이 바뀌면 TopNavState 의 타입도 자동적으로 바뀌게 됩니다. 하지만 여전히 중복되는 코드가 눈에 보입니다. State가 중복되고 있습니다.

Mapped Types 를 사용하여 한번더 중복을 제거하였습니다. 

 

유니온타입을 인덱싱하여 타입을 정의하는법입니다. 

 

Mapped Types 와 keyof 를  사용하면 반복적인코드를 줄일수있습니다.

keyof 를 사용하여 Options로부터 속성 타입의 유니온을 반환합니다 

유니온을 반환하는 모습

매핑된 타입(Mapped Types) = [k in keyof Options] 는 순회하며 Options 내 k 값에 해당하는 속성이 있는지 찾으며 

? 는 각 속성을 선택적으로 만듭니다.

이와같은역할을 하는 키워드로 Partial이 있습니다.

 

함수나 메서드의 반환값에도 명명된 타입을 만들고 싶을수 있습니다. 이런 경우 ReturnType 제네릭이 정의되어있습니다.

 

제네릭 타입에서 매개변수를 제한하는방법은 extends 를 사용하는것입니다 extends 를 사용하면 제네릭 매개변수가 특정 타입을 확장한다고 선언 할 수 있습니다.

T는 Name 의 부분집합이기때문에 first와last객체를가진 요소 두개(tuple)를 가져야합니다.

couple2는 제네릭을 잘못사용하고있습니다 DancingDuo 는 Name 을  확장하고있습니다 따라서 Name 인터페이스에 맞게 제네릭 매개변수를 주어야하지만 last가 없기때문에 오류가 발생합니다.

에러 수정후

 또한 만약 [T,T] 로 타입을 명명한대로 두개를 할당해야하는데 3개나 1개를 할당하면 어떻게될까요?



네 당연히 타입스크립트가 에러가 나고있다고 친절하게 알려줍니다.(Source has 1 element(s) but target requires 2.)