Installing TypeScript Step by step guide for beginner

• Step 1: Install Node.js
• Step 2: Install TypeScript
• Step 3: Create a TypeScript file
• Step 4: Compile the TypeScript file
• Step 5: Run the JavaScript file
• Step 6: Install the TypeScript Extension for Visual Studio Code
• Step 7: Configure VS Code to use TypeScript
• Special Tips

Installing TypeScript is a relatively straightforward process. Here’s a step-by-step tutorial on how to install TypeScript and how to add it as an extension in Visual Studio Code.

¶Step 1: Install Node.js

Before installing TypeScript, you’ll need to install Node.js, which includes npm (Node Package Manager). You can download and install the latest version of Node.js from the official website: https://nodejs.org/en/.

¶Step 2: Install TypeScript

Once Node.js is installed, open a terminal (or command prompt) and run the following command to install TypeScript globally:

npm install -g typescript

This will install the latest version of TypeScript on your machine. You can verify that TypeScript is installed correctly by running the following command:

tsc --version

¶Step 3: Create a TypeScript file

Now that TypeScript is installed, let’s create a simple TypeScript file to test it out. TypeScript file extension is .ts. Open your favorite text editor (or IDE) and create a new file called hello.ts.

function sayHello(name: string) {
    console.log(`Hello, ${name}!`);
}

let myName = "TypeScript";
sayHello(myName);

¶Step 4: Compile the TypeScript file

To compile the hello.ts file into JavaScript, open a terminal (or command prompt) and navigate to the directory where the file is located. Then, run the following command:

tsc hello.ts

This will compile the hello.ts file into a new file called hello.js.

¶Step 5: Run the JavaScript file

Now that the hello.js file has been generated, we can run it with Node.js. Run the following command to execute the file:

node hello.js

This should output the message “Hello, TypeScript!” to the console.

¶Step 6: Install the TypeScript Extension for Visual Studio Code

To make working with TypeScript even easier, you can install the TypeScript extension for Visual Studio Code. To do this, open VS Code and navigate to the Extensions view (Ctrl + Shift + X on Windows, Cmd + Shift + X on macOS).

In the search bar, type “TypeScript” and press Enter. The TypeScript extension should be the first result. Click the Install button to install the extension.

Once the extension is installed, you should see a new TypeScript icon in the left-hand sidebar of VS Code.

¶Step 7: Configure VS Code to use TypeScript

By default, VS Code will try to use the version of TypeScript that is installed globally on your machine. However, you can configure VS Code to use a specific version of TypeScript for your project.

To do this, open the command palette (Ctrl + Shift + P on Windows, Cmd + Shift + P on macOS) and type “TypeScript: Select TypeScript Version”. Press Enter, and you should see a list of available TypeScript versions. Select the version that you want to use for your project.

That’s it! You’re now ready to start using TypeScript in your projects. With the TypeScript extension for VS Code installed, you’ll get additional features such as syntax highlighting, code completion, and error checking.

¶Special Tips

If we use TypeScript in React or Vue or Next JS project, then it’s pretty simple. Just install the typescript node module for dev environment -

npm i typescript --dev

And in React, Vue, Angular, Next JS you don’t had to worry about compiling every time, they had built in support to compile and process that TypeScript file.