Complete TypeScript Tutorial

# Install TypeScript globally
npm install -g typescript

# Verify installation
tsc --version
# Output: Version 5.3.3 (or latest)

# Create project directory
mkdir my-typescript-project
cd my-typescript-project

# Initialize npm project
npm init -y

# Install TypeScript as dev dependency
npm install --save-dev typescript

# Create TypeScript config
npx tsc --init

// Define a function with typed parameters
function greet(name: string): string {
    return `Hello, ${name}!`;
}

// TypeScript will catch type errors
const message = greet("TypeScript");
console.log(message);

// This would cause a compile error:
// greet(42); // Error: Argument of type 'number' not assignable to 'string'

# Compile single file
tsc hello.ts
# Creates: hello.js

# Compile and watch for changes
tsc hello.ts --watch

# Compile with target ES version
tsc hello.ts --target ES2020

# Compile entire project using tsconfig.json
tsc

// Type annotations are removed
function greet(name) {
    return `Hello, ${name}!`;
}

const message = greet("TypeScript");
console.log(message);

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

// JavaScript - error only discovered when code runs
function calculateTotal(price, quantity) {
    return price * quantity;
}

// This looks fine but will cause issues
calculateTotal("50", "3"); // Returns "5050" instead of 150
calculateTotal(null, 5);   // Returns 0 (unexpected)
calculateTotal();          // Returns NaN (undefined * undefined)

// TypeScript catches errors before runtime
function calculateTotal(price: number, quantity: number): number {
    return price * quantity;
}

// TypeScript prevents these mistakes
calculateTotal("50", "3");  // ❌ Error: string not assignable to number
calculateTotal(null, 5);    // ❌ Error: null not assignable to number
calculateTotal();           // ❌ Error: expected 2 arguments

// Only correct usage compiles
calculateTotal(50, 3);      // ✅ Returns 150

// Define user structure with interface
interface User {
    id: number;
    name: string;
    email: string;
    role: 'admin' | 'user' | 'guest';
    createdAt: Date;
}

// Function with strong typing
function createUser(name: string, email: string): User {
    return {
        id: Date.now(),
        name,
        email,
        role: 'user',
        createdAt: new Date()
    };
}

// Type-safe array operations
const users: User[] = [];
users.push(createUser("Alice", "alice@example.com"));

// Autocomplete works perfectly
users[0].name; // ✅ IDE suggests: id, name, email, role, createdAt
users[0].age;  // ❌ Error: Property 'age' does not exist

// Early TypeScript was simpler
function greet(name: string): string {
    return "Hello, " + name;
}

interface Person {
    name: string;
    age: number;
}

// Modern TypeScript is incredibly powerful
type AsyncResult = Promise<{ data: T; error: null } | { data: null; error: Error }>;

function createFetcher>() {
    return async (url: string): AsyncResult => {
        try {
            const response = await fetch(url);
            const data = await response.json() as T;
            return { data, error: null };
        } catch (error) {
            return { data: null, error: error as Error };
        }
    };
}

// Decorators (Stage 3 standard)
function logged(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const original = descriptor.value;
    descriptor.value = function(...args: any[]) {
        console.log(`Calling ${propertyKey} with`, args);
        return original.apply(this, args);
    };
}

// String type for text values
let username: string = "Alice";
let email: string = 'alice@example.com';
let message: string = `Hello, ${username}!`; // Template literals

// Type inference - TypeScript infers string type
let city = "New York"; // type: string

city = "London";  // ✅ OK
city = 12345;     // ❌ Error: Type 'number' is not assignable to type 'string'

// Number type for all numeric values
let age: number = 25;
let price: number = 99.99;
let hexValue: number = 0xf00d;      // Hexadecimal
let binaryValue: number = 0b1010;   // Binary
let octalValue: number = 0o744;     // Octal

// Special numeric values
let infinity: number = Infinity;
let notANumber: number = NaN;

age = 26;      // ✅ OK
age = "26";    // ❌ Error: Type 'string' is not assignable to type 'number'

// Boolean type for true/false values
let isActive: boolean = true;
let hasPermission: boolean = false;

// From expressions
let isAdult: boolean = age >= 18;
let isEmpty: boolean = items.length === 0;

isActive = false;     // ✅ OK
isActive = "false";   // ❌ Error: Type 'string' is not assignable to type 'boolean'
isActive = 0;         // ❌ Error: Type 'number' is not assignable to type 'boolean'

