Hello TS World
이 페이지는 인프런 강의 한 입 크기로 잘라먹는 타입스크립트 의 강의 자료입니다

📄

Table Of Contents

타입스크립트 Hello World 실습 코드를 보관할 폴더 만들기 Node.js 패키지 초기화 @types/node 설치하기 타입스크립트 컴파일러 설치하기 타입스크립트 실행하기 타입스크립트 파일 만들기 tsc로 컴파일하고 실행하기 TSX(TypeScript Execute)로 실행하기 (Deprecated) ts-node로 실행하기

타입스크립트 Hello World

실습 환경 설정을 완료 했다면 이제 타입스크립트 코드를 작성할 차례입니다.

이번 단원 에서는 새로운 실습용 Node.js 패키지를 만들고 타입스크립트 프로그래밍을 돕는 여러 도구를 설치 할 것 입니다. 그 다음 타입스크립트 코드를 작성 하고 직접 컴파일 한 다음 실행까지 해 보겠습니다.

실습 코드를 보관할 폴더 만들기

본 강의에서 사용할 실습 코드들과 다양한 패키지들을 보관 할 폴더 하나를 만듭니다. 저는 Documents(문서) 폴더 아래애 “onebite-typescript” 라는 이름의 폴더를 만들었습니다.

그 다음 해당 폴더 아래에 이번 시간에 실습용으로 사용할 패키지 폴더를 하나 만듭니다. 이름은 section1 입니다.

Node.js 패키지 초기화

VSCode에서 방금 만든 onebite-typescript/section1 폴더를 엽니다.

그 다음 터미널을 열고 다음 명령어를 입력해 Node.js 패키지를 초기화 합니다.

코드를 불러오는 중 입니다 ...

패키지 정보는 모두 디폴트(기본)로 설정합니다. 단순 실습을 위한 패키지이므로 패키지 기본 정보를 자세히 설정할 필요는 없습니다.

@types/node 설치하기

새로운 타입스크립트 프로젝트(패키지)를 시작할 때 패키지 초기화 이후 가장 먼저 해 주어야 하는 일이 하나 있습니다. 바로 Node.js 내장 기능들의 타입 정보를 담고있는 @types/node 라는 패키지를 설치해 주어야 합니다.

코드를 불러오는 중 입니다 ...

@types/node 라이브러리는 Node.js가 제공하는 기본 기능(내장 함수, 클래스 등)에 대한 타입 정보를 가지고 있습니다. 만약 이 라이브러리를 설치하지 않으면 Node.js가 제공하는 console 등의 기본 기능(내장 함수 등)들의 타입이 선언되지 않아서 타입스크립트의 컴파일 과정에서 타입 검사가 실패하여 오류가 발생할 수 있습니다.

💡

이 패키지를 꼭 설치해야 하는 이유

타입스크립트는 코드를 실행하기 전에 타입을 올바르게 사용했는지 검사하는 ‘타입 검사’ 과정을 거칩니다. 이 검사 과정에서 타입이 선언되지 않은 코드를 만나게 되면 타입스크립트는 타입이 올바르게 사용 되지 않았다고 생각해 오류를 발생 시킵니다. 따라서 Node.js의 기본 기능들을 위한 타입을 별도로 선언하기 위해 @types/node 패키지를 설치해야 합니다.

@types/node가 성공적으로 설치되면 패키지의 node_modules 폴더에 @types 폴더가 생성됩니다. 이 폴더를 클릭해 무슨 파일들이 존재하는지 살펴보겠습니다.

@types/node 설치시 생성되는 node_modules/@types

Node.js가 제공하는 console 함수에 대한 타입이 선언되어 있는node_modules/@types/console.d.ts 파일

폴더를 열어보면 Node.js가 기본적으로 제공하는 기능(내장 함수 등)들에 대한 타입이 선언되어 있는 여러개의 폴더와 파일들이 존재합니다.

타입스크립트 컴파일러 설치하기

다음으로는 타입스크립트 컴파일러를 설치해야 합니다. 타입스크립트 컴파일러(TSC)는 npm의 TypeScript 패키지에 동봉되어 있습니다.

터미널에 다음 명령어를 입력해 TypeScript 패키지를 설치합니다.

코드를 불러오는 중 입니다 ...

앞서 타입스크립트의 동작 원리에 대해 살펴볼 때 타입스크립트는 컴파일러에 의해서 자바스크립트로 변환한 다음에 실행한다고 살펴본 적 있습니다. 그래서 자바스크립트를 실행하기 위해 Node.js를 설치하는 것 처럼 타입스크립트를 컴파일 하기 위해서는 타입스크립트 패키지를 설치해 주어야 합니다.

-g 옵션을 이용해 전역으로 설치합니다. 이렇게 전역으로 패키지를 설치하면 마치 pc에 설치된 프로그램처럼(Node.js 처럼) 터미널에 패키지 이름을 호출해 사용할 수 있습니다. 참고로 macOS일 경우 sudo(관리자 권한) 옵션을 사용하므로 PC 패스워드를 물어볼 수 있습니다.

