[TypeScript] 시작하기 - 설치하고, 컴파일 해보자

TypeScript를 시작하며

나는 어쩌다보니까 작년 이맘때 입사하자마자 React로 화면을 구성을 했어야했다(Django 백엔드 구성도 내 몫, DB 생성도 내몫, 운영도 내몫..!). JavaScript가 동적으로 타입을 지정하는 성질때문에 page=1 에서 다음페이지로 넘어가기 위해 page = page + 1을 했을때 문자열 '11' 이 되었던 적이 있었다. 기능적으로는 동작을 했었는데, 사용자들은 그걸 모르니까 난리가 났고, 나도 JavaScript를 잘 몰랐어서 시간이 좀 걸려서 문제를 찾아낸적이 있었다.

 

C나 C++ 처럼 자료형 관련되서 문제가 없었던 언어 위주로만 하다가, JavaScript에서 이런 문제가 나는걸 보고 JavaScript로 개발할때마다 항상 심적으로 부담이 되는면이 있었다. 하지만 이제는 JS 환경에 꽤나 매력을 느끼게 되어서 JavaScript를 더 해보려고 하지만서도 여전히 저때 트라우마로인해 그냥 JavaScript로 개발하는건 부담스럽다. 

 

그래서 이번에 퇴사하고 시간이 있으니까 TypeScript 환경에 대해서도 이해해보려고 한다. 

 

TypeScript란? 

- TypeScript란 JavaScript에 Type이 추가된 것이라고 이해한다. 

 

- 하지만 이를 위해서 다른 타입이 있는 언어들, C나 C++ 처럼 컴파일 단계가 필요하게 된다(하지만 C나 C++ 처럼 링킹 과정은 필요하지 않다고 한다)

 

- 우선 typescript 파일을 사용하기 위해서는 .ts 로 끝나는 파일을 작성하면 된다. 

index.ts 파일을 만들어보자!

VSCode에서는 타입스크립트 지원기능이 내장이 되어있어서 내 컴퓨터에 typescript 컴파일러가 설치되어있지 않더라도, 내가 만든 .ts파일을 바로 인식할 수 있다. 

 

하지만 tsc index.ts 를 통해서 컴파일하려고 하면 되지 않는다. 당연하다. 왜냐하면 컴파일러가 없으니까!! 이건 설치를 해줘야한다. 

 

- 위에서말한 컴파일 단계를 위해서 우리는 typescript 컴파일러를 설치를 해야한다. 

다른 모든 패키지처럼 타입스크립트를 설치하는 방법은 두가지가 있다. 전역으로 설치하거나 프로젝트에 한정해서 설치하거나. 

나는 전역으로 설치하려고 한다. 이를 위해서는 아래 명령어를 실행하면 된다. 

 

npm install -g typescript 

 

내 컴퓨터에 설치한 화면

- 이제 .ts 파일을 컴파일할 수 있다. 

tsc index.ts 를 통해서 컴파일을 해보자. 

 

 

이제 그럼 index.js 파일이 생성된다. 

 

- tsconfig.json 파일은 프로젝트별 더 세부적인 타입스크립트 옵션을 설정할 수 있는 것이라고 한다. 

 

 

참고자료

[TypeScript 란?](velog.io/@dongwon2/TypeScript%EB%A5%BC-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-%EC%A0%84%EC%97%90-%EC%9D%B4%EC%A0%95%EB%8F%84%EB%8A%94-%ED%95%B4%EC%A4%98%EC%95%BC%EC%A7%80)

[TypeScript 툴 사용 방법](www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html)

[한눈에 보는 타입스크립트](heropy.blog/2020/01/27/typescript/)

[한국어 docs](typescript-kr.github.io/pages/tutorials/dom-manipulation.html)