본문 바로가기
TypeScript

[TypeScript] Starting the TypeScript Project

by yonikim 2021. 10. 6.
728x90

 

1) Initial Setup

$ mkdir ${projectName}
$ cd ${projectName}

 

 

2) Setup Node.js package.json

$ npm init -y

 

 

3) Add TypeScript as a dev dependency

$ npm install typescript --save-dev

 

 

4) Install ambient node.js types for TypeScript

$ npm install @types/node --save-dev

 

 

5) Create a tsconfig.json

- tsconfig.json, is where we define the TypeScript compiler options

$ npx tsc --init

 

▷ tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2020",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false,
    "esModuleInterop": true,
  }
}

 

 

6) Create the src folder and create our first TypeScript file

$ mkdir src 
$ touch src/index.ts

 

▷ index.ts

console.log("Hello TypeScript")

 

 

7) Compiling our TypeScript

$ npx tsc

 

 

8) Useful configurations & scripts

$ npm install --save-dev ts-node nodemon

- ts-node, is for running TypeScript code directly without having to wait for it be compiled.

- nodemon, is to watch for changes to our code automatically restart when a file is changed.

 

▷ nodemon.json

{
  "watch": ["src"],
  "ext": ".ts,.js",
  "ignore": [],
  "exec": "ts-node ./src/index.ts"
}

 

▷ package.json

{
  "name": "${projectName}",
  "version": "0.0.1",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start:dev": "nodemon"
  },
  "author": "yonikim",
  "devDependencies": {
    "nodemon": "^2.0.15",
    "ts-node": "^10.4.0",
    "typescript": "^4.4.4"
  }
}

 

 

9) Creating production builds

$ npm install --save-dev rimraf

 

▷ package.json

{
  "name": "${projectName}",
  "version": "0.0.1",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rimraf ./build && tsc",
    "start:dev": "nodemon"
  },
  "author": "yonikim",
  "devDependencies": {
    "nodemon": "^2.0.15",
    "rimraf": "^3.0.2",
    "ts-node": "^10.4.0",
    "typescript": "^4.4.4"
  }
}

 

 

10) Production startup script

▷ package.json

{
  "name": "${projectName}",
  "version": "0.0.1",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rimraf ./build && tsc",
    "start": "npm run build && node build/index.js",
    "start:dev": "nodemon"
  },
  "author": "yonikim",
  "devDependencies": {
    "nodemon": "^2.0.15",
    "rimraf": "^3.0.2",
    "ts-node": "^10.4.0",
    "typescript": "^4.4.4"
  }
}
728x90

'TypeScript' 카테고리의 다른 글

[Nest.js] 버전 별로 스웨거 관리  (0) 2023.01.11
[TypeORM] 데코레이터 - Entity  (1) 2022.09.19
[Nest.js] Custom Decorator  (0) 2022.04.12
[Nest.js] Custom Interceptor  (0) 2022.04.11
[Nest.js] NestJS 프레임워크 사용하기  (0) 2021.10.06