설치가 완료되면 제대로 설치 되었는지 확인하기 위해서 타입스크립트 컴파일러의 버전을 출력하는 다음 명령어를 입력해서 잘 설치 되었는지 확인합니다.

코드를 불러오는 중 입니다 ...

타입스크립트 실행하기

타입스크립트 패키지를 성공적으로 설치했다면 이제 타입스크립트 파일을 만든 다음 간단한 코드를 작성 해 보겠습니다. 그 다음 실행까지 해 봅니다.

타입스크립트 파일 만들기

패키지 루트 아래에 src 폴더를 생성한 다음 index.ts 파일을 생성하고 다음과 같이 작성합니다. 참고로 타입스크립트 파일의 확장자는 ts 입니다.

코드를 불러오는 중 입니다 ...

tsc로 컴파일하고 실행하기

코드 작성을 완료 했다면 타입스크립트 컴파일러를 이용해 이 타입스크립트 코드를 컴파일 합니다. 터미널에 다음 명령어를 입력합니다.

코드를 불러오는 중 입니다 ...

tsc 파일명 은 특정 파일을 컴파일 하도록 타입스크립트 컴파일러에게 지시하는 명령어입니다. 위 명령어를 입력하면 src/index.ts 파일을 타입스크립트 컴파일러가 컴파일 합니다.

컴파일이 완료되면 자바스크립트 파일 src/index.js 이 생성됩니다. 파일을 열어 컴파일 된 자바스크립트 코드를 확인합니다.

코드를 불러오는 중 입니다 ...

이렇게 컴파일 된 자바스크립트 코드는 node를 이용해 실행합니다. 다음 명령어를 터미널에 입력해 src/index.js를 실행합니다.

코드를 불러오는 중 입니다 ...

물론 지금은 아주 단순한 타입스크립트 코드를 컴파일 했기 때문에 컴파일 이전과 이후의 코드가 동일합니다. 만약 다음과 같은 복잡한 타입스크립트 코드를 작성하고 컴파일하면 복잡한 자바스크립트 코드가 생성됩니다. (아래 코드는 지금 따라 작성할 필요도 이해할 필요도 없습니다)

TSX(TypeScript Execute)로 실행하기

💡

23.12월 업데이트 된 내용입니다. (ts-node → tsx)

강의 중 사용하는 ts-node는 Node 20 버전 이상에서는 더 이상 동작하지 않습니다. 따라서 아래에서 소개하는 tsx로 대체하시어 수강해주시면 되겠습니다. 두 도구의 동작 방식은 서로 동일하니 아래 내용을 참고하시어 tsx를 설치하신 다음 ts-node 대신 tsx 명령어를 이용하시면 됩니다.

예) 아래의 두 명령어는 동일한 동작을 합니다.

ts-node src/index.ts

tsx src/index.ts

앞서 타입스크립트 코드를 실행하기 위해 tsc를 이용해 타입스크립트 코드를 자바스크립트로 변환한 다음 변환된 자바스크립트 코드를 Node.js로 실행시켰습니다. 정리하면 tsc 그리고 node 2번의 명령어를 사용해 타입스크립트 코드를 실행했습니다. 이번에는 명령어 한번으로 타입스크립트 코드를 바로 실행시켜주는 도구 tsx(TypeScript Execute)에 대해 살펴보겠습니다.

tsx는 단 한번의 명령어로 타입스크립트 코드를 실행시켜주는 도구입니다. 타입스크립트를 설치할 때와 동일하게 npm에 -g 옵션을 붙여 글로벌로 설치합니다.

코드를 불러오는 중 입니다 ...

설치가 완료되었다면 다음 명령어를 터미널에 입력해 제대로 설치 되었는지 확인합니다. 정상적으로 설치 되었다면 아래와 같이 버전 코드가 출력됩니다. 참고로 이때 현재 설치된 Node.js의 버전도 함께 출력됩니다.

코드를 불러오는 중 입니다 ...

설치 확인까지 마쳤다면 이제 tsx를 이용해 타입스크립트 파일을 실행하겠습니다. 다음 명령어를 터미널에 입력합니다. 앞서 tsc를 이용했을 때와 비교해 tsc 명령어를 tsx로 교체한 것 과 같습니다.

코드를 불러오는 중 입니다 ...

그 결과 자바스크립트 파일을 생성하지 않고 한번에 타입스크립트 파일을 실행합니다. 이렇듯 tsx를 이용하면 보다 쉽게 한번의 명령어로 타입스크립트를 실행할 수 있습니다. 언제 tsc를 사용하고 tsx를 사용하는지에 대해서는 이후에 더 자세히 다룹니다. 지금은 두가지 방법으로 타입스크립트를 실행할 수 있으며 두 방법에 어떤 차이가 있는지만 알고 있으면 됩니다.

이렇게 타입스크립트 프로그래밍을 위한 개발 환경 설정부터 타입스크립트를 설치하고 직접 작성한 타입스크립트 코드를 컴파일하고 실행하는 방법에 대해 살펴보았습니다. 다음에는 타입스크립트 컴파일러의 옵션을 직접 설정하는 방법에 대해 살펴보겠습니다. 감사합니다.

