How to initialize a typescript project

This article will show how to initialize a typescript project from 0.

Click to visit the git repository , click to download the code package

initialization

First, we select a folder, and then execute the npm init -y command in the folder to initialize the project.

 anjie@panjies-Mac-Pro typescript-init % npm init -y
Wrote to /Users/panjie/github/yunzhiclub/typescript-init/package.json:

{
  "name": "typescript-init",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/yunzhiclub/typescript-init.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/yunzhiclub/typescript-init/issues"
  },
  "homepage": "https://github.com/yunzhiclub/typescript-init#readme"
}

This command will generate a package.json file for us:

 panjie@panjies-Mac-Pro typescript-init % tree
.
├── README.md
└── package.json

0 directories, 2 files

install typescript

Next, we use npm i typescript --save-dev to install ts :

 panjie@panjies-Mac-Pro typescript-init % npm i typescript --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN typescript-init@1.0.0 No description

+ typescript@4.6.4
added 1 package from 1 contributor and audited 1 package in 2.22s
found 0 vulnerabilities

typescript initialization

After ts is installed, we also need an initialization operation, which will generate the configuration file of ts by default. The corresponding command is npx tsc --init

 panjie@panjies-Mac-Pro typescript-init % npx tsc --init

Created a new tsconfig.json with:                                               
                                                                             TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig.json

This command will automatically generate tsconfig.json for us. If you want to make some customizations, you only need to open this file and find the corresponding item to modify or enable.

index.ts

After the basic initialization work is completed, you can create index.ts and test the code.

 'use strict';

const hello = (world: string) => {
  console.log(`hello ${world}`);
}

hello('world');

compile and run

After the file is created, compile and run:

 panjie@panjies-Mac-Pro typescript-init % npx tsc index.ts
panjie@panjies-Mac-Pro typescript-init % node index.js
hello world

Compile and run automatically

Compiling and running manually every time a change is documented is fine, but it's unbearable. tsc-watch is designed for this purpose, run npm install tsc-watch --save-dev to install tsc-watch :

 panjie@panjies-Mac-Pro typescript-init % npm install tsc-watch --save-dev
npm WARN typescript-init@1.0.0 No description

+ tsc-watch@5.0.3
added 20 packages from 16 contributors and audited 21 packages in 3.788s
found 0 vulnerabilities

After the installation is complete, we open the package.json file and add the following dev item in scripts 8dc0d68937e1a152be8db1e49ba7508f---:

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "tsc-watch --noClear -p ./tsconfig.json --onSuccess \"node ./index.js\""
  },

Then we run on the command line npm run dev to achieve the purpose of recompiling and rerunning when the file changes.

run ts directly

If we don't feel good enough, we can also use nodemon to run ts file directly:

 npm install nodemon --save-dev
npm install --save-dev ts-node
npm install --save-dev tslib  
npm install --save-dev @types/node

After the installation is complete, you can use npx nodemon index.ts to run the ts file directly.

The final example package.json is as follows:

 {
  "name": "mockapi",
  "version": "1.0.0",
  "description": "mock api",
  "repository": "",
  "main": "index.js",
  "engines": {
    "node": "14.16.1"
  },
  "scripts": {
    "build": "npx tsc",
    "run": "node dist/index.js",
    "dev": "concurrently \"npx tsc --watch\" \"nodemon -q dist/index.js\"",
    "start": "npx nodemon index.ts",
    "test": "npx nodemon test.ts"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
  },
  "devDependencies": {
    "@types/node": "^18.0.0",
    "concurrently": "^7.2.2",
    "nodemon": "^2.0.16",
    "ts-node": "^10.8.1",
    "tslib": "^2.4.0",
    "typescript": "^4.7.4"
  }
}

Reference documentation

• https://www.digitalocean.com/community/tutorials/typescript-new-project
• https://www.npmjs.com/package/tsc-watch