🧰 TypeScript Tutorial – Learn TypeScript from Scratch with Design, Symbols & Links

---

🚀 Introduction to TypeScript

TypeScript is a typed superset of JavaScript developed by Microsoft that compiles down to plain JavaScript. It’s like JavaScript, but with superpowers. 🦸‍♂️

• ✅ Adds static typing
• ✅ Offers modern OOP features
• ✅ Helps catch bugs early
• ✅ Enhances editor tooling and code navigation

🔗 Learn more about TypeScript

---

⚙️ Setting Up TypeScript

🧰 Install Node.js and npm

👉 Download from https://nodejs.org
After installation, open terminal:

node -v
npm -v

📦 Install TypeScript Globally

npm install -g typescript

🧪 Verify Installation

tsc -v

📝 Create a TypeScript File

touch hello.ts

Add some code:

let message: string = "Hello, TypeScript!";
console.log(message);

Then compile:

tsc hello.ts

---

📦 TypeScript Basics

✅ Compiling TypeScript

Use tsc filename.ts to compile your file into JavaScript.

🔁 Watch Mode

tsc -w

This watches for file changes and compiles automatically.

---

🔢 Variables and Data Types

let age: number = 25;
let username: string = "DevUser";
let isLoggedIn: boolean = true;

📊 Data Types

• string
• number
• boolean
• any
• void
• null / undefined

🔗 Official TypeScript Data Types

---

🔁 TypeScript Functions

function greet(name: string): string {
  return `Hello, ${name}`;
}

📥 Optional Parameters

function log(message: string, user?: string) {
  console.log(`${user || "System"}: ${message}`);
}

---

🏗️ Interfaces and Type Aliases

📐 Interface

interface User {
  id: number;
  name: string;
}

🏷️ Type Alias

type ID = number | string;

🔗 Interfaces vs Types

---

👷 Classes and Object-Oriented Programming

class Car {
  constructor(public brand: string, private speed: number) {}

  accelerate(): void {
    this.speed += 10;
  }
}

---

🔐 Access Modifiers

• public – accessible anywhere
• private – accessible within class
• protected – accessible within class and subclasses

🔍 Example:

class Person {
  public name: string;
  private age: number;
}

---

🧱 Generics in TypeScript

function identity<T>(arg: T): T {
  return arg;
}

Use generics to build reusable components with type safety.

---

📁 Modules and Namespaces

📦 Modules

// file: user.ts
export const name = "Alex";

// file: main.ts
import { name } from "./user";

🗂️ Namespaces

namespace Utils {
  export function log(msg: string) {
    console.log(msg);
  }
}

---

🧩 Enums and Tuples

🔢 Enum

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

📦 Tuple

let user: [string, number] = ["Alice", 25];

---

🔍 Type Inference and Assertions

📊 Type Inference

let score = 100; // TypeScript infers number

📌 Type Assertion

let someValue: any = "hello";
let strLength: number = (someValue as string).length;

---

🧪 TypeScript vs JavaScript

Feature	JavaScript	TypeScript
Static Typing	❌	✅
Compilation Needed	❌	✅
Object-Oriented	🔶 Partial	✅ Full
Code Suggestions	🔸 Limited	✅ Rich

🔗 Why TypeScript Over JavaScript

---

🧰 Best Practices

✅ Use interfaces instead of any
✅ Organize code with modules
✅ Always use explicit types
✅ Enable strict mode in tsconfig.json
✅ Prefer const and let over var

---

🏁 Conclusion

TypeScript is like JavaScript with a safety net 🎯 — it helps you write better code, faster. From small side projects to large enterprise applications, TypeScript ensures scalability and maintainability. Start simple, and before you know it, you’ll be shipping solid apps with confidence! 🚀

---

❓ FAQs

Q1: Can I use TypeScript with React?
🅰️ Absolutely! Use create-react-app with --template typescript.

Q2: Is TypeScript backward compatible with JavaScript?
🅰️ Yes, every .js file is a valid .ts file.

Q3: How do I run TypeScript in the browser?
🅰️ Compile it to JavaScript and include the output .js in your HTML.

Q4: What are the benefits of TypeScript?
🅰️ Better tooling, early error detection, and improved maintainability.

Q5: Is TypeScript hard to learn?
🅰️ Not really! If you know JavaScript, TypeScript is a smooth upgrade.

---

Share Now :