How To Setup TypeScript in VS Code

Setting up TypeScript in Visual Studio Code is a simple and easy process.

Follow these step-by-step instructions

1). Install Visual Studio Code (VS Code)

If you haven’t already, download and install Visual Studio Code from the official website Download VS Code

a). Download VS Code

Please follow the video provided below for Download VS Code.

b). Install VS Code

Please follow the video provided below for Installation.

2). Install Node.js and npm

TypeScript requires Node.js and npm (Node Package Manager) for installation. Download and install Node.js from the official website: https://nodejs.org/. npm is included with Node.js.

a). Download Node.js and npm

Please follow the video provided below for Download VS Code.

b). Install Node.js and npm

Please follow the video provided below for Installation.

3). Install TypeScript Globally

Open terminal or command prompt in your PC/Laptop press (Window + R) then open run popup type cmd hit enter then open command prompt shell and run the following command to install TypeScript Globally.

npm install -g typescript

Please follow the video provided below Install TypeScript Globally.

4). Create a new TypeScript Project

Create a new folder for your TypeScript project. Open VS Code and open the newly created folder in our case we open Project folder.

5). Initialize a new npm package

Open terminal in VS Code press (Ctrl + ~ ). In the terminal within VS Code, run the following command to initialize a new npm package

npm init -y

Please follow the video provided below initialize a new npm package.

6). Create a TypeScript file

Inside your project folder, create a new file with a .ts extension.

For example app.ts.

Please follow the video provided below for Create a TypeScript file.

7). Write TypeScript Code

Write your TypeScript code in the .ts file you created and copy the code and past your app.ts file code given below.

For example

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

console.log(greeter(user));

Copy and past our given code in your app.ts file after code past then press (Ctrl + S) for save file.

Follow our Video

8). Compile TypeScript to JavaScript

To compile your TypeScript code to JavaScript, use the TypeScript compiler (tsc). In the terminal.

Note: Press (Ctrl + ~) for open terminal if your terminal close in VS Code

Run the following command.

tsc app.ts

This will generate a corresponding app.js file in the same directory.

Follow our video

9). Run Js File In VS Code

You can now run your compiled JavaScript code file using Node.js. In the VS Code terminal. Just run this command given below.

node app.js

Follow Our Video

10). Configure VS Code to use TypeScript(Optional)

You can configure VS Code to recognize TypeScript files and provide IntelliSense support. Create a tsconfig.json file in your project folder and add the following minimal configuration.

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "js_Files"
    }
}

This configuration specifies that TypeScript should compile to ES5 JavaScript, use CommonJS modules, and output files to a js_files directory. You can set your outDir folder/directry name like (“outDir”: “any_name“) write according to your project need.

Copy the given code and create tsconfig.json file and past our given code. Then type our given below command in terminal to compile TypeScript (ts) to JavaScript (js).

tsc

TypeScript Compiler (tsc) compile typescript code and place javascript compiled code in (js_files) folder/directry

Follow our video.

11). Run the TypeScript code

You can now run your compiled JavaScript code using Node.js. In the VS Code terminal, navigate to your project directory and run command given below.

node js_Files/aap.js

js_Files is specific directry/folder inside directry have javascript compiled file app.js.

Replace app.js with the name of your compiled JavaScript file.

Follow this video

That’s it!

You’ve successfully set up TypeScript in Visual Studio Code. You can now write and compile TypeScript code within your projects.