Typescript – Configuring, Compiling and Debugging – 02

To Compile Typescript project

Method 1 :
1. Create a tsconfig.json file into source folder
2. Add the compiler options in tsconfig file like sourcemap:true, outDir:./dist….
3. Create a app.ts file
4. Run “tsc -p tsconfig.json” inside the project folder

Method 2 :
1. run npm init
2. Create a app.ts file
3. Add the tsconfig.json file

{
  "compilerOptions": {
    "lib": ["es5", "es6", "dom"],
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "moduleResolution": "node",
    "jsx": "react"
  },
  "include": ["./**/*"],
  "exclude": ["node_modules", "**/*.test.ts"]
}

4. To take build run the command : tsc –build, this will create a “app.js” and “app.js.map” files into dist folder
5. To clean run the command : tsc –build –clean

Method 3 :
1. run npm init
2. Create a app.ts file
3. Add the tsconfig.json file

{
  "compilerOptions": {
    "lib": ["es5", "es6", "dom"],
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "moduleResolution": "node",
    "jsx": "react"
  },
  "include": ["./**/*"],
  "exclude": ["node_modules", "**/*.test.ts"]
}

4. Install the package “npm install –save -dev rimraf”
6. add the script into package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc --build",
    "clean": "tsc --build --clean",
    "develop": "rimraf ./build && tsc"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "rimraf": "^3.0.2"
  }
}

7. To take build run the command : npm run develop, this will erase and create new a “app.js” and “app.js.map” files into dist folder

Debugging – VSCode

Debug Method 1 :
1. Press Ctr+Shift+P
2. Select “Tasks:Configure Task”
3. Select Task to Configure from dropdown list, it will show the available NPM commands from “Package.json”(start,build,…)
4. In the “tasks.json” file verify tsconfig, type…etc
5. Add the debugger in .ts file
6. Run the package.json’s execution command Ex : npm run start

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "/**"
            ],
            "program": "${workspaceFolder}\\app.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ]
        }
    ]
}

tasks.json

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "typescript",
			"tsconfig": "../../../../D:/Local/Proj/test/tsconfig.json",
			"problemMatcher": [
				"$tsc"
			],
			"group": "build",
			"label": "tsc: build - ../../../../D:/Local/Proj/test/tsconfig.json"
		}
		
	]
}

Debug Method 2 :
1. Define the run script in package.json

"scripts": {
    "start": "nodemon --exec ts-node src/index.ts"    
  }

2. click the debug icon from package.json file (above the script )

Reference

A. The Easiest Way (with Parcel)
B. The Way of Fewest Tools (or the do-it-yourself way) – tsconfig.json : Separate your program’s front-end code from its build configuration and app server.
C. The Webpack way

How to set up a TypeScript project – 3 Type Approach
How to set up a TypeScript project – 2
Link1 Visual