[Typescript] 개발환경 설치하기

Typescript란 javascript의 danamically typed한 성질을 statically typed로 정의해 놓은 것이다.

타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다. 위키백과

우선 Typescript의 기본 개발환경을 설정해 보겠다.

 

기본적으로 node.js와 vscode가 설치되어있다고 가정한다. 만약 설치가 안되어있다면

출처: https://mine-it-record.tistory.com/500[나만의 기록들:티스토리]

해당 블로그를 참고하기 바란다.

 

일단 기본적으로 vscode에 Typescript가 기본적으로 설치가 되어있을것이다.

 

windows라면 Ctrl + ,  mac 이라면 comand + , 를 입력후 stric Null 이라고 검색하여

implicit Project Config : Strick Null Checks 를 클릭하여 엄격하게 Null체크를 하여 프로젝트를 진행하도록 하자.

vscode 터미널 입력창에

#npm intall -g typescript

글로벌하게 타입스크립트를 설치를 한다.

설치가 잘 되어있다면

#tsc -v

입력하여 설치된 버전을 확인한다.

이제 프로젝트에 타입 스크립트를 init 해주도록 하자.

 

#tsc --init

 

위와같은 tsconfig.json파일이 생겼을 것이다.

 

일단 기본적인 설정을 잡아보자

tsconfig.json

{
    "compilerOptions": {
        "strict": true,
        "module": "commonjs",
        "moduleResolution": "node",
        "lib": ["es2015","es2016","es2017","es2018","es2019","es2020"],
        "target": "ES5",
        "outDir": "./dist",
        "esModuleInterop": true
    },
    "exclude": ["node_modules"],
    "include": ["src/**/*"]
}

 

후에 프로젝트에 test.ts파일을 생성해보자.

 

 

해당 프로젝트의 경로로 이동 후 

 

#tsc test.ts

를 입력하면 바벨과 비슷하게 test.js가 트랜스파일되어 생긴다.

 

해당 test.ts파일을 계속적으로 수정하면 test.js파일은 변경이 되지 않지만.

 

#tsc test.ts -w

옵션을 주면 test.ts파일을 계속 감지하여 test.js로 트랜스파일 해준다.

 

마지막으로 ts-node라는 라이브러리를 설치할 것인데. 이녀석은 ts파일을 js로 변경하지 않고도 바로바로 ts코드를 실행해주는 녀석이다.

 

#npm install -g ts-node

해당 라이브러리를 설치 후 

 

ts-node test.ts를 입력하면 ts파일을 컴파일하여 동작하게 해준다.