// Syntax 1: Type[]
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob", "Charlie"];

// Syntax 2: Array (generic syntax)
let scores: Array = [95, 87, 92];
let tags: Array = ["typescript", "javascript"];

// Mixed types require union types
let mixed: (string | number)[] = ["age", 25, "name", "Alice"];

// Arrays of objects
let users: { name: string; age: number }[] = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 }
];

// Tuple: array with fixed length and specific types for each position
let person: [string, number] = ["Alice", 25];
let coordinate: [number, number] = [10.5, 20.3];

// Labeled tuples (TypeScript 4.0+)
let employee: [name: string, age: number, salary: number] = ["Bob", 30, 75000];

// Accessing tuple elements
console.log(person[0]); // "Alice" - type: string
console.log(person[1]); // 25 - type: number

// Type safety
person[0] = "Bob";     // ✅ OK
person[0] = 123;       // ❌ Error: Type 'number' is not assignable to type 'string'
person[2] = "extra";   // ❌ Error: Tuple of length 2 has no element at index 2

// Optional tuple elements
let point: [number, number, number?] = [10, 20]; // z-coordinate is optional

// any: No type safety - avoid when possible
let anything: any = "hello";
anything = 42;
anything = true;
anything.nonExistent(); // ✅ No error, but will crash at runtime!

// unknown: Type-safe alternative
let something: unknown = "hello";
something = 42;
something = true;

// Must check type before using
if (typeof something === "string") {
    console.log(something.toUpperCase()); // ✅ OK - type narrowed to string
}

something.toUpperCase(); // ❌ Error: Object is of type 'unknown'

// void: Function returns nothing
function logMessage(message: string): void {
    console.log(message);
    // No return statement
}

// Can explicitly return undefined
function doNothing(): void {
    return undefined; // ✅ OK
}

// never: Function never returns
function throwError(message: string): never {
    throw new Error(message);
    // Never reaches end
}

function infiniteLoop(): never {
    while (true) {
        // Runs forever
    }
}

// Exhaustiveness checking with never
type Shape = Circle | Square;

function getArea(shape: Shape): number {
    switch (shape.kind) {
        case "circle":
            return Math.PI * shape.radius ** 2;
        case "square":
            return shape.size ** 2;
        default:
            const _exhaustive: never = shape; // Ensures all cases handled
            return _exhaustive;
    }
}

// With strictNullChecks enabled (recommended)
let username: string = "Alice";
username = null;      // ❌ Error: Type 'null' is not assignable to type 'string'
username = undefined; // ❌ Error: Type 'undefined' is not assignable to type 'string'

// Explicitly allow null/undefined
let nullableString: string | null = "hello";
nullableString = null; // ✅ OK

let optionalString: string | undefined = "hello";
optionalString = undefined; // ✅ OK

// Both null and undefined
let flexible: string | null | undefined = "hello";
flexible = null;      // ✅ OK
flexible = undefined; // ✅ OK

// Optional properties (shorthand for | undefined)
interface User {
    name: string;
    email?: string; // Same as: email: string | undefined
}

const user: User = { name: "Alice" }; // ✅ OK - email is optional

// TypeScript infers types without explicit annotations
let inferredString = "Hello";    // type: string
let inferredNumber = 42;         // type: number
let inferredBoolean = true;      // type: boolean
let inferredArray = [1, 2, 3];   // type: number[]

// Function return type inferred
function add(a: number, b: number) {
    return a + b; // return type inferred as number
}

// Object type inferred
const person = {
    name: "Alice",
    age: 25
}; // type: { name: string; age: number }

// Best practice: Let TypeScript infer when obvious
let message = "Hello";          // ✅ Good - inference is clear
let message: string = "Hello";  // ⚠️ Redundant - type is obvious

Example: Basic Interface

// Define a simple interface
interface User {
    id: number;
    name: string;
    email: string;
    age: number;
}

// Use the interface
const user: User = {
    id: 1,
    name: "Alice Johnson",
    email: "alice@example.com",
    age: 28
};

// This will cause an error - missing 'age' property
const invalidUser: User = {
    id: 2,
    name: "Bob Smith",
    email: "bob@example.com"
    // Error: Property 'age' is missing
};

Example: Optional Properties

