TypeScript 설치및 환경설정

😸  TypeScript 설치및 환경설정

안녕하세요 TriplexLab 입니다.

오늘은 TypeScript 설치관한 이야기를 해보도록 하겠습니다. 😀

Node.js

공식 사이트에 들어가서 보면 다음과 같은 2가지 버전을 선택하여 다운로드 할수 있습니다.

왼쪽에 있는 LTS는 'Long Term Support'의 줄임말로 'Node.js 커뮤니티에 의해 장기간 지원받을 수 있는 버전'이라는 뜻입니다. LTS 버전이 되면, 그 뒤로 30개월 동안은 해당 버전에서 발견되는 각종 버그 등에 대한 패치(수정)를 Node.js 커뮤니티로부터 보장받을 수 있습니다. LTS 버전은 프로그램의 안정성 등에 집중해서 실제 서비스용으로 배포하기 위한 용도로 관리되는 버전인 것입니다. 따라서 실 서비스에서 Node.js를 사용하려는 분들은 이 LTS 버전을 사용해야 합니다.

이에 반해, Current 버전은 안정성보다는 새로운 기능 추가 등에 집중하기 위한 용도로 관리되는 버전입니다. 일부러 Current 버전을 설치해서 새롭게 추가된 기능을 실험해볼 수도 있겠지만, 일반적인 경우에는 LTS 버전을 설치해서 사용하면 됩니다. 

저는 LTS를 설치하였습니다. 그리고 터미널에서에 가서

node -v  //명령어 실행

결과)
v10.10.0

npm -v  //명령어 실행

결과)
6.4.1

NPM은 Node Package Manager의 약자로 node.js에서 사용하는 모듈들을 패키지로 만들어
npm을 통하여 관리하고 배포하고 있습니다.

NodeJS를 설치하면 노드 패키지 관리자 인 NPM을 자동으로 설치가 됩니다.

필요한 모듈이 있다면 npm 을 통해서 간편하게 다운받을수 있습니다.

🎯 TypeScript 설치

npm init -y

$ npm install -D typescript
$ npm install -D ts-node

 

TypeScript가 설치되면 package.json 파일에서 버전을 확인하십시오.

 

🎯 TypeScript를 사용하여 .TS 파일을 .JS 파일로 변환하기

(Visual Studio Code 에서 실행하세요)

예를 들어 프로젝트 폴더 예제가 있고 자바스크립트 파일로 변환하려는 index.ts TypeScript 파일이 있습니다.

index.ts 파일의 내용은 다음과 같습니다.

//index.ts

let mayName:string = "cool";
let mayNumber:number = 1;

index.ts 파일을 index.js 파일로 변환하기 위해 package.json 파일에 다음과 같이 수정해주세요.

// package.json 

"scripts": {
    "build": "tsc"
},

그리고 tsconfig.json 파일을 만들고 다음과 같이 작성해주세요.
(더 다양한 옵션들이 있습니다. 직접한번 검색해서 찾아보세요👍👍 )

//tsconfig.json
{
    "compilerOptions": {
      "target": "es5",      //* 사용할 특정 ECMAScript 버전 설정: 'ES3' (기본), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 혹은 'ESNEXT'. */
      "module": "commonjs", //* 모듈을 위한 코드 생성 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    }
}

그리고 터미널에서 다음과 같은 커맨드를 작성해주세요.

// 터미널
npm run build

결과)

index.ts 파일 위에 index.js이 만들어진것을 확인할수 있다.

🎯 TypeScript 제거

TypeScript를 전역 적으로 제거하기 위해 다음 명령을 사용합니다.

$ npm uninstall -D typescript
$ npm uninstall -D ts-node

(권한이없는 경우 sudo를 사용해야 할 수도 있습니다.)

🎯 TypeScript 실시간 입력하면 자동으로 변환하기

자동으로 index.ts 파일을 index.js 파일로 변환하기 위해서는 
package.json 파일에 다음과 같이 수정해주세요. (-w 옵션을 추가로 넣어주시면 됩니다.)

// package.json 

"scripts": {
    "build": "tsc -w"
},

그리고 터미널에서 다음과 같은 커맨드를 작성해주세요.

// 터미널
npm run build

 지금까지 TypeScript 설치및 환경설정애 관해서 살펴봤습니다.
최근에 부적이나 TypeScript가 개발자들 사이에서 급상승되고 있는것 같네요 😀

이런 반응이 오래도록 지속되었으면 좋겠습니다.👏👏

지금까지 위에서 해본것을 파일로 제공해드립니다.
직접 다운받아서 한번 테스트를 해보세요~
(참고로 node_modules 파일은 제거했습니다.
터미널에서 npm install 라서 작성하시면 바로 테스트 해볼수 있습니다.)

TS.zip

0.00MB