TS GENERIC

 

TS GENERIC

제너릭을 이용하면 클래스나 함수 인터페이스를 다양한 타입으로 사용할 수 있다. 선언할 때는 그냥 타입 파라미터만 적어주고 생성하는 시점에 사용하는 타입을 결정한다.

 

function getSize(arr: number[] | string[]):number{
	return arr.length
}

const arr1 = [1,2,3]
getSize(arr1)

const arr2 = ["a", "b", "c"]
getSize(arr2)

 

이렇게 arr이 늘어나 함수를 사용하게 되면 계속 타입이 늘어나게 된다. 이때 

 

function getSize<T>(arr: T[]): number{
	return arr.length;
}

getSize<T>에서 T는 어떤 타입을 전달받아서 이 함수에서 사용할 수 있도록 한다. 그리고 사용하는 쪽에서 타입을 설정해준다.

 

function getSize<T>(arr: T[]):number{
	return arr.length
}

const arr1 = [1,2,3]
getSize<number>(arr1)

const arr2 = ["a", "b", "c"]
getSize<string>(arr2)

arr1 과 arr2에 getSize<number 혹은 string>이 T로 연결되어 타입스크립트를 사용하는 곳에 맞춰 보다 효율적으로 사용할 수 있다.

 

interface Mobile<T> {
	name: string
	price: number
	option : T;
}

const m1:Mobile<object> = {
	name : "s21",
	price : 1000,
	option : {
		color : "red",
    	coupon: false
	}
}

const m1:Mobile<string> = {
	name : "s20",
	price : 900,
	option : "good"
}

위 코드블록처럼도 interface에서의 option에 T라는 매개변수를 놓고 사용하는 것에 맞춰서 object, string 등으로 설정하면 타입스크립트를 쓸 수 있다.

 

 

* 회고

타입스크립트에 대한 두려움이 있어 계속 시도를 안했었는데 이렇게 다시 포스팅을 하면서 보니까 해볼 수도 있겠다란 생각이 든다. 조금씩이라도 건드려보면서 해야하는데.. 타입스크립트만 제대로 공부할 수 있는 큐레이션 콘텐츠를 더 찾아보거나 인프런에서 보던 타입스크립트 강의를 고민해봐야겠다. 팀프로젝트를 하게 되면 쓰게 될텐데.. 그 때까지는 어느 정도 활용할 수 있도록 하자.

 

* 참고한 내용

https://www.youtube.com/watch?v=pReXmUBjU3E