1. What is TypeScript really? (The Honest Explanation)
TypeScript is JavaScript + superpowers.
More precisely:
- TypeScript = JavaScript + static types + better developer experience
- You write code that looks almost like modern JavaScript
- But you add type annotations → the computer checks your code before it runs
- After checking, TypeScript compiler converts your .ts file → normal .js file
- Browsers / Node.js never see TypeScript — they only run the generated JavaScript
Most important sentence you should remember today:
TypeScript doesn’t add new runtime features (almost). It adds safety checks before the program runs.
2. Why should you learn TypeScript in 2025–2026?
Real-world reasons:
- Almost all new big React, Angular, Next.js, NestJS projects use TypeScript
- Big companies (Google, Microsoft, Meta, Vercel, Shopify…) mostly write TypeScript
- You catch 70–90% of silly bugs before the app even starts
- Much better autocompletion in VS Code / WebStorm
- Refactoring large codebases becomes 10× safer
- Teamwork becomes much easier — new developers understand the code faster
3. Let’s Set Up TypeScript (5 minutes)
Option 1: Quick playground (recommended for learning now) Go to: https://www.typescriptlang.org/play You can write TypeScript right in the browser — no installation needed.
Option 2: Local setup (do this later today or tomorrow)
Bash
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
# 1. Create project folder mkdir my-ts-project cd my-ts-project # 2. Initialize npm project npm init -y # 3. Install TypeScript npm install --save-dev typescript # 4. Create tsconfig.json (very important file) npx tsc --init |
Now open tsconfig.json and make sure it has at least these useful settings:
JSON
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "compilerOptions": { "target": "ES2022", "module": "ESNext", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "outDir": "./dist", "rootDir": "./src" }, "include": ["src/**/*"] } |
Create file src/index.ts and write your first code.
4. Your Very First TypeScript Code
Let’s write JavaScript first — then improve it with TypeScript.
JavaScript version (can have bugs):
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 |
function greet(name) { return "Hello " + name.toUpperCase(); } console.log(greet("Alice")); // Hello ALICE console.log(greet(123)); // TypeError: 123.toUpperCase is not a function |
Same code — now with TypeScript:
TypeScript
|
0 1 2 3 4 5 6 7 8 9 10 11 |
function greet(name: string) { return "Hello " + name.toUpperCase(); } console.log(greet("Alice")); // ✅ Works // console.log(greet(123)); // ❌ Error immediately in editor! |
See the magic?
As soon as you write : string, VS Code / TypeScript tells you:
Argument of type ‘number’ is not assignable to parameter of type ‘string’.
You catch the bug before running the code.
5. Basic Types (The Building Blocks)
Here are the most common types you will use every day:
TypeScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// Basic / Primitive types let age: number = 25; let name: string = "Sachin"; let isAdult: boolean = true; let height: number | null = 175; // Union type (can be number OR null) // Any — avoid this as much as possible! let data: any = 123; data = "hello"; // No error — dangerous! data = true; // No error — very dangerous! // Unknown — safer than any let mystery: unknown = 4; mystery = "hello"; // You must check/narrow it before using if (typeof mystery === "string") { console.log(mystery.toUpperCase()); // ✅ OK now } |
6. Arrays & Tuples
TypeScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// Array of strings let fruits: string[] = ["apple", "banana", "mango"]; // Alternative syntax (very common) let scores: Array<number> = [89, 92, 78]; // You can mix types — but better to avoid let mixedBad: (string | number)[] = ["hello", 42, "world"]; // Tuple = fixed length + fixed types let person: [string, number, boolean] = ["Rahul", 28, true]; // person[0] → string // person[1] → number // person[2] → boolean // person.push("extra"); // Allowed — but breaks tuple idea (careful!) |
7. Objects — Two Main Ways
Way 1: Inline type annotation
TypeScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
let student: { name: string; age: number; isPass: boolean; skills?: string[]; // ? = optional } = { name: "Priya", age: 22, isPass: true // skills: ["React", "Node"] // optional — can skip }; |
Way 2: Create reusable type / interface (Recommended!)
TypeScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
interface Student { name: string; age: number; isPass: boolean; skills?: string[]; readonly rollNo: number; // cannot change later } let std1: Student = { name: "Aman", age: 21, isPass: false, rollNo: 101 }; // std1.rollNo = 200; // ❌ Error — readonly! |
Difference — type vs interface (quick version)
TypeScript
|
0 1 2 3 4 5 6 7 8 9 10 11 |
type Point = { x: number; y: number }; // type alias interface Animal { name: string; eat(): void; } // interface (can be extended easily) |
Most people use interface for objects, type for unions / primitives / complex combinations.
8. Functions — Very Important
TypeScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// Simple function function add(a: number, b: number): number { return a + b; } // Optional parameter function welcome(name: string, greeting?: string): string { return `${greeting ?? "Hello"}, ${name}!`; } // Default parameter (works same as JS) function log(message: string = "Info"): void { console.log(`[${message}] Logging...`); } // Function type type MathOperation = (x: number, y: number) => number; const multiply: MathOperation = (a, b) => a * b; |
9. Union Types & Type Narrowing
TypeScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function printId(id: string | number) { // console.log(id.toUpperCase()); // ❌ Error — number has no toUpperCase if (typeof id === "string") { console.log(id.toUpperCase()); // ✅ TypeScript knows it's string now } else { console.log(id.toFixed(2)); // ✅ TypeScript knows it's number } } |
10. Quick Summary Table (Keep this in mind)
| Feature | Syntax Example | Purpose |
|---|---|---|
| Basic type | : string, : number | Tell what value is allowed |
| Array | string[] or Array<string> | List of same type |
| Tuple | [string, number] | Fixed length & fixed types |
| Object | interface User { name: string } | Describe shape of object |
| Union | string |
number |
| Optional | age?: number | Property may not exist |
| Readonly | readonly id: number | Cannot re-assign |
| Literal type | status: "active" |
"inactive" |
Homework for Today
- Go to https://www.typescriptlang.org/play
- Try to write these functions with types:
TypeScript
|
0 1 2 3 4 5 6 7 8 9 10 |
// 1. Function that takes product name & price → returns formatted string formatProduct("iPhone 16", 799.99) // → "iPhone 16 - $799.99" // 2. Function that accepts user object and prints welcome message greetUser({ name: "Neha", age: 24, isPremium: true }) |
- Make one intentional mistake (pass number instead of string) and see the red underline
Tomorrow we can go deeper: classes, generics, enums, type guards, React with TypeScript, etc.
Any doubt? Want to focus on any particular part right now? Just tell me — we’ll zoom in! 😄
