TypeScript Beginner Tutorial 2 | Project Setup

Introduction

This tutorial is designed for beginners looking to set up a TypeScript development environment. By following these steps, you will install the necessary tools, create a project in Visual Studio Code, and get started with TypeScript.

Step 1: Download and Install Node.js

• Visit the Node.js website.
• Download the LTS version suitable for your operating system.
• Follow the installation prompts.
• After installation, verify the installation by running the following commands in your terminal:

  node -v
  npm -v
  

Step 2: Install TypeScript Globally

• Open your terminal or command prompt.
• Run the following command to install TypeScript globally:

  npm install -g typescript
  

• Verify the installation by checking the TypeScript version:

  tsc -v
  

Step 3: Download and Install Visual Studio Code

• Go to the Visual Studio Code website.
• Download the version that matches your operating system.
• Install it following the provided instructions.

Step 4: Configure Visual Studio Code

• Open Visual Studio Code.

• Install the following extensions:

  • JavaScript support
  • TypeScript support
  • Code Runner (for running your code easily)

  You can search for these in the Extensions view (Ctrl+Shift+X).

Step 5: Create a New Project Folder

• Create a new folder on your computer where you want to store your TypeScript project.
• Open Visual Studio Code.
• Use the "Open Folder" option to select your newly created folder.

Step 6: Create JavaScript and TypeScript Files

• Inside the folder, create a new JavaScript file (e.g., script.js) and a TypeScript file (e.g., script.ts).
• You can create files by right-clicking in the Explorer pane and selecting "New File".

Step 7: Initialize Node.js Project

• Open the terminal in Visual Studio Code (Ctrl + `).
• Run the following command to initialize a new Node.js project:

  npm init -y
  

• This command creates a package.json file with default settings.

Step 8: Install TypeScript Locally

• In the same terminal, run the following command to install TypeScript locally:

  npm install typescript
  

Step 9: Verify Local TypeScript Installation

• Check if TypeScript is installed locally by running:

  npx tsc -v
  

Conclusion

You have successfully set up your TypeScript development environment! You can now start coding in TypeScript and run your projects directly from Visual Studio Code. As a next step, consider exploring TypeScript features and best practices to enhance your programming skills. Happy coding!