interface Product {
    id: number;
    name: string;
    price: number;
    description?: string;  // Optional property
    category?: string;     // Optional property
}

// Valid - optional properties can be omitted
const product1: Product = {
    id: 101,
    name: "Laptop",
    price: 999.99
};

// Also valid - optional properties included
const product2: Product = {
    id: 102,
    name: "Mouse",
    price: 29.99,
    description: "Wireless gaming mouse",
    category: "Accessories"
};

Example: Readonly Properties

interface Configuration {
    readonly apiKey: string;
    readonly apiUrl: string;
    timeout: number;
}

const config: Configuration = {
    apiKey: "abc123xyz",
    apiUrl: "https://api.example.com",
    timeout: 5000
};

// Valid - timeout is not readonly
config.timeout = 10000;

// Error - cannot modify readonly property
config.apiKey = "newkey123";  // Error!

// Readonly arrays
interface DataSet {
    readonly values: readonly number[];
}

const data: DataSet = {
    values: [1, 2, 3, 4, 5]
};

// Error - cannot modify readonly array
data.values.push(6);  // Error!

Example: Function Interfaces

// Interface for a function type
interface MathOperation {
    (a: number, b: number): number;
}

const add: MathOperation = (x, y) => x + y;
const subtract: MathOperation = (x, y) => x - y;

// Interface with multiple methods
interface Calculator {
    add(a: number, b: number): number;
    subtract(a: number, b: number): number;
    multiply(a: number, b: number): number;
    divide(a: number, b: number): number;
}

const calculator: Calculator = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b,
    divide: (a, b) => a / b
};

Example: Extending Interfaces

interface Person {
    name: string;
    age: number;
}

interface Employee extends Person {
    employeeId: number;
    department: string;
    salary: number;
}

const employee: Employee = {
    name: "John Doe",
    age: 30,
    employeeId: 12345,
    department: "Engineering",
    salary: 75000
};

// Multiple interface extension
interface Timestamped {
    createdAt: Date;
    updatedAt: Date;
}

interface AuditableEmployee extends Employee, Timestamped {
    lastModifiedBy: string;
}

const auditableEmployee: AuditableEmployee = {
    name: "Jane Smith",
    age: 28,
    employeeId: 67890,
    department: "Marketing",
    salary: 68000,
    createdAt: new Date("2024-01-01"),
    updatedAt: new Date("2024-06-15"),
    lastModifiedBy: "admin"
};

Example: Index Signatures

// String index signature
interface StringMap {
    [key: string]: string;
}

const translations: StringMap = {
    hello: "Hola",
    goodbye: "Adiós",
    thanks: "Gracias"
};

// Number index signature
interface NumberArray {
    [index: number]: number;
}

const fibonacci: NumberArray = [0, 1, 1, 2, 3, 5, 8, 13];

// Mixed with known properties
interface UserDatabase {
    [userId: string]: User;
    count: number;  // Known property must match index signature type
}

const userDb: UserDatabase = {
    "user_001": { id: 1, name: "Alice", email: "alice@example.com", age: 28 },
    "user_002": { id: 2, name: "Bob", email: "bob@example.com", age: 32 },
    count: 2
};

Example: Interface Merging

// First declaration
interface Settings {
    theme: string;
    language: string;
}

// Second declaration - automatically merged
interface Settings {
    fontSize: number;
    notifications: boolean;
}

// The merged interface has all properties
const appSettings: Settings = {
    theme: "dark",
    language: "en",
    fontSize: 14,
    notifications: true
};

// Useful for extending library types
interface Window {
    myCustomProperty: string;
}

window.myCustomProperty = "Hello World";

Example: Class Implementation

interface Vehicle {
    brand: string;
    model: string;
    year: number;
    start(): void;
    stop(): void;
}

class Car implements Vehicle {
    brand: string;
    model: string;
    year: number;

    constructor(brand: string, model: string, year: number) {
        this.brand = brand;
        this.model = model;
        this.year = year;
    }

    start(): void {
        console.log(`${this.brand} ${this.model} is starting...`);
    }

    stop(): void {
        console.log(`${this.brand} ${this.model} is stopping...`);
    }
}

const myCar = new Car("Toyota", "Camry", 2024);
myCar.start();  // Output: Toyota Camry is starting...

