Intro to TypeScript & Strong Typing Concepts

// TypeScript Basic Type Annotations

// Primitive types
let name: string = "Boopie";
let age: number = 16;
let alive: boolean = true;

// Arrays
let scores: number[] = [10, 20, 30];
let names: string[] = ["Alice", "Bob"];
let mixed: (string | number)[] = [1, "two", 3];

// Objects
let user: { name: string; age: number } = {
  name: "Boopie",
  age: 16
};

// Functions with types
function add(a: number, b: number): number {
  return a + b;
}

// Arrow functions with types
const multiply = (x: nu
...

// Interfaces - Describe Object Shapes

interface User {
  name: string;
  age: number;
  email: string;
  active: boolean;
}

// Using the interface
const user: User = {
  name: "Boopie",
  age: 16,
  email: "boopie@example.com",
  active: true
};

// Optional properties
interface Product {
  id: number;
  name: string;
  description?: string; // optional
  price: number;
}

const product: Product = {
  id: 1,
  name: "Widget",
  price: 29.99
  // description is optional, so we can omit it
};


...

// Type Aliases & Union Types

// Type alias for primitives
type ID = string | number;

let userId: ID = 123;
userId = "abc-123"; // Both are valid

// Type alias for objects
type Point = {
  x: number;
  y: number;
};

const origin: Point = { x: 0, y: 0 };

// Union types - multiple possible types
type Status = "pending" | "approved" | "rejected";

let orderStatus: Status = "pending";
orderStatus = "approved";   // ✓ OK
// orderStatus = "unknown"; // ❌ Error!

// Literal types
type Size = "sm" 
...

// Generics - Reusable Type-Safe Code

// Generic function
function identity<T>(value: T): T {
  return value;
}

// Usage - type is inferred or explicit
const num = identity(42);           // T is number
const str = identity<string>("hi"); // T is string

// Generic with arrays
function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

const first = firstElement([1, 2, 3]);      // number | undefined
const firstStr = firstElement(["a", "b"]);  // string | undefined

// Generic inte
...

// Type Narrowing & Type Guards

// typeof narrowing
function printValue(value: string | number) {
  if (typeof value === "string") {
    // TS knows value is string here
    console.log(value.toUpperCase());
  } else {
    // TS knows value is number here
    console.log(value.toFixed(2));
  }
}

// instanceof narrowing
class Dog {
  bark() { console.log("Woof!"); }
}

class Cat {
  meow() { console.log("Meow!"); }
}

function makeSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    an
...

// Utility Types - Built-in Type Transformers

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
  createdAt: Date;
}

// Partial<T> - Make all properties optional
type PartialUser = Partial<User>;
// { id?: number; name?: string; email?: string; ... }

function updateUser(id: number, updates: Partial<User>) {
  // Can pass any subset of User properties
}

updateUser(1, { name: "New Name" }); // ✓ OK

// Required<T> - Make all properties required
interface Confi
...

// Mapped Types & Conditional Types

// Basic mapped type
type Readonly<T> = {
  readonly [K in keyof T]: T[K];
};

type Optional<T> = {
  [K in keyof T]?: T[K];
};

// Real example
interface User {
  id: number;
  name: string;
  email: string;
}

type ReadonlyUser = Readonly<User>;
// All properties are now readonly

// Mapped type with transformation
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = Getters<User>;
// { getId: () => numb
...

// Async Types & Promise Handling

// Typing async functions
async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

// Using the Awaited utility type
type ResolvedUser = Awaited<ReturnType<typeof fetchUser>>;
// User

// Promise with union types
type ApiResult<T> =
  | { success: true; data: T }
  | { success: false; error: string };

async function fetchData(): Promise<ApiResult<User[]>> {
  try {
    const response
...

// Decorators - Metaprogramming for Classes
// Enable in tsconfig.json: "experimentalDecorators": true

// Class decorator
function Logger(constructor: Function) {
  console.log("Class created:", constructor.name);
}

@Logger
class User {
  constructor(public name: string) {}
}
// Logs: "Class created: User"

// Decorator factory - returns a decorator
function Component(config: { selector: string }) {
  return function(constructor: Function) {
    console.log("Component:", config.selector);
  };
...

// Declaration Files (.d.ts) - Adding Types to JS Libraries

// Creating a declaration file for a JavaScript library
// utils.d.ts
declare module "my-utils" {
  export function sum(a: number, b: number): number;
  export function capitalize(str: string): string;
  export const VERSION: string;
}

// Now you can import with full type support
// import { sum, capitalize, VERSION } from "my-utils";

// Ambient declarations for global variables
declare const API_URL: string;
declare const DEBUG: boo
...