[TypeScript] TypeScript

어디서 봤는데 TypeScript가 Front-End 개발자들이 사용하고 싶은 언어 1위라고 하더라.
근데 오히려 학원에서 한창 배울 당시에 코로나 걸려서 javaScript 스킵하다시피하고
회사와서 바로 TypeScript 쓰라길래 TypeScript쓴 내 입장에선 공부할 것도 없이 걍 익숙해져버린 언어라
제대로 공부해볼 생각조차도 안했던 것 같다. JavaScript도 그냥 코테 공부하려니 선택지가 그나마 열심히 써봤던 언어가 
그것 뿐이라 골랐던거구.. 그러다보니 자연스레 공부하게 되었다는 느낌이 되어버렸다. 

서론은 이제 끊고, TypeScript에 대해서 이야기를 해보자. 

 

1. 타입스크립트란?

TypeScript는 JavaScript에 Type을 부여한 확장판 같은 것이다. 
그 콘솔겜 하다보면 확장판 DLC 출시하고 이런거 처럼 말이다.
JavaScript의 장점이자 단점이 Type이 다이나믹하다는건데 이로 인해서 발생할 수 있는 문제가 런타임 에러다. 
런타임 에러가 뭐냐면 앞에 빌드같은 모든 절차 다 지나가고 사용자가 화면을 보면서 사용하고 있는 와중에 발생하는 에러들인데, 
사용자가 화면을 보며 사용하는 와중에 발생한다는 부분에서 상당히 큰 문제가 된다. Front의 본질은 좋은 UX를 제공하는 거니까.
결국 개발자는 이 런타임 에러를 잡기위해서 상당히 많은 노력을 기울이게 되는데, 그 해결책으로 나온게 TypeScript고 이 TypeScript를 사용하게 되면 
이 런타임 에러가 발생할 수 있는 상황을 미연에 방지하게 되는 것이다. 
뭐 덧붙여서 타입이 정의 되어있으니 그냥 javaScript로 작성된 코드를 볼 때보다 가독성도 올라갈거고, 유지보수에도 용이한 면을 보인다는 장점도 있다. 

2. Compile???

프로그래밍 언어는 나누는 분류기준이 상당히 많지만 개중에 컴파일 언어와 인터프리터 언어 라는 분류를 본 적이 있을거다. 
기본적으로 컴파일은 사람이 알아들을 수 있는 코드로 작성한 것을 컴퓨터가 알아들을 수 있는 기계어로 번역을 해주는 과정인데, 
자바와 같은 언어들은 이 번역을 전체 코드를 대상으로 한꺼번에 진행한다. 이런 애들을 컴파일 언어라고 부르고, 그 번역을 해주는 녀석을 컴파일러라고 부른다. 
하지만 프론트를 하는 사람들의 경우에는 자바스크립트를 주로 사용할텐데 자바스크립트는 컴파일 언어가 아니라 한줄한줄 번역을하는 인터프리터 언어라고 부른다. 
근데 타입스크립트를 사용하게 되면 갑자기 컴파일이라는 과정을 거치게 되는데, 이게 무슨 소리일까?