Example: Hybrid Types

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function createCounter(): Counter {
    const counter = function(start: number) {
        return `Counter started at ${start}`;
    } as Counter;

    counter.interval = 1000;
    counter.reset = function() {
        console.log("Counter reset");
    };

    return counter;
}

const myCounter = createCounter();
console.log(myCounter(0));  // Counter started at 0
console.log(myCounter.interval);  // 1000
myCounter.reset();  // Counter reset

Example: Basic Class

class Person {
    // Properties
    name: string;
    age: number;

    // Constructor
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    // Method
    greet(): string {
        return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;
    }
}

// Creating instances
const person1 = new Person("Alice", 28);
const person2 = new Person("Bob", 32);

console.log(person1.greet());  // Hello, my name is Alice and I'm 28 years old.
console.log(person2.greet());  // Hello, my name is Bob and I'm 32 years old.

Example: Access Modifiers

class BankAccount {
    public accountNumber: string;      // Accessible everywhere
    private balance: number;            // Only within this class
    protected owner: string;            // This class and subclasses

    constructor(accountNumber: string, owner: string, initialBalance: number) {
        this.accountNumber = accountNumber;
        this.owner = owner;
        this.balance = initialBalance;
    }

    // Public method to access private balance
    public getBalance(): number {
        return this.balance;
    }

    public deposit(amount: number): void {
        if (amount > 0) {
            this.balance += amount;
            console.log(`Deposited $${amount}. New balance: $${this.balance}`);
        }
    }

    private validateTransaction(amount: number): boolean {
        return amount > 0 && amount <= this.balance;
    }

    public withdraw(amount: number): boolean {
        if (this.validateTransaction(amount)) {
            this.balance -= amount;
            console.log(`Withdrew $${amount}. New balance: $${this.balance}`);
            return true;
        }
        console.log("Invalid transaction");
        return false;
    }
}

const account = new BankAccount("123456", "Alice", 1000);
console.log(account.accountNumber);  // OK: public
console.log(account.getBalance());   // OK: accessing via public method
// console.log(account.balance);     // Error: private
// console.log(account.owner);       // Error: protected

Example: Constructor Shorthand

// Long form
class Product {
    name: string;
    price: number;
    category: string;

    constructor(name: string, price: number, category: string) {
        this.name = name;
        this.price = price;
        this.category = category;
    }
}

// Shorthand - much cleaner!
class ProductShort {
    constructor(
        public name: string,
        public price: number,
        public category: string
    ) {}
}

const product = new ProductShort("Laptop", 999.99, "Electronics");
console.log(product.name);  // Laptop

Example: Getters and Setters

class Temperature {
    private _celsius: number;

    constructor(celsius: number) {
        this._celsius = celsius;
    }

    // Getter
    get celsius(): number {
        return this._celsius;
    }

    // Setter with validation
    set celsius(value: number) {
        if (value < -273.15) {
            throw new Error("Temperature cannot be below absolute zero");
        }
        this._celsius = value;
    }

    // Computed property
    get fahrenheit(): number {
        return (this._celsius * 9/5) + 32;
    }

    set fahrenheit(value: number) {
        this._celsius = (value - 32) * 5/9;
    }
}

const temp = new Temperature(25);
console.log(temp.celsius);     // 25
console.log(temp.fahrenheit);  // 77

temp.celsius = 30;
console.log(temp.fahrenheit);  // 86

temp.fahrenheit = 68;
console.log(temp.celsius);     // 20

Example: Readonly Properties

class User {
    readonly id: number;
    readonly createdAt: Date;
    name: string;

    constructor(id: number, name: string) {
        this.id = id;
        this.name = name;
        this.createdAt = new Date();
    }

    updateName(newName: string): void {
        this.name = newName;  // OK
    }
}

const user = new User(1, "Alice");
user.name = "Alice Johnson";  // OK
// user.id = 2;               // Error: readonly
// user.createdAt = new Date(); // Error: readonly

Example: Class Inheritance

class Animal {
    constructor(public name: string) {}

    move(distance: number = 0): void {
        console.log(`${this.name} moved ${distance} meters.`);
    }

    makeSound(): void {
        console.log("Some generic animal sound");
    }
}

class Dog extends Animal {
    constructor(name: string, public breed: string) {
        super(name);  // Call parent constructor
    }

    // Override parent method
    makeSound(): void {
        console.log("Woof! Woof!");
    }

