금일은 TypeScript의 활용에 대해서 알아보고자 한다. Typescript는 컴파일러 언어중에 하나로써 나중에 언어를 Javascript로 변환해서 컴퓨터가 읽게끔 합니다.
컴파일 vs 트랜스파일
컴파일: 하나의 언어가 다른 언어로 변경되는 작업을 의미한다.
트랜스파일: 하나의 언어가 다른 버전으로 변경되는 작업을 의미한다.
타입스크립트는 자바스크립트를 안전하게 사용하기 위한 언어이며, 변수 또는 상수의 타입을 한번 정해주거나 state의 타입을 정해주면 그 이후에는 무조건 그 타입을 따라야만한다.
예)
게시물의 갯수 - 5개
0 + 1 + 1 + 1 + 1 + 1 = 5
이렇게 들어갈 수도 있지만, 타입스크립트를 통해서 변수의 속성을 처음부터 정해주지 않으면 문제가 발생한다.
'0' + 1 + 1 + 1 + 1 + 1 = 011111
이렇게 값이 들어가는 부분에 대해서 방지를 해야한다.이렇게 하고난 후 타입스크립트 같은 경우는 js파일을 ts 혹은 tsx파일로 변경해주면 된다. tsx파일은 컴포넌트가 구성되는 presenter 혹은 container파일을 tsx파일로 변경해주면 되고, ts 파일같은 경우는 graphql-query 혹은 emotion 파일들을 변경해주면 좋다.
그런데, 백엔드에서 받아오는 데이터의 형 변환을 적어줘서 조금 더 쉽게 백엔드 데이터의 속성을 추론하고 싶다면 code generator를 이용하면 좋다.
Typescript Generic
자바나 C++에서 자주볼 수 있는 구조인데 함수나 클래스를 사용하기전에 타입을 미리 선언해주는 것이다.
자바스크립트 같은 경우는 원래 모든 타입을 다 받기 때문에 typescript처럼 타입을 지정해줄 수 없다.
정적인 언어에서 쓰이는 프로그래밍 기법이라고 보면 될 것 같다.
왜 generic이 유용한지 class 예제를 통해서 한번 살펴보자
class A {
data : any[] = [];
constructor()
examplefunction1() : any;
examplefunction2() : any;
}이렇게 class안에서 데이터 및 함수구조 타입을 any로 선언하고 사용을 할 수 있지만, any로 데이터를 받기 때문에 class A라는 것을 호출할때마다 자료구조 각각을 다 검사해야한다.
그렇다고 number, string, 이렇게 미리 자료구조의 타입을 선언해준다면?
당연히 범용적인 측면에서 효율이 떨어진다.
그렇기때문에 나온게 generic이라고 보면 될 것 같다.
class A<T>{
private data T[] : [];
constructor() {};
functionexample1(item: T) : void{
this.data.push(item)
}
functionexample2() : T {
}
이렇게 지정해주고나서
const classtype1 = classA<string>
const classtype2 = classB<number>이렇게 범용성있게 사용할 수 있다.
Generic 함수
function example<T>(arr[] : T[]) : T {
return arr[0]
}
이런식으로 함수를 작성하게 된다.
//함수에서 인자를 받는 데이터 타입이 2개이상인경우
function example2<T, X>(data1 : T, data2 : U) : [T, U] {
return data1, data2
}