# TypeScript Day 1 – From Zero to Tuples 🚀 Welcome to **Day 1 of learning TypeScript**! 🎉 If you’re coming from JavaScript (especially React, Next.js, or Node.js), this series will help you gradually build a strong foundation in TypeScript while keeping it practical and beginner-friendly. Today, we’ll cover: - What TypeScript is - Basic types (`string`, `number`, `boolean`) - Arrays - Union types - Tuples --- ## 🌟 What is TypeScript? TypeScript (TS) is **JavaScript + types**. It doesn’t replace JS — instead, it compiles down to plain JS. The **type system** catches errors before your code runs, making apps safer and easier to maintain. Example: ```ts let age: number = 25; age = "hello"; // ❌ Error: Type 'string' is not assignable to type 'number' ``` In JS this would run (and probably cause bugs), but TS stops you early. ✅ --- ## 🔤 Core Types ```ts let name: string = "Ram"; let isAdmin: boolean = true; let score: number = 42; ``` Notice how we use lowercase `string`, `boolean`, and `number`. (Capitalized `String`, `Boolean`, and `Number` exist but represent object wrappers — almost never what you want.) 👉 **Pro tip:** `number` in TS includes both integers and decimals. If you want *only whole numbers*, you’ll need to validate at runtime: ```ts function setScore(score: number) { if (!Number.isInteger(score)) { throw new Error("Score must be a whole number"); } console.log("Score set to:", score); } setScore(42); // ✅ Works setScore(42.5); // ❌ Throws error ``` ### 📝 Quiz – Core Types How would you declare a variable `city` that must always be a string?

Show Answer

```ts let city: string = "Delhi"; ```

--- ## 📚 Arrays Arrays in TypeScript are just like JavaScript, but with **types enforced**. ```ts let scores: number[] = [10, 20, 30]; let names: string[] = ["Ram", "Sita"]; ``` Alternative syntax: ```ts let names: Array = ["Ram", "Sita"]; ``` ### Union Arrays Sometimes you want an array that can hold more than one type: ```ts let mixed: (string | number)[] = ["Ram", 42, "Sita"]; ``` Here each element can be a `string` **or** `number`. ### 📝 Quiz – Arrays Create an array `flags` that can hold both `boolean` and `number` values.

Show Answer

```ts let flags: (boolean | number)[] = [true, 0, 1, false]; ```

--- ## 🎯 Tuples A **tuple** is like an array, but with a **fixed length** and **specific types** at each position. Example: ```ts let user: [string, number] = ["Ram", 25]; ``` - First element → string - Second element → number More readable with labels: ```ts let product: [name: string, inStock: boolean] = ["Phone", true]; ``` Another example: ```ts let point: [x: number, y: number] = [54, 65]; ``` And for multiple different fields: ```ts let userInfo: [username: string, age: number, isActive: boolean] = ["raj", 23, true]; ``` 👉 If you try adding an extra element, TS will complain: ```ts userInfo = ["raj", 23, true, "extra"]; // ❌ Error: too many elements ``` ### 📝 Quiz – Tuples Make a tuple `response` where the first element is a `number` (status code) and the second is a `string` (message).

Show Answer

```ts let response: [statusCode: number, message: string] = [200, "OK"]; ```

--- ## ✅ Wrap-up Today, you learned: - TypeScript basics (string, number, boolean) - Arrays and union arrays - Tuples with fixed types You also practiced quizzes **after every topic**, so you reinforce as you go. 🎉 Next session, we’ll dive into **enums** and **functions** in TypeScript. Stay tuned for **Day 2**!