    // New method specific to Dog
    fetch(): void {
        console.log(`${this.name} is fetching the ball!`);
    }
}

class Cat extends Animal {
    constructor(name: string) {
        super(name);
    }

    makeSound(): void {
        console.log("Meow!");
    }

    climb(): void {
        console.log(`${this.name} climbed a tree!`);
    }
}

const dog = new Dog("Buddy", "Golden Retriever");
dog.move(10);      // Buddy moved 10 meters.
dog.makeSound();   // Woof! Woof!
dog.fetch();       // Buddy is fetching the ball!

const cat = new Cat("Whiskers");
cat.move(5);       // Whiskers moved 5 meters.
cat.makeSound();   // Meow!
cat.climb();       // Whiskers climbed a tree!

Example: Static Members

class MathUtils {
    static PI: number = 3.14159;
    static E: number = 2.71828;

    static circleArea(radius: number): number {
        return this.PI * radius * radius;
    }

    static circleCircumference(radius: number): number {
        return 2 * this.PI * radius;
    }
}

// Access static members without creating instance
console.log(MathUtils.PI);                    // 3.14159
console.log(MathUtils.circleArea(5));         // 78.53975
console.log(MathUtils.circleCircumference(5)); // 31.4159

class Counter {
    static count: number = 0;

    constructor() {
        Counter.count++;
    }

    static getCount(): number {
        return Counter.count;
    }
}

new Counter();
new Counter();
new Counter();
console.log(Counter.getCount());  // 3

Example: Abstract Classes

abstract class Shape {
    constructor(public color: string) {}

    // Abstract method - must be implemented by subclasses
    abstract calculateArea(): number;
    abstract calculatePerimeter(): number;

    // Concrete method - inherited by subclasses
    describe(): string {
        return `A ${this.color} shape with area ${this.calculateArea()}`;
    }
}

class Circle extends Shape {
    constructor(color: string, public radius: number) {
        super(color);
    }

    calculateArea(): number {
        return Math.PI * this.radius ** 2;
    }

    calculatePerimeter(): number {
        return 2 * Math.PI * this.radius;
    }
}

class Rectangle extends Shape {
    constructor(color: string, public width: number, public height: number) {
        super(color);
    }

    calculateArea(): number {
        return this.width * this.height;
    }

    calculatePerimeter(): number {
        return 2 * (this.width + this.height);
    }
}

// const shape = new Shape("red");  // Error: Cannot instantiate abstract class

const circle = new Circle("blue", 5);
console.log(circle.describe());  // A blue shape with area 78.54...
console.log(circle.calculatePerimeter());  // 31.41...

const rectangle = new Rectangle("green", 4, 6);
console.log(rectangle.describe());  // A green shape with area 24
console.log(rectangle.calculatePerimeter());  // 20

Example: Implementing Interfaces

interface Flyable {
    fly(): void;
    altitude: number;
}

interface Swimmable {
    swim(): void;
    depth: number;
}

class Duck implements Flyable, Swimmable {
    altitude: number = 0;
    depth: number = 0;

    constructor(public name: string) {}

    fly(): void {
        this.altitude = 100;
        console.log(`${this.name} is flying at ${this.altitude} feet`);
    }

    swim(): void {
        this.depth = 5;
        console.log(`${this.name} is swimming at ${this.depth} feet deep`);
    }

    quack(): void {
        console.log("Quack! Quack!");
    }
}

const duck = new Duck("Donald");
duck.fly();   // Donald is flying at 100 feet
duck.swim();  // Donald is swimming at 5 feet deep
duck.quack(); // Quack! Quack!

Example: Class Expressions

const MyClass = class {
    constructor(public value: number) {}

    multiply(n: number): number {
        return this.value * n;
    }
};

const instance = new MyClass(5);
console.log(instance.multiply(3));  // 15

// Anonymous class
const createPoint = () => {
    return new class {
        constructor(public x: number, public y: number) {}

        distance(): number {
            return Math.sqrt(this.x ** 2 + this.y ** 2);
        }
    }(3, 4);
};

const point = createPoint();
console.log(point.distance());  // 5

Example: Parameter Properties with All Modifiers

class Employee {
    // All properties declared and initialized in constructor
    constructor(
        public readonly id: number,
        public name: string,
        private salary: number,
        protected department: string
    ) {}

    getSalary(): number {
        return this.salary;
    }

