밸!하~
밸로그 여러분 안녕하세요!
오늘은 타입스크립트의 Generic에 대해서 알아볼수있도록 하겠습니다 !
저희가 이전시간에 타입스크립트에 대해서 배웠었는데요
잠깐 보고갈까요??
타입스크립트는 자바스크립트에 타입을 지정해줘서 받아야할 데이터가 어떤 타입인지 명확하게 해주는 역할을 했었습니다!
이를통해서 대규모 서비스에서 에러를 줄이고 잘못된 데이터를 받아오는것을 줄였는데요!
오늘 소개드릴 내용은 타입스크립트의 Generic입니다!
도대체 generic이 뭘까요??
알아보기 전에 원시타입과 참조타입을 봐볼까요?
1.원시타입과 참조타입
먼저 기본적인 타입을 다시 봐볼까요??
데이터는 크게 원시타입과 참조타입으로 분류가 됩니다
먼저 원시타입에 대해서 볼수있도록 하겠습니다
1.문자 숫자 불린(primitive-원시) 타입
원시타입은쉽게 말해, 정수, 실수, 문자, 논리 리터럴등의 실제 데이터 값을 저장하는 타입이라고 할수 있습니다!
코드를 통해서 볼까요??
const getPrimitive=(arg1:string,arg2:number,arg3:boolean):[boolean,number,string]=>{
return[arg3,arg2,arg1]
}
const result = getPrimitive("철수",123,true)이렇게 타입을 통해서 보게되면 맞는 타입의 값을 넣었을때만 에러가 발생하지 않게됩니다!
그럼 원시타입의 특징을 한번 봐볼까요??
자바스크립트에서 원시 타입은 변수에 할당될 때 메모리에 고정 크기로 원시 값을 저장하고 그 값을 변수가 직접 가리키는 형태를 띄게됩니다!
쉽게말해
변수영역과 데이터 영역이 따로 존재한다는거죠!
즉 이 말은
immutable한 값이라는것입니다!
무슨말이냐면
메모리에 할당된 원시 타입의 값은 그 자체가 변경될 수 없다는 겁니다!
정말 신기하죠?
이 말은
변수에 값을 재할당할 때 기존 값이 변하는 것처럼 보이지만 사실은 새로운 메모리에 재할당한 값이 저장되고 변수가 가리키는 메모리가 달라지는 것이라는거죠!
조금은 이해 되셨나요?
두번쨰로는
2.배열, 함수, 날짜 정규표현식 참조타입
참조 타입은 객체(Object)의 번지를 참조(주소를 저장)하는 타입으로 메모리 번지 값을 통해 객체를 참조하는 타입입니당
원시타입과의 차이점으로는
원시타임이 immutable이었다면 참조타입은 mutable한 값입니다!
그렇게 때문에 값을 재할당 할때 새로운 메모리가 아닌 기존메모리에 재할당 할수 있다는거죠!
자 이렇게 원시타입과 참조타입의 정의와 차이에 대해서 봤는데요
여기까지 보고
마지막으로 오늘의 원래주제 Generic타입에 대해서 알아볼수있도록 하겠습니다
2.Generic타입이란
쉽게말해 타입을 만들어주는것이라고 할수있습니다
코드를 통해 봐볼까요?
function getGeneric<MyType1, MyType2, MyType3>(arg1: MyType1, arg2: MyType2, arg3: MyType3): [MyType3, MyType2, MyType1] {
return [arg3, arg2, arg1];
}
const result = getGeneric(123, false, true);
이렇게 처음에는 아무타입이나 올수가있지만 한번 타입이 들어오면 그 타입으로 지정이 된다는 겁니다!
위 코드에서 보면 arg3은 숫자 arg2,arg1는 boolean타입으로 자동으로 추론이되고 지정이된다는거죠!
이 generic의 장점은! return타입까지 알수있게 됩니다!
어떻게요?
앞서말씀드린것처럼 처음에 들어온데이터가 고정이 되어 타입이되기 떄문에 리턴의 타입또한도 예측을 할 수 있게 된다는것입니다!
그다음에 볼것은
이 코드를 조금더 줄여볼것입니다
function getGeneric2<T1, T2, T3>(arg1: T1, arg2: T2, arg3: T3): [T3, T2, T1] {
return [arg3, arg2, arg1];
}
const result = getGeneric2(123, false, true);;
이렇게요!
간단하게 T1,T2,T3이렇게 사용을 할수도있습니다!
더쉽게 봐볼까요??
function getGeneric3<T, U, V>(arg1: T, arg2: U, arg3: V): [V, U, T] {
return [arg3, arg2, arg1];
}
const result = getGeneric3("철수", 123, true);
이렇게 간단하게 T,U,V 로도 줄일수가 있다는 겁니다!
정말 간단하게 사용할수가 있죠?
자 오늘은 원시타입과 참조 타입 그리고 typescript에서의 generic타입에 대해서 알아봤는데요
원시타입과 참조타입의 가장 큰차이는 immutable과 mutable그리고 재할당할때의 차이가있다는것!
그리고
generic타입에서는 사용하게되면 추론하여 타입을 지정해 줄수있으니 훨씬 사용하기가 편했습니다
또한 간단하게 사용할수있으니 안사용할 이유는 없겠죠?
하지만 일반적으로 generic타입은 사용할 일이 거의 없습니다
왜요?
대부분 라이브러리를 가져와서 사용하기 때문에 직접 사용할일은 거의 없을것입니다!
하지만 여러분이 라이브러리를 만들어서 제공을 해주고싶다면 타입추론을 위해 any가 아닌 generic을 사용해서 만들수 있겠죠?
오늘도 부족하지만 지식한개 채워가며 바다같이 넓은 지식을 가져갈수있는 밸로그분들이 되셨으면 좋겠어용
그럼 오늘도
이만!
밸~바!
