[Typescript] Typescript 환경을 구성해보자

💡Typescript는 Javascript에 type을 입힌 언어이며 Typescript로 작성한 code를 javascript로 compile해 그 결과물을 프로젝트에서 사용한다. compile할 때 compile 옵션을 설정해야 하며 이런 option은 tsconfig.json이라는 파일에서 설정이 가능하다. 

---

 

🚀지금부터 기본적인 Typescript 환경을 구성해보려고 한다. 

 

1. 타입 스크립트를 설치한다. 

-> npm install typescript [ --save or --save-dev or -g ]  

 

2. tsconfig.json 생성 및 compile 옵션 설정 ( ts -> js 로 compile시 옵션을 tsconfig.json에 작성 )

->  참고 ) 프로젝트 최상단에 tsconfig.json을 생성하는 것이 좋다

 

 

//tsconfig.json
{
    "compilerOptions":{
        "allowJs": true,
        // ts compile시 js file이 있을 시 js도 그대로 쓰겠다는 옵션
        "target":"ES6",
        // ts -> js로 변환시 js es6문법 사용
        "outDir": "built",
        // ts -> js로 변환된 결과물이 어디에 생성될 지 경로 지정 
        "moduleResolution": "Node",
        // moduleResolution 은 가장 typescript community에서 흔히 사용되는 resolution
        // default 값인 node 이며 , classic 이라는 옵션도 존재 
        "lib": ["ES2015","DOM","DOM.Iterable"],
        // 타입스크립트 파일을 자바스크립트로 컴파일 할 때 포함될 라이브러리
        // Promise를 사용하기 위해서 ES2015이상의 library 사용 필요  
        "noImplicitAny": true,
        // true 로 할 시 type이 정해지지 않았을 때 error 표기
    },
    "include": ["src/**/*"],
    // src 하위 폴더의 file만 compile 하겠다
    // 다른 예시) src폴더 하위 .ts파일만 compile하겠다.
    "exclude": ["node_modules","bower_components","jspm_packages","outDir"]
    // compile 제외할 폴더 설정 
    // 명시하지 않으면 default 값은 node_modules,bower_components,jspm_packages,outDir 이다
}

 

※다양한 compilerOptions 알고 싶다면 아래 공식페이지를 참조하자

https://www.typescriptlang.org/docs/handbook/compiler-options-in-msbuild.html 

 

3. terminal에 명령어 입력을 통해 compile 진행 

tsc

참고) tsc -v : typescript version확인 

참고) 하단에 PowerShell extension이 안깔려 있을 경우 compile이 진행 안될 수 있다.

 

4. 결과 확인하기 

src/ts/ 에 작성한 ts file 3개가 js로 compile 된 뒤 ourtdir에서 설정한 경로로 생성된 것을 볼 수 있다.