    raiseSalary(percentage: number): void {
        this.salary *= (1 + percentage / 100);
    }
}

const emp = new Employee(1, "John Doe", 50000, "Engineering");
console.log(emp.id);    // 1
console.log(emp.name);  // John Doe
// console.log(emp.salary);  // Error: private

Example: Singleton Pattern

class Database {
    private static instance: Database;
    private constructor() {
        console.log("Database instance created");
    }

    static getInstance(): Database {
        if (!Database.instance) {
            Database.instance = new Database();
        }
        return Database.instance;
    }

    query(sql: string): void {
        console.log(`Executing: ${sql}`);
    }
}

// const db = new Database();  // Error: constructor is private
const db1 = Database.getInstance();  // Database instance created
const db2 = Database.getInstance();  // Uses existing instance
console.log(db1 === db2);  // true

function add(a: number, b: number): number {
    return a + b;
}

// Inference works too, but return type can be explicit for APIs
const multiply = (a: number, b: number): number => a * b;

// Void for functions that don't return
function logMessage(message: string): void {
    console.log(message);
}

// Never for functions that never complete
function fail(message: string): never {
    throw new Error(message);
}

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

function formatPrice(amount: number, currency: string = 'USD'): string {
    return `${currency} ${amount.toFixed(2)}`;
}

greet('Alice');          // "Alice"
greet('Alice', 'Dr.');   // "Dr. Alice"
formatPrice(9.5);        // "USD 9.50"
formatPrice(9.5, 'EUR'); // "EUR 9.50"

function sum(...values: number[]): number {
    return values.reduce((total, n) => total + n, 0);
}

sum(1, 2, 3);       // 6
sum(10, 20, 30, 5); // 65

// Function type alias
type Transformer = (input: string) => string;

const toUpper: Transformer = (text) => text.toUpperCase();
const trim: Transformer = (text) => text.trim();

// Passing callbacks
function process(text: string, transform: Transformer): string {
    return transform(text);
}

process(' hello ', trim);       // "hello"
process('typescript', toUpper); // "TYPESCRIPT"

// Overload signatures
function format(input: number): string;
function format(input: Date): string;
function format(input: string): string;

// Implementation signature
function format(input: number | Date | string): string {
    if (typeof input === 'number') return input.toFixed(2);
    if (input instanceof Date) return input.toISOString();
    return input.trim();
}

format(12.345);          // "12.35"
format(new Date());      // ISO string
format('  hello  ');     // "hello"

interface Button {
    label: string;
    click(this: Button): void;
}

const button: Button = {
    label: 'Save',
    click() {
        console.log(`Clicked ${this.label}`);
    },
};

// Arrow functions capture this lexically, so rarely need explicit this

function wrap(value: T): { value: T } {
    return { value };
}

const wrappedNumber = wrap(42);          // { value: number }
const wrappedUser = wrap({ name: 'A' }); // { value: { name: string } }

// Without generics - loses type safety
function identity(value: any): any {
    return value;
}

const result1 = identity("hello");  // result1 is any
const result2 = identity(42);       // result2 is any

// No autocomplete, no type checking
result1.toUpperCase(); // Works
result2.toUpperCase(); // No error, but crashes at runtime!

// Generic function with type parameter T
function identity(value: T): T {
    return value;
}

// TypeScript infers the type
const str = identity("hello");      // str: string
const num = identity(42);            // num: number
const bool = identity(true);         // bool: boolean

// Explicitly specify the type
const result = identity("hello");

// Now we have full type safety
str.toUpperCase(); // ✅ Works - TypeScript knows it's a string
num.toUpperCase(); // ❌ Error - Property 'toUpperCase' does not exist on type 'number'

// Get first element of array
function first(arr: T[]): T | undefined {
    return arr[0];
}

const numbers = [1, 2, 3];
const firstNum = first(numbers);  // type: number | undefined

const names = ["Alice", "Bob"];
const firstName = first(names);   // type: string | undefined

// Get last element
function last(arr: T[]): T | undefined {
    return arr[arr.length - 1];
}

// Filter array
function filter(arr: T[], predicate: (item: T) => boolean): T[] {
    const result: T[] = [];
    for (const item of arr) {
        if (predicate(item)) {
            result.push(item);
        }
    }
    return result;
}

const even = filter([1, 2, 3, 4, 5, 6], n => n % 2 === 0);
// even: number[] = [2, 4, 6]