자바스크립트를 사용을 해도 컴파일이라는 절차가 생긴다. 물론 ECMA 2015 이전 버전의 스크립트를 작성한다면 컴파일을 할 필요가 없겠지만,
이게 무슨 말이냐면 프론트 엔드 개발자가 사용하는 스크립트 언어들은 브라우저가 읽을 수 있도록 개발된 언어다. 근데 대부분 알다시피 
우리가 사용하는 브라우저들은 상당히 다양하다. 크롬, 웨일, 파이어폭스 등등 모든 브라우저가 스펙이 다르고 읽을 수 있는 버전의 스크립트가 다르기 때문에
전체 브라우저에서 공통적으로 지원할 수 있도록 하기 위해서 기준이 되는 지점이 ECMA 2015 인거다. 
그래서 우리가 작성하는 버전의 스크립트를 저 버전으로 변경해주는 과정이 필요한데, 그걸 이제 트랜스컴파일(TransCompile)이라고 부른다. 
저런걸 해주는 도구가 Babel 이라는게 있는데 이거까지 얘기하면 복잡하니까 잠시 내려두고
그 과정 중에서 타입스크립트 역시도 브라우저가 읽을 수가 없는 언어이기 때문에 개발자가 개발할 때는 타입스크립트로 개발하더라도, 타입스크립트를 자바스크립트로 번역해주는 과정이 필요하게 되니까, 컴파일이라는 과정을 진행하게 되는거다. 그리고 이 과정을 거치면서 에러를 잡아낼 수 있기 때문에 자바스크립트만을 사용한 것 보다는 안정성이 보장된다고 할 수 있겠다. 이런 관련 설정들을 tsconfig.json 파일 안에서 해주게 되는 것임!

3. TypeScript 사용방법 기초

const exampleObject : Object = {
	name: string : '',
	age: number : 20 
}

이런 식으로 변수나 상수의 뒤에 콜론(:) 하나 찍어주고 어떤 타입인지 명시를 해주면 된다. 

 

4. 특이한 Type

1) any

const exampleAny : any = "";

any 타입은 살짝 TypeScript가 쳐놓은 안전라인을 탈출하게 해준다고 생각하면 된다. TypeScript를 쓰면서도 자바스크립트처럼 사용하려는 용도라고 하면 좀 이해가 쉬울 것 같다. 대부분 타입스크립트를 사용하는 개발자들은 any 사용을 최대한 지양하라고 하는데 그 이유가 뭐냐면 정적 타입 지정을 통해 획득 할 수 있는 안정성을 모두 포기한다는 의미와도 같기 때문에 TypeScript를 사용하는 의미가 퇴색되기 때문이다. 

 

2) unknown

axios.post('대충 API 주소', param)
	.then((res: unknown) => {
    	// 대충 response로 처리하는 내용
    })

unknown 같은 경우에는  Api를 통해 Response를 돌려받을때 많이 볼 수 있게 되는데(난 React-Query쓸 때 봄. 이거 제네릭선언 안해주거나 onSuccess, onError에서 response 타입, error타입 정의 안해주면 걍 unknown으로 Default), 서버에서 응답값으로 넘겨주는게 어떤 타입인지 알 수 없다 하면 저렇게 unknown 타입이 된다고 생각하면 된다. 

 

3) undefined

const [state, setState] = useState<string | undefined>();
// initial data 안넣어줬으니 undefined가 된다.

undefined 같은 경우엔 말 그대로 정의 되지 않았다는 의미가 되는데, 뭐 최초 렌더링할 때는 데이터가 있을 수가 없는 애거나 그런 식이면 저렇게 복수 타입 선언으로 undefined 라고 해두는 경우가 있다. 

(근데 api 데이터 받아오는 레이어에서 null처리 제대로 안해서 undefined 나오고 ? 붙이게 만드는 사람들 참을 수가 없다 진짜 개화남. 내 결벽증이 심각하게 도져버림)

 

(any, unknown, undefined 말고도 본게 더 있을텐데 생각이 안남.)

 

5. Generic 사용

const [state, setState] = useState<string>('');

내가 흔히 쓰는게 리액트다 보니 State에 제네릭 선언하는게 익숙해서 이렇게 작성해뒀는데, 따로 State설명은 하지 않겠다.  하여튼 저렇게 입력을 해주면 저 State는 이제  string 타입말고는 넣어줄 수 없는 몸이 되어버리는거다. 

 

6. 복수 타입 선언

앞의 undefined에서 작성해둔 것 처럼 "|" 를 사용해서 복수의 타입을 선언할 수 있다. (당연히 개발하는 사람이면 알겠지만 대문자 I(아이)나 소문자 ㅣ(엘)이 아니라 enter키 위에 있는 역슬래시버튼의 Shift누른 버전이다. )