In this section, we will guide you through the process of setting up your development environment for TypeScript. By the end of this module, you will have a fully functional TypeScript environment ready for coding.

TypeScript requires Node.js and npm (Node Package Manager) to be installed on your machine. Follow these steps to install them:

1. Download Node.js:

   • Visit the Node.js official website.
   • Download the LTS (Long Term Support) version for your operating system.

2. Install Node.js:

   • Run the downloaded installer and follow the installation instructions.
   • Ensure that the installer also installs npm.

3. Verify Installation:

   • Open your terminal or command prompt.
   • Run the following commands to verify the installation:

     node -v
     npm -v
     

   • You should see the version numbers of Node.js and npm.

Once Node.js and npm are installed, you can install TypeScript globally using npm:

1. Install TypeScript:

   • Open your terminal or command prompt.
   • Run the following command:

     npm install -g typescript
     

2. Verify Installation:

   • Run the following command to verify the installation:

     tsc -v
     

   • You should see the version number of TypeScript.

Now that TypeScript is installed, let's set up a basic TypeScript project:

1. Create a Project Directory:

   • Open your terminal or command prompt.
   • Create a new directory for your project and navigate into it:

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

2. Initialize a Node.js Project:

   • Run the following command to create a package.json file:

     npm init -y
     

3. Install TypeScript Locally:

   • Although we installed TypeScript globally, it's a good practice to install it locally in your project as well:

     npm install --save-dev typescript
     

4. Create a tsconfig.json File:

   • The tsconfig.json file is used to configure the TypeScript compiler options.

   • Run the following command to generate a default tsconfig.json file:

     tsc --init
     

   • This will create a tsconfig.json file with default settings. You can customize this file as needed.

Let's write a simple TypeScript program to ensure everything is set up correctly:

1. Create a TypeScript File:

   • In your project directory, create a new file named index.ts:

     touch index.ts
     

2. Write TypeScript Code:

   • Open index.ts in your favorite code editor and add the following code:

     function greet(name: string): string {
       return `Hello, ${name}!`;
     }
     
     const user = 'World';
     console.log(greet(user));
     

3. Compile TypeScript to JavaScript:

   • Run the following command to compile index.ts to index.js:

     tsc
     

   • This will generate an index.js file in the same directory.

4. Run the JavaScript File:

   • Run the following command to execute the compiled JavaScript file:

     node index.js
     

   • You should see the output: Hello, World!

To reinforce what you've learned, try the following exercise:

1. Create a new TypeScript file named calculator.ts.
2. Write a function that takes two numbers and an operator (+, -, *, /) and returns the result.
3. Compile the TypeScript file and run the resulting JavaScript file.

1. Create calculator.ts:

   function calculate(num1: number, num2: number, operator: string): number | string {
     switch (operator) {
       case '+':
         return num1 + num2;
       case '-':
         return num1 - num2;
       case '*':
         return num1 * num2;
       case '/':
         return num2 !== 0 ? num1 / num2 : 'Cannot divide by zero';
       default:
         return 'Invalid operator';
     }
   }
   
   const result = calculate(10, 5, '+');
   console.log(result); // Output: 15
   

2. Compile and Run:

   tsc calculator.ts
   node calculator.js
   

In this section, you have successfully set up your TypeScript environment, created a basic TypeScript project, and written your first TypeScript program. You are now ready to dive deeper into TypeScript and explore its powerful features. In the next module, we will cover the basic types in TypeScript.