(Deprecated) ts-node로 실행하기

💡

TSX 사용을 권장합니다 (Node.js 20 버전에서는 동작하지 않습니다)

23년 10월 Node.js의 LTS(장기 지원 버전)가 20대로 업데이트 되면서 ts-node가 정상적으로 동작하지 않고 있습니다. 따라서 23년 10월 이후에 이 강의를 수강하시는 분들께서는 ts-node 대신 위에서 소개하는 tsx를 사용하시기 바랍니다.

deprecated 된 내용 보기

앞서 타입스크립트 코드를 실행하기 위해 tsc를 이용해 타입스크립트 코드를 자바스크립트로 변환한 다음 변환된 자바스크립트 코드를 Node.js로 실행시켰습니다. 정리하면 tsc 그리고 node 2번의 명령어를 사용해 타입스크립트 코드를 실행했습니다. 이번에는 명령어 한번으로 타입스크립트 코드를 바로 실행시켜주는 도구 ts-node에 대해 살펴보겠습니다.

ts-node는 한번에 타입스크립트코드를 컴파일부터 실행시키는 도구입니다. 타입스크립트를 설치할 때와 동일하게 npm에 -g 옵션을 붙여 글로벌로 설치합니다.

코드를 불러오는 중 입니다 ...

설치가 완료되었다면 다음 명령어를 터미널에 입력해 제대로 설치 되었는지 확인합니다. 정상적으로 설치 되었다면 버전 코드가 출력됩니다.

코드를 불러오는 중 입니다 ...

💡

Node.js 20버전에서는 ts-node가 현재 정상적으로 작동하지 않습니다.

23년 11월부로 Node.js의 LTS버전이 20버전으로 격상되면서 ts-node의 동작에 오류가 발생하게 되었습니다. 따라서 23년 11월 이후에 이 수업을 수강하시는 분들께서는 아래의 블로그 링크를 참고하시어 Node.js 버전을 18 버전대로 변경하시는것을 추천드립니다.

(18.18.2 버전을 추천드립니다. 18.19.x 버전에서도 동일한 오류가 발생한다고 합니다!)

[NODE] 📚 NVM 모듈 사용법 - 노드 버전 스위칭

NVM (Node.js Version Manager) 모듈 개발 환경에 따라 Node.js의 버전을 변경해야 하는 상황이 한 번쯤은 꼭 온다. 협업을 할 때, 또는 다양한 프로젝트를 동시에 진행해야 할 때 다양한 라이브러리 / 프레임워크 / 개발툴의 버전 호환 문제를 겪기 때문이다. 이런 환경에서 그때마다 Node.js를 재설치 및 삭제하는 방법으로는 한계가 있고 불편할뿐더러 잡아먹는 시간도 아깝다. 이런 상황에서 Node.js 버전을 상황에 따라 변경해 가면서 사용하게끔 도와주는 것이 NVM이다. NVM 은 Node Version Manager로써 Node.js의 도구이며, 상황에 따라 버전을 변경해 가면서 사용하는 것을 말한다. 일반 소프트웨어 설치하듯이 exe 파일을 받아 일일히 클릭하여 업데이트 ..

https://inpa.tistory.com/entry/NODE-📚-NVM-모듈-사용법-노드-버전-관리

[Node.js] NVM 설치하고 노드 버전 관리하기, node.js 설치하기

1. What is NVM? NVM - Node Version Manager 말 그대로 노드의 버전을 관리해주는 것. 추후에 업데이트를 하거나, 협업 또는 프로젝트를 진행할 때 서로 다른 버전의 노드를 사용한다거나 할 때 버전 명시, 관리가 모두 이루어지기 때문에 거의 필수라고 볼 수 있다. 굳이 필요하지 않다면 NVM 없이 Node.js를 사용해도 무방하다. 기존에 node가 설치되어있다면, NVM 설치 전에 삭제하는 것을 권장한다. (귀찮은 일 방지) 또한 nvm을 이용한 버전 관리(변경 등)중 모든 터미널은 관리자 권한으로 실행해줘야 한다. 1-1. NVM 설치하기 https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/..

https://chaeyami.tistory.com/5

설치 확인까지 마쳤다면 ts-node를 이용해 타입스크립트 파일을 실행하겠습니다. 다음 명령어를 터미널에 입력합니다. 앞서 tsc를 이용했을 때와 비교해 tsc 명령어를 ts-node로 교체한 것 과 같습니다.

코드를 불러오는 중 입니다 ...

그 결과 자바스크립트 파일을 생성하지 않고 한번에 타입스크립트 파일을 실행합니다. 이렇듯 ts-node를 이용하면 보다 쉽게 한번의 명령어로 타입스크립트를 실행할 수 있습니다. 언제 tsc를 사용하고 ts-node를 사용하는지에 대해서는 이후에 더 자세히 다룹니다. 지금은 두가지 방법으로 타입스크립트를 실행할 수 있으며 두 방법에 어떤 차이가 있는지만 알고 있으면 됩니다.

PREV타입스크립트의 동작 원리

NEXT타입스크립트 컴파일러 옵션 설정하기