나는 타입스크립트를 알고 사용하는가?

저는 타입스크립트로 개발을 합니다. 하지만 타입스크립트에 대해서 잘 알고 있느냐고 질문하면 자신있게 안다고 하지 못했었습니다. (사실 지금도 그렇습니다.)

혹시라도 자신이 사용하는 언어에 대해 바닥부터 알고 사용하지 않는지 생각해봅시다. 아닌 개발자가 꽤 많을 것이라고 예상합니다. (저도 그랬고, 저와 함께 학습했던 주니어 개발자분들도 그랬습니다.)

타입스크립트를 바닥부터 알아본 경험을 공유합니다. 기초적인 내용이지만 혹시라도 몰랐거나 관심있는 분이라면 흥미롭게 읽었으면 좋겠습니다.

• 대상 독자 : 타입스크립트를 사용하는데 알고 사용하지 않는 초보 개발자와 입문자

이 글은 Learning Typescript - Josh Goldberg 의 Chapter 01 From Javascript To Typescript 부분을 참고하여 작성했습니다.

타입스크립트의 역할 4가지

책에서 타입스크립트는 크게 4가지 역할을 한다고 정리합니다.

1. 프로그래밍 언어

   타입스크립트 고유의 구문이 포함된 언어입니다.

2. 타입 검사기

   파일 내의 모든 구성 요소(변수, 함수 등)를 이해하고, 잘못 구성된 부분을 알려주는 프로그램

3. 컴파일러

   타입 검사기를 실행하고 문제를 보고한 후 이에 대응되는 자바스크립트 코드를 생성하는 프로그램

4. 언어 서비스

   타입 검사기를 사용해 IDE에 개발자에게 유용한 유틸리티 제공법을 알려주는 프로그램

저는 처음에는 완전히 와닿지는 않았습니다. 이번 글에서는 "3. 컴파일러" 역할에 대해 집중적으로 알아봅니다. 이후의 내용에서 어떻게 이 역할을 하는지 언급하겠습니다.

바닥부터 시작해보기

타입스크립트 설치 및 실행을 어떤 템플릿의 도움도 받지 않고 구성해가며 이해해보겠습니다.

1. 설치

어떤 프로그램이든 시작은 설치입니다. 쉽고 당연한 과정입니다.

npm i -g typescript

• Node.js가 설치되어 있어야 합니다.
• -g 옵션을 사용해서 전역 설치를 했습니다.

2. tsc

분명히 사용한 적은 있지만 자주 사용하지는 않기 때문에 쉽게 넘어갈 수 있는 명령어입니다. (일단 저는 그랬습니다. 🥲)

tsc는 typescript compiler의 약자입니다. 이름 그대로 "타입스크립트를 자바스크립트로" 컴파일해줍니다. 이후에 실행하는 단계에서 직접 와닿게 사용해볼 수 있습니다.

일단 버전 확인을 해봅시다.

tsc --version
// Version 4.7.2

나중에 tsc 버전이 맞지 않아서 오류가 발생한다면 해당 명령어를 사용해서 디버깅하면 됩니다.

3. 설정 파일 생성(tsconfig)

매우 중요한 설정 파일을 생성합니다. 아래 명령어를 입력해서 tsconfig.json 파일을 생성합니다.

tsc --init

tsconfig.json 파일은 init을 했더니 생성되는 파일입니다. 가장 기본적이고 중요한 파일임을 유추할 수 있습니다. 앞으로 우리가 사용할 타입스크립트 옵션은 이 파일로 관리할 것입니다.

저는 이전에 타입스크립트 에러가 발생해서 구글링을 통해 해결할 때 해당 파일에 옵션을 달아주라는 솔루션을 많이 봤고 그저 복사 붙여넣기로 해결하고 넘어갔었습니다. 혹시라도 타입스크립트에 입문해서 이 파일이 어떤 역할을 하는 지 잘 모르고 사용하고 있다면 꼭 중요한 파일임을 인지하면 좋을 것 같습니다.

4. 실행

이제 프로젝트에 index.ts 파일을 생성하고 Hello, Typescript! 를 출력해봅시다.

// index.ts
console.log('Hello, Typescript!')

위에 타입스크립트의 역할에서 컴파일러의 역할을 한다는 것을 언급하겠다고 했습니다. 우리는 Hello, Typescript! 를 출력하려면 파일을 실행해야 합니다. 하지만 타입스크립트는 컴파일러일 뿐입니다. 우리의 의도대로 Hello, Typescript! 를 출력하려면 .js 파일이 필요합니다. .js 파일 생성을 위해 tsc 명령어를 사용해서 컴파일해줍니다.

tsc index.ts

이 명령어는 index.ts 파일을 "타입스크립트에서 자바스크립트로 컴파일"하겠다는 의미입니다.

그러면 루트 디렉토리에 index.js 파일이 생성된 것을 볼 수 있습니다.

"타입스크립트에서 자바스크립트로 컴파일"에 성공했습니다.

이제 index.js 파일을 실행하면 됩니다.

node index.js
// Hello, Typescript!

그런데 항상 이렇게 번거롭게 컴파일하고 실행해야 할까요? 한 번에 실행해주는 명령어가 있습니다.

ts-node index.ts
// Hello, Typescript!

ts-node 명령어를 사용하면 한 번에 실행 가능합니다.

마치며

이 글에서 언급하고 있는 부분들을 학습하기 전까지 저는 npm run 등의 커맨드를 통해 프로젝트를 실행하기만 했고 타입스크립트 파일을 직접 분해하여 위와 같이 사용해보지는 못했습니다. 앞으로도 프로젝트를 진행하거나 실무에서 이렇게 바닥부터 만드는 경우가 많지는 않을 것입니다. 하지만 기본은 쉬운 것이 아니라 중요한 것이기 때문에 반드시 알아야 한다고 생각합니다. (농구도 제자리에서 드리블할 줄을 알아야 더 난이도 높은 드리블을 할 수 있듯이)

앞으로도 언어를 학습할 때 근본부터 학습해야겠다고 느꼈고 혹시라도 이러한 경험이 없는 초보 개발자분들께도 이런 방법을 저는 추천하겠습니다. 읽어주셔서 감사합니다!