How to Install and Setup TypeScript in Visual Studio Code

To install and set up TypeScript in Visual Studio Code (VS Code), follow these steps:

Step 1: Install Node.js and npm

TypeScript is typically installed via npm (Node Package Manager), so you need to install Node.js first if you don’t already have it.

1. Go to the Node.js website and download the latest stable version.
2. After installing, verify that both Node.js and npm are installed correctly by running these commands in your terminal:

   node -v   # Shows the Node.js version
   npm -v    # Shows the npm version

Step 2: Install TypeScript Globally

To install TypeScript globally on your machine, run the following command in your terminal:

npm install -g typescript

This installs the TypeScript compiler (tsc) globally, so you can use it from any project.

To verify the installation, run:

tsc -v  # Shows the TypeScript version

Step 3: Install TypeScript in a Specific Project (Optional)

If you want to install TypeScript for a specific project rather than globally, navigate to your project folder and run:

npm install --save-dev typescript

This will add TypeScript as a development dependency in your project.

Step 4: Set Up a TypeScript Project

1. Initialize a TypeScript configuration file (tsconfig.json) in your project directory by running:

   tsc --init

This creates a tsconfig.json file that defines the TypeScript compiler options. You can modify the options in this file to suit your project’s needs.

2. Example of tsconfig.json:

   {
     "compilerOptions": {
       "target": "ES6",
       "module": "commonjs",
       "strict": true,
       "esModuleInterop": true,
       "skipLibCheck": true,
       "forceConsistentCasingInFileNames": true
     },
     "include": ["src/**/*"],
     "exclude": ["node_modules"]
   }

• target: Specifies which JavaScript version you want to compile down to (e.g., ES5, ES6).
• module: Defines the module system (e.g., commonjs, esnext).
• strict: Enables strict type checking.
• include: Specifies the files or folders to include in the compilation.
• exclude: Specifies the files or folders to exclude.

Step 5: Write TypeScript Code in VS Code

1. Create a .ts file in your project (e.g., index.ts).
2. Write TypeScript code, for example:

   function greet(name: string): string {
       return `Hello, ${name}!`;
   }

   console.log(greet("World"));

Step 6: Compile TypeScript to JavaScript

To compile your TypeScript code to JavaScript, open the terminal and run the tsc command:

tsc

This command compiles all .ts files in the project (based on tsconfig.json) into JavaScript files. If no errors are found, the compiled .js files will be generated.

Step 7: Run the Compiled JavaScript

You can run the compiled JavaScript using Node.js or in a browser, depending on your project setup. If you’re using Node.js, run:

node index.js

Step 8: Enable TypeScript Support in VS Code

By default, Visual Studio Code has built-in support for TypeScript, but you can enhance the experience by installing the TypeScript language extension:

1. Open Extensions Panel: In VS Code, press Ctrl+Shift+X to open the Extensions panel.
2. Search for “TypeScript” and make sure the TypeScript and JavaScript Language Features extension is installed (it’s usually installed by default).
3. Install Additional Extensions (Optional): You might also want to install some additional extensions, such as:

• ESLint: For linting and code formatting.
• Prettier: For automatic code formatting.

Step 9: Configure Auto-Compilation in VS Code (Optional)

To have VS Code automatically compile TypeScript files whenever you save them, follow these steps:

1. Open the Command Palette by pressing Ctrl+Shift+P.
2. Search for and select Tasks: Configure Default Build Task.
3. Select tsc: build - tsconfig.json from the list.

Now, whenever you run the build task (Ctrl+Shift+B), it will automatically compile your TypeScript files.

Summary of Steps:

1. Install Node.js (and npm).
2. Install TypeScript globally (npm install -g typescript).
3. (Optional) Install TypeScript in your project (npm install --save-dev typescript).
4. Create a tsconfig.json file (tsc --init).
5. Write your TypeScript code in .ts files in VS Code.
6. Compile your TypeScript code to JavaScript using the tsc command.
7. Run the compiled JavaScript in Node.js or a browser.
8. Optionally, configure VS Code to auto-compile TypeScript on save.