// Generic interface for API response
interface ApiResponse {
    data: T;
    status: number;
    message: string;
}

// Use with different data types
interface User {
    id: number;
    name: string;
}

const userResponse: ApiResponse = {
    data: { id: 1, name: "Alice" },
    status: 200,
    message: "Success"
};

const numbersResponse: ApiResponse = {
    data: [1, 2, 3, 4, 5],
    status: 200,
    message: "Success"
};

// Generic interface for key-value pairs
interface KeyValuePair {
    key: K;
    value: V;
}

const pair1: KeyValuePair = {
    key: "age",
    value: 25
};

const pair2: KeyValuePair = {
    key: 1,
    value: "First"
};

// Generic Stack data structure
class Stack {
    private items: T[] = [];

    push(item: T): void {
        this.items.push(item);
    }

    pop(): T | undefined {
        return this.items.pop();
    }

    peek(): T | undefined {
        return this.items[this.items.length - 1];
    }

    isEmpty(): boolean {
        return this.items.length === 0;
    }

    size(): number {
        return this.items.length;
    }
}

// Use with numbers
const numberStack = new Stack();
numberStack.push(1);
numberStack.push(2);
numberStack.push(3);
console.log(numberStack.pop()); // 3

// Use with strings
const stringStack = new Stack();
stringStack.push("hello");
stringStack.push("world");
console.log(stringStack.pop()); // "world"

// Type safety enforced
// numberStack.push("string"); // ❌ Error: Argument of type 'string' not assignable to parameter of type 'number'

// Constraint: T must have a length property
function getLength(item: T): number {
    return item.length;
}

getLength("hello");        // ✅ OK - strings have length
getLength([1, 2, 3]);      // ✅ OK - arrays have length
getLength({ length: 10 }); // ✅ OK - object has length
getLength(42);             // ❌ Error: number doesn't have length

// Constraint with interface
interface Printable {
    print(): void;
}

function printItem(item: T): void {
    item.print();
}

// Multiple constraints
function merge(obj1: T, obj2: U): T & U {
    return { ...obj1, ...obj2 };
}

const merged = merge({ name: "Alice" }, { age: 25 });
// merged: { name: string } & { age: number }
console.log(merged.name); // "Alice"
console.log(merged.age);  // 25

// Function with two type parameters
function pair(first: T, second: U): [T, U] {
    return [first, second];
}

const result1 = pair("age", 25);        // [string, number]
const result2 = pair(true, "yes");     // [boolean, string]

// Generic Map-like structure
class Dictionary {
    private items: Map = new Map();

    set(key: K, value: V): void {
        this.items.set(key, value);
    }

    get(key: K): V | undefined {
        return this.items.get(key);
    }

    has(key: K): boolean {
        return this.items.has(key);
    }

    entries(): [K, V][] {
        return Array.from(this.items.entries());
    }
}

const userAges = new Dictionary();
userAges.set("Alice", 25);
userAges.set("Bob", 30);
console.log(userAges.get("Alice")); // 25

// Generic with default type
interface Box {
    value: T;
}

// Uses default (string)
const box1: Box = { value: "hello" };

// Explicitly specify different type
const box2: Box = { value: 42 };

// Function with default type parameter
function create(value?: T): T {
    return value ?? { id: Date.now() } as T;
}

const obj1 = create();                    // type: { id: number }
const obj2 = create({ name: "Alice" });   // type: { name: string }

// Generic HTTP client
class HttpClient {
    async get(url: string): Promise {
        const response = await fetch(url);
        return response.json() as Promise;
    }

    async post(url: string, data: T): Promise {
        const response = await fetch(url, {
            method: 'POST',
            body: JSON.stringify(data),
            headers: { 'Content-Type': 'application/json' }
        });
        return response.json() as Promise;
    }
}

// Define data types
interface User {
    id: number;
    name: string;
    email: string;
}

interface CreateUserRequest {
    name: string;
    email: string;
}

// Use with type safety
const client = new HttpClient();

// GET request - response typed as User[]
const users = await client.get('/api/users');
users.forEach(user => console.log(user.name)); // Full autocomplete

// POST request - request and response typed
const newUser = await client.post(
    '/api/users',
    { name: "Alice", email: "alice@example.com" }
);
console.log(newUser.id); // Full type safety