Step-by-Step Setup

1. 1. 1. Open Visual Studio Code
         • Launch VSCode on your computer.
         • 
      2. Create a New Project Directory
         • Open a terminal in VSCode by going to View > Terminal or by pressing Ctrl + `.
         • Create a new directory for your project and navigate to it:

           • • mkdir my-typescript-project
               cd my-typescript-project

             •  
      3. Initialize npm
         • Run the following command to initialize a new npm project:

           • npm init -y

         • This command creates a package.json file with default settings.
         • 
      4. Install TypeScript:
         • Install TypeScript as a development dependency using npm:

           • npm install --save-dev typescript

           •  
         • Alternatively, you can install it globally with:

           • npm install -g typescript

           •  
      5. Initialize TypeScript Configuration
         • Run it to create a TypeScript configuration file (tsconfig.json).:

           • npx tsc --init

           •  
           • This command will generate a tsconfig.json file in your project directory where you can customize the TypeScript compiler options.
      6. Edit tsconfig.json (Optional)
         • Open the tsconfig.json file in VSCode and configure the compiler options as needed. Here is an example configuration:

           • {
                   "compilerOptions": { 
                        "target": "es2016",
                        "module": "commonjs",
                        "rootDir": "./src",
                        "outDir": "./dist",
                        "esModuleInterop": true,
                        "forceConsistentCasingInFileNames": true,
                        "strict": true,
                        "skipLibCheck": true
                   }
             }

           • This configuration targets ES2016, uses CommonJS modules, takes the input from src directory and outputs the compiled files to the dist directory.
           • Alternatively, you can create a simple .ts file instead of rootDir and outDir configuration in tsconfig.json.
      7. Create a TypeScript File:
         • Create a new TypeScript file (eg index.ts) in the project directory and add the sample code:

         • const greeting: string = "Hello, TypeScript!";
           console.log(greeting);

      8. Compile TypeScript Code:
         • To compile your TypeScript code to JavaScript, run the following command in a terminal:

           • npx tsc

         • This will create the corresponding JavaScript file (index.js) in the output directory specified in tsconfig.json.
         • Alternatively, you can also use the watch mode to detect changes in real time by running the following command:

           • tsc --watch

         • Note: If you’re using the src directory approach, you can run the TypeScript code with the same command.
      9. Run the Compiled JavaScript:
         • You can run the compiled JavaScript using Node.js:

           • node dist/index.js 

           •  

Conclusion:

1. You have successfully set up your TypeScript development environment in Visual Studio Code! Now you can start writing and compiling TypeScript code for your projects.
2. For more customization and learning, explore other TypeScript and VSCode extension features to enhance your development experience.