TypeScript to JavaScript Setup and Debugging Guide

This guide explains how to set up a simple TypeScript project, transpile .ts files to .js, and enable debugging in Visual Studio Code.

Initial Setup

1. Initialize the project:

   npm init -y

2. Install TypeScript:

   npm install typescript --save-dev

3. Create a TypeScript configuration file:

   npx tsc --init

4. Modify tsconfig.json: [see from the project source]

   • Set the output directory for compiled JavaScript files by updating "outDir".
   • Enable debugging by setting "sourceMap": true.

   Example:

   {
     "compilerOptions": {
       "outDir": "./build",
       "sourceMap": true
     }
   }

File Structure

Ensure your project has the following structure:

project-root/
├── src/
│   └── main.ts
├── build/
├── package.json
├── tsconfig.json

Transpile TypeScript to JavaScript

1. Compile manually:

   npx tsc

   This will compile all .ts files in the src folder into .js files in the build folder.

2. Compile in watch mode:

   npx tsc --watch

   This will recompile files whenever changes are detected.

3. Add NPM scripts for convenience: Update the scripts section in package.json:

   "scripts": {
     "build": "npx tsc",
     "watch": "npx tsc --watch"
   }

   You can now run:

   npm run build
   npm run watch

Enable Debugging in VSCode

1. Set sourceMap to true in tsconfig.json:

   {
     "compilerOptions": {
       "sourceMap": true
     }
   }

2. Configure VSCode:

   • Open VSCode and navigate to Run -> Add Configuration.
   • Select Node.js as the environment.
   • This will create a launch.json file under the .vscode folder.

3. Update launch.json: Example configuration:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "node",
         "request": "launch",
         "name": "Launch Program",
         "skipFiles": ["<node_internals>/**"],
         "program": "${workspaceFolder}/build/main.js",
         "outFiles": ["${workspaceFolder}/build/**/*.js"],
         "sourceMaps": true
       }
     ]
   }

4. Debugging Steps:

   • Open the Run and Debug view in VSCode.
   • Select the Launch Program configuration.
   • Set breakpoints in your .ts files.
   • Start debugging by pressing F5.

By following these steps, you can seamlessly transpile TypeScript to JavaScript and debug TypeScript files in Visual Studio Code.