1️⃣ Install Node.js and npm (Prerequisite)
TypeScript runs on Node.js, so you need to install Node.js and npm (Node Package Manager) first.
🔹 Step 1: Check if Node.js is installed
Open the terminal or command prompt and run:
node -v
If you see a version number, Node.js is already installed. If not, download and install Node.js from the official website:
🔗 https://nodejs.org/
👉 npm (Node Package Manager) is installed automatically with Node.js. You can check its version with:
npm -v
2️⃣ Install TypeScript Using npm
Once Node.js is installed, you can install TypeScript globally on your system using npm.
🔹 Step 2: Install TypeScript
Run the following command in your terminal:
npm install -g typescript
✔ -g flag installs TypeScript globally, so you can use it in any project.
🔹 Step 3: Verify the Installation
To check if TypeScript is installed correctly, run:
tsc -v
If you see a TypeScript version number, the installation is successful. 🎉
3️⃣ Setting Up a TypeScript Project
To use TypeScript in a project, follow these steps:
🔹 Step 4: Create a Project Folder
Navigate to your preferred directory and create a new folder for your project:
mkdir my-typescript-project
cd my-typescript-project
🔹 Step 5: Initialize a Node.js Project
To create a package.json file, run:
npm init -y
This file stores project information and dependencies.
4️⃣ Create and Configure TypeScript Project
Now, set up TypeScript for your project.
🔹 Step 6: Create a TypeScript Configuration File
Run the following command to generate a tsconfig.json file:
tsc --init
This file contains the TypeScript compiler settings.
🔹 Key Settings in tsconfig.json
Here are some important options you may see in the tsconfig.json file:
{
"compilerOptions": {
"target": "ES6", // Converts TypeScript to ES6 JavaScript
"module": "CommonJS", // Uses CommonJS module system
"outDir": "./dist", // Outputs compiled JavaScript files in 'dist' folder
"rootDir": "./src", // Stores TypeScript files in 'src' folder
"strict": true // Enables strict type checking
}
}
✔ You can modify these settings based on your project requirements.
5️⃣ Writing and Compiling TypeScript Code
Now, let’s write and run a simple TypeScript program.
🔹 Step 7: Create a TypeScript File
Inside your project folder, create a new folder src, then add a file called index.ts:
mkdir src
cd src
touch index.ts
Open index.ts and add this code:
let message: string = "Hello, TypeScript!";
console.log(message);
🔹 Step 8: Compile TypeScript Code
To convert the TypeScript file (.ts) to JavaScript (.js), run:
tsc
✔ This will generate a dist/index.js file that you can run in Node.js or a browser.
6️⃣ Running the Compiled JavaScript Code
Once compiled, run the JavaScript file using Node.js:
node dist/index.js
✔ You should see:
Hello, TypeScript!
🎉 Congratulations! You have successfully installed and set up TypeScript.
7️⃣ Installing TypeScript Locally (Optional)
If you don’t want to install TypeScript globally, you can install it only for a specific project.
🔹 Step 9: Install TypeScript Locally
Inside your project folder, run:
npm install --save-dev typescript
✔ This adds TypeScript as a development dependency.
👉 To use TypeScript locally, modify your package.json file:
"scripts": {
"build": "tsc"
}
Now, you can compile TypeScript using:
npm run build
✔ This method is useful for team projects to ensure everyone uses the same TypeScript version.