[TypeScript] 타입스크립트 설치 및 환경설정 (tsc-watch)

1. Visual Studio Code 새 폴더 열기 

 

2. npm init하기 

npm init

-> package.json 파일 생김 

 

 

3. TypeScript 설치 

npm install -g typescript

https://www.npmjs.com/package/typescript

typescript

 

 

 

4. index.ts 파일 생성 , tsconfig.json 파일 생성 

tsconfig.json 에 환경설정 코드 추가 

{
    "compilerOptions": {
        "module":"commonjs", // node.js를 평범하게 사용하고 다양한import /export 가능하게 하는 
        "target":"ES2015",  // 어떤 버젼의 JS 로 컴파일 되고 싶은지 적기 
        "sourceMap":true, // sourcemap 처리하고 싶은지 
    },
    // 어떤 파일들이 컴파일 과정에 포함되는지 TypeScript에게 알려주기 
    // include : 컴파일 과정에 포함할 파일의 배열 적기 <-> exclude
    "include":["index.ts"],
    "exclude":["node_modules"], // default로 해놓으면 편하다. 
}

 

 

5. index.ts 파일에 코드 임의로 넣고 컴파일 해보기  

console.log('hi')

이제 index.ts 를 -----------compile----------> index.js  로 만들기 

 

터미널에 tsc 입력  (Type Script Compiler) 

tsc 

=> index.js 와 index.js.map 파일이 생긴다 

 

 

 

6. tsc 대신 다른 명령어 사용하도록 코드 작성

 

npm start를 작성하면 매번 컴파일 되도록 작성

"start":"node index.js" -> 이것만 쓰면 아직 컴파일 된 상태가 X -> 컴파일 해줘야함 

"prestart":"tsc"  까지 적어주면 npm이 start 할 때 prestart 명령어를 먼저 실행하고 ㄱㄱ함! 

{
  "name": "typescript_download_settings",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"node index.js",
    "prestart":"tsc"
  },
  "author": "",
  "license": "ISC"
}

 

 

 

7.  실행하기 

npm start 

터미널에 npm start를 입력하면 index.ts 가 잘 컴파일되어서 js로 인식하고 return 해준다. 

Node.js는 TypeScript를 못 읽음 ****  => 꼭 컴파일 해줘야함 ! 

 

 

 

 

컴파일 방법은 끝 ! 

 

 

 

8. 변화가 있을 때마다 자동 컴파일 되도록 만들기 (tsc-watch 사용) 

컴파일 할 파일 / 한 파일 정리하기  [ tsc-watch] 

 

1) src, dist 폴더 생성 

src : 모든 TypeScript 파일들

dist : 모든 컴파일 된 파일들

 

npm install tsc-watch --save-dev

2) package.js 수정

{
  "name": "typescript_download_settings",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "tsc-watch --onSuccess \" node dist/index.js\" "
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tsc-watch": "^4.4.0"
  }
}

3) tsconfig.json  수정

{
    "compilerOptions": {
        "module":"commonjs", // node.js를 평범하게 사용하고 다양한import /export 가능하게 하는 
        "target":"ES2015",  // 어떤 버젼의 JS 로 컴파일 되고 싶은지 적기 
        "sourceMap":true, // sourcemap 처리하고 싶은지 
        "outDir":"dist"
    },
    // 어떤 파일들이 컴파일 과정에 포함되는지 TypeScript에게 알려주기 
    // include : 컴파일 과정에 포함할 파일의 배열 적기 <-> exclude
    "include":["src/**/*"],
    "exclude":["node_modules"] // default로 해놓으면 편하다. 
}

"outDir" 출력파일 경로 

 

4) index.ts 파일을 src 폴더 안에 넣기 

아까 컴파일된 index.js / indes.js.map 은 삭제 ! 

 

 

5) 이제 npm start를 하고 코드 수정을 하면 수정될 때마다 dist의 컴파일된 파일도 실시간으로 수정된다. 

 

 

 

---

 

 

 

타입스크립트 vs 자바스크립트 특징 / 타입스크립트가 편리한 이유 

https://blckchainetc.tistory.com/303

[타입스크립트 vs 자바스크립트] TypeScript vs JavaScript