TypeScript를 설치하기 위해서는 우선 Node.js를 설치해야 한다. Node.js를 설치하면 노드 패키지 관리자인 npm을 얻을 수 있고 npm을 통해서 Typescript를 설치하는 것이다.
❓
npm이란?
npm은 Node Package Manager의 약어로 노드 패키지 매니저를 의미한다.
JavaScript의 런타임 환경인 Node.js의 package(module) 관리자 역할을 한다.
package(module)은 작은 단위의 기능들을 말하는데 이 package(module)을 설치하고 버전 업데이트 등의 관리를 한다.
2.1.1 Node.js 설치
Node.js를 설치하기 위해서는 홈페이지에 들어가서 다운로드하면 된다. 아래 링크는 다운받을 수 있는 링크이다.
홈페이지에 들어가게 되면 다음과 같은 페이지가 보인다. 두 버튼 중에 LTS(Long Term Support)인 왼쪽 버튼을 눌러 다운로드 받으면 된다. LTS는 오랫동안 지원했기에 보다 안정적이다.
설치창이 나오면 변경하는 사항없이 그대로 다음을 눌러 Node.js 다운로드를 완료한다.
2.1.2 npm으로 TypeScript 설치
VS Code(Visual Studio Code)에서 터미널을 연 후, 다음과 같은 명령어를 작성한다.
npm init을 하여 프로젝트 폴더 안에 package.json파일을 생성하게 된다. npm init을 입력하게 되면 프로젝트 명과 같은 속성을 입력하라고 나오는데 엔터를 계속하여 초기값으로 설정한다.
이 파일내에 설정되는 것들을 바탕으로 프로젝트의 모든 속성들이 초기설정된다.
npm init
그 다음에 npm install typescript 명령어를 입력하여 TypeScript를 설치한다.
npm install typescript
💡
해당 프로젝트에서만 타입스크립트를 사용하는 것이 아니라 전역으로 사용하고 싶은 경우에는 -g를 추가하여 설치하면 된다.
npm install -g typescript
❓
MacOS를 사용하는 경우 권한이 없어 설치가 안될 수 있다. 그럴 경우 명령어 앞에 sudo를 붙여서 설치한다.
sudo npm install typescript
명령어를 작성하면 package가 추가되어 TypeScript 설치가 완료되었다.
설치가 되었는지 확실히 확인하기 위해서 tsc -v를 입력해보자. 타입스크립트의 버전을 확인할 수 있는 명령어이다.
tsc -v
2.2 TypeScript 실행하기
2.2.1 TypeScript 파일 생성
새 파일로 파일명.ts라고 이름을 만들어 파일을 생성한다.
아래에서는 예시로 test.ts라고 이름을 만들어 파일을 생성했다. 파일 안에는 다음과 같은 간단한 코드를 작성해주었다.
function my_profile(name: string, age: number){
console.log('제 이름은 '+name+'이고 제 나이는 '+age+'살 입니다.');
}
my_profile('혜지', 27);
2.2.2 TypeScript 컴파일러 실행
TypeScript 파일은 브라우저에서 읽지 못하기 때문에 JavaScript 파일로 변환하는 과정을 거쳐야 한다.
즉, TypeScript 파일을 실행시키기 위해서는 JavaScript 파일로 컴파일 해야한다. 컴파일할 때는 폴더 내 경로로 진입하거나 컴파일 하는 파일의 경로를 올바르게 하여 오류가 나지 않도록 주의한다.
💡
파일을 통해 바로 터미널로 진입하고 싶다면 아래 사진처럼 마우스 오른쪽 버튼을 누르고 ‘통합 터미널에서 열기’를 누르면 된다.
컴파일하기 위해서는 터미널에 tsc 파일명.ts 이라고 명령어를 입력하면 되고 그 결과 JavaScript 파일이 생성된 것을 확인할 수 있다.
tsc test.ts
만들었던 test.ts 파일 위에 test.js 파일이 생성된 것이 확인된다.
아래 두 코드 중 위는 Typescript 코드고, 아래는 그로부터 컴파일된 Javascript 코드이다.
두 코드를 비교했을 때 가장 다른 점은 Typescript에서는 함수 my_profile 의 매개변수의 타입을 표기해준다는 것이다. 컴파일을 하면 타입이 명시되었던 부분이 사라지는데 이 부분에 관해서는 다음장인 타입에서 제대로 알아본다.
function my_profile(name: string, age: number){
console.log('제 이름은 '+name+'이고 제 나이는 '+age+'살 입니다.');
}
my_profile('혜지', 27);
function my_profile(name, age) {
console.log('제 이름은 ' + name + '이고 제 나이는 ' + age + '살 입니다.');
}
my_profile('혜지', 27);
2.2.3 JavaScript 파일 실행
변환된 JavaScript 파일을 실행하기 위해서는 터미널에 다음과 같은 명령어를 입력하면 된다.
node 파일명.js 과 같은 명령어를 입력하면 JavaScript 파일이 실행된다.
node test.js
JavaScript 파일을 실행하니 결과가 터미널에 나온다.
2.3 자동화 하기
💡
지금까지 순서대로 TypeScript를 생성하고 실행하는 방법을 알아보았다. TypeScript를 실행하는 방법은 ‘JavaScript파일로 변환하기’와 ‘JavaScript파일 실행하기’로두 가지를 모두 해야 가능했다.
하지만 실제 개발할 때, 컴파일을 매번 해야하는 불편함이 있는데 이런 불편함을 줄여주는 툴이 존재한다.
2.3.1 ts-node 설치
ts-node는 TypeScript 파일을 전에 컴파일을 하지 않고 바로 실행하게 해주는 툴이다.
ts-node를 설치하기 위해서는 터미널에 다음과 같이 명령어를 입력해주면 된다.
npm install -g ts-node
❓
Mac Os를 사용하시는 독자는 권한에 대한 설정이 없어 설치가 안될 것이다. 그럴 경우 앞 명령어에 sudo를 붙여서 설치한다.
sudo npm install -g ts-node
터미널에서 명령어를 입력했고 package 추가가 되었다.
TypeScript 파일을 바로 실행하기 위해서는 터미널에 다음과 같은 명령어를 입력하면 된다.
ts-node [경로] 이렇게 입력하면 실행된다.
ts-node test.ts
TypeScript 파일을 수정 후 ts-node test.ts 명령어를 입력했고 컴파일 없이 바로 실행되어 결과를 출력하였다.
2.4 오류 해결하기
2.4.1 ‘중복된 함수 구현입니다’
JavaScript 파일로 컴파일 한 후에 TypeScript 파일 내에서 함수부분에 오류가 뜰 수도 있다.
💡 해결방안
이럴 때는 터미널에 tsc --init 명령어를 입력하면 해결된다. 일반적인 버그로 초기 설정이 되어 있지 않아서 생긴 오류이다. 간단하게 tsconfig.json의 초기설정을 하여 오류를 없애는 것이다.
tsc --init
명령어 입력 후 tsconfig.json파일이 생긴다. 다시 실행을 해보면 오류가 사라진 것을 확인할 수 있다.
🦁
지금까지 타입스크립트를 설치하고 파일생성, 자동화까지 구현해보았다.
다음 장에서는 타입을 알아보자!
