타입 스크립트 프로젝트 만들기

타입 스크립트 dir 를 선택합니다. 

 

vsCode 의 터미널에서 다음 명령을 차례대로 실행합니다.

 

• mkdir "filename"
• cd "filename"
• npm init --y
• package.json 은 node.js 가 관리하는 패키지 관리 파일로서 프로젝트 정보와 관련 패키지가 기록됩니다.

다른 개발자의 컴퓨터에 typescript와 ts-node 패키지가 설치되어 있지 않을 수도 있기에 이를 고려해

 

--> npm i -D typescipt ts-node 

 

package.json 에 등록합니다.

 

Promise와 같은 타입을 사용하려면 @types/node 라는 패키지를 설치해야 합니다.

 

--> npm i -D @types/node

 

tsconfig.json 파일 만들기

 

--> tsc -- init

 

json파일을 열어보면 실제 개발을 진행하는데 필요한 많은 옵션이 비활성화 되어있습니다. 

필요한 옵션만 간략하게 설정합니다.

 

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es5",
    "moduleResolution": "node",
    "outDir": "dist",
    "baseUrl": ".",
    "sourceMap": true,
    "downlevelIteration": true,
    "noImplicitAny": false,
    "paths": {"*": ["node_modules/*"]}
  },
  "include": ["scr/**/*"]
}

 

src 디렉터리와 소스 파일 만들기

 

--> mkdir -p src/utils

 

그리고 파일을 만들어줍니다.

 

--> touch src/index.ts

 

* 시작 소스 파일명을 index로 짓는 이유

• node 나 ts-node로 소스 파일을 실행하려면 ts.node ./src/index.ts 명령을 사용합니다.
• 하지만 소스 파일명이 index이면 파일명을 생략하고 단순히 ts-node ./src로 실행할 수 있습니다.
• 이 때문에 프로젝트의 시작 함수 (엔트리 함수라고 합니다.)가 있는 소스 파일명은 보통 index로 짓습니다. python으로 따지면    (main 이랑 비슷한 개념)

package.json 수정

타입스크립트 프로젝트를 개발할 때는 ts-node를 사용하지만, 막상 개발이 완료되면 타입스크립트 소스코드를 ES5 자바스크립트 코드로 

 

변환해 node로 실행해야 합니다. 이를 위해 다음처럼 package.json 파일을 열고 dev와 build 명령을 추가합니다.

 

{
  "name": "File_name",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "dev": "ts-node src",
    "build": "tsc && node dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^14.14.10",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.2"
  }
}

 

이 명령들은 npm run 명령 형태로 사용합니다. 다음 명령을 실행해 src 디렉터리에 있는 index.ts 파일을 컴파일 하고 실행합니다.

 

--> npm run dev

 

dist 디렉터리와 ES5로 컴파일된 js 파일을 생성하려면 

 

--> npm run build