TypeScript Tutorial 5. Generics in typescript

1. [TS] 5. Generics in TypeScript
by jbee

2. Generics 는자바스크립트개발자에게 친숙하지않은용어일꺼라고 생각됩
니다. 하지만정적타이핑에있어서큰부분을차지하고 있는Generics
syntax에대해알아봅니다.

3. Contents
Generics?
Generics to Class
Generics to Function

4. Generics?
이전에다뤘던인터페이스가 어떠한'틀'을지정하여함수또는클래스를정의
했다면, 제네릭을통하여함수또는클래스에'틀'을'주입'하여그 확장성을보
다높일수있습니다. 즉, 제네릭의목적은재사용성(reusable)을높이고 함수
나클래스의확장성을높여중복된코드를방지하기 위함이라고 할수있습니
다.

5. Generics to Class
어떠한장바구니(Basket)에물건(Item)을넣어야한다고 가정을해봅시다. 이
때, 하나의장바구니에는모두동일한타입의물건이들어있어야합니다. 이경
우모든경우의수에해당하는장바구니를각각의클래스로만들어줘야하는
문제점이발생합니다.
class BookBasket { ... }
class CupBasket { ... }
class DollBasket { ... }
//...
이럴경우, 제네릭을사용하여하나의클래스에서타입을주입받아모든경우
의수에해당하는장바구니를만들수있습니다.

6. class Basket<T> {
private item: T[];
getItem(index: number): T {
return this.item[index];
}
}
아주간단한 Basket 클래스를만들어보았습니다. 일반클래스를정의할때
와는다르게 <T> 라는것이클래스이름옆에추가된것을확인하실수있는
데요, 해당클래스내에서사용할타입을 T 라는값으로받을수있게 되는것
입니다. 여기서 T 는별뜻이있는게 아니라Type의약자입니다. 이렇게 정의
한클래스를이용하여여러경우에해당하는장바구니를생성할수있습니다.

7. const bookBasket = new Basket<Book>();
const cupBasket = new Basket<Cup>();
const dollBasket = new Basket<Doll>();
new 키워드를통해인스턴스를생성할때정의할때와마찬가지로 <> 와함
께타입을지정하여인스턴스를생성해줍니다. ( Book , Cup , Doll 에대한
인터페이스정의는생략합니다.)

8. Generics to Function

9. 제네릭스는클래스뿐만아니라함수에도적용될수있는데요, 이전에살펴보
았던AjaxUtils를예제로제네릭에대해알아보겠습니다.

10. 위함수는 fetchDataParam 이라는타입의인자만받을수있으며
Promise<DataFormat> 이라는타입의반환만할수있게 설계되어있습니
다. 그러나함수의body가 여러곳에서중복된다면 fetchDataParam 또는
DataFormat 을위함수에주입하여여러상황에대응할수있는함수로변환
시킬수있습니다. 이때, 제네릭이사용됩니다.
export async function fetchData(param: fetchDataParam): Promise
//...
}

11. 위함수에제네릭을적용하여함수의재사용성을높여보겠습니다.
async function fetchDataOf<T, U>(param: T): Promise<U> {
const response = await fetch(`${param}`);
return response.json();
}

12. arrow function에도마찬가지로적용할수있습니다.
이렇게 정의를하면다음과 같이호출할수있습니다. 여기서T와U는그냥
type의종류를나타내는character라고 생각하시면됩니다.
const fetchDataOf = async <T, U>(param: T): Promise<U> => {
const response = await fetch(`${param}`);
return response.json();
}

13. param 으로넘겨주게 되는인자의타입이다르거나, 반환하게 되는값의타입
이다를경우에도 <> 에해당타입을지정하여하나의함수를사용할수있게
됩니다.
const data: DataFormat = await fetchDataOf<string, DataFormat>(

14. 물론의형식으로도사용할수있지만(이럴바에차라리자바스크립트를사용
하는것이생산성측면에서더좋을것 같습니다.) 특정타입을받아해당타입
으로반환한다는측면에있어서안정성과 확장성두마리토끼를모두잡을수
있습니다.

15. 마무리
실제개발해서보다는라이브러리를개발할때많이사용할수있는Generics
에대해알아봤습니다. 해당포스팅외다른타입스크립트포스팅은여기에서
보실수있으며예제에사용된코드는여기에서확인하실수있습니다.
감사합니다.

16. 5. Generic in TypeScript end