Why TypeScript?
Imagine you're building an e-commerce site. A customer adds a product to their cart, but your code accidentally passes the product name where it expected the price. In JavaScript, you won't know until a customer complains about seeing "iPhone 15" as the total.
TypeScript catches these bugs before your code runs.
JavaScript vs TypeScript
// JavaScript - No errors until runtime 💥
function calculateTotal(price, quantity) {
return price * quantity;
}
calculateTotal("49.99", 2); // Returns "49.9949.99" - oops!// TypeScript - Caught immediately ✅
function calculateTotal(price: number, quantity: number): number {
return price * quantity;
}
calculateTotal("49.99", 2); // ❌ Error: Argument of type 'string' is not assignable to parameter of type 'number'Benefits for E-commerce Development
| Benefit | Example |
|---|---|
| Catch bugs early | Wrong type passed to addToCart() |
| Better autocomplete | See all properties of a Product object |
| Self-documenting code | Types explain what data looks like |
| Safer refactoring | Rename a field, find all usages instantly |
---
Getting Started
Option 1: Quick Start with VS Code (Recommended)
Step 1: Install [VS Code](https://code.visualstudio.com/) if you haven't already. Step 2: Create a new folder for your project and open it in VS Code. Step 3: Open the terminal (` Ctrl+ `) and run:
npm init -y
npm install typescript --save-dev
npx tsc --init
Step 4: Create your first TypeScript file product.ts:
interface Product {
name: string;
price: number;
}
const iphone: Product = {
name: "iPhone 15",
price: 999
};
console.log(`${iphone.name} costs ${iphone.price}`);
Step 5: Compile and run:
npx tsc product.ts
node product.js
---
Option 2: Online Playground (Zero Setup)
Visit the [TypeScript Playground](https://www.typescriptlang.org/play) to write TypeScript directly in your browser. Perfect for experimenting!
---
Option 3: Vite + React + TypeScript (For React Projects)
npm create vite@latest my-shop -- --template react-ts
cd my-shop
npm install
npm run dev
This sets up a complete React + TypeScript project instantly.
---
VS Code Extensions (Highly Recommended)
- Error Lens - Shows errors inline, right where they occur
- Pretty TypeScript Errors - Makes error messages human-readable
- TypeScript Importer - Auto-imports as you type
---
Your First Type Annotation
In TypeScript, you add types after a colon:
// Variable with type
let productName: string = "MacBook Pro";
let price: number = 1999;
let inStock: boolean = true;
// TypeScript can also infer types automatically
let quantity = 5; // TypeScript knows this is a number
---
Try It Yourself
Create a file called
cart.ts with:
let itemName: string = "Wireless Headphones";
let itemPrice: number = 79.99;
let quantity: number = 2;
let total: number = itemPrice * quantity;
console.log(`${quantity}x ${itemName} = ${total}`);
Compile and run it:
npx tsc cart.ts && node cart.js
You should see:
2x Wireless Headphones = $159.98`
---
What's Next?
In the next lesson, we'll explore all the basic types TypeScript offers and use them to model real e-commerce data like products, prices, and inventory.