TypeScript Type Inference

// TypeScript infers these variable types
let name = "Alice";           // inferred as string
let age = 30;                 // inferred as number
let isActive = true;          // inferred as boolean
let numbers = [1, 2, 3];      // inferred as number[]
let mixed = [1, "two", true]; // inferred as (string | number | boolean)[]

// Using the inferred types
name.toUpperCase();  // Works because name is inferred as string
age.toFixed(2);      // Works because age is inferred as number
// name.toFixed(2);  // Error: Property 'toFixed' does not exist on type 'string'

// Make this file a module so the local `name` does not clash with the built-in global one
export {};

// Return type is inferred as string
function greet(name: string) {
  return `Hello, ${name}!`;
}

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

// Return type is inferred as string | number
function getValue(key: string) {
   if (key === "name") {
    return "Alice";
   } else {
    return 42;
   }
}
// Using the inferred return types
let greeting = greet("Bob");     // inferred as string
let sum = add(5, 3);             // inferred as number
let value = getValue("age");     // inferred as string | number

// The type of the callback parameter is inferred from the array method context
const names = ["Alice", "Bob", "Charlie"];

// Parameter 'name' is inferred as string
names.forEach(name => {
  console.log(name.toUpperCase());
});

// Parameter 'name' is inferred as string, and the return type is inferred as number
const nameLengths = names.map(name => {
  return name.length;
});

// nameLengths is inferred as number[]

// Parameter types in event handlers are also inferred
// (guarded so the file also runs outside a browser, where `document` does not exist)
if (typeof document !== "undefined") {
  document.addEventListener("click", event => {
    // 'event' is inferred as MouseEvent
    console.log(event.clientX, event.clientY);
  });
}

// TypeScript infers the type of this object
const user = {
  id: 1,
  name: "Alice",
  email: "[email protected]",
  active: true,
  details: {
    age: 30,
    address: {
      city: "New York",
      country: "USA"
    }
  }
};

// Accessing inferred properties
console.log(user.name.toUpperCase());
console.log(user.details.age.toFixed(0));
console.log(user.details.address.city.toLowerCase());

// Type errors would be caught
// console.log(user.age);                 // Error: Property 'age' does not exist on type '...'
// console.log(user.details.name);        // Error: Property 'name' does not exist on type '...'
// console.log(user.details.address.zip); // Error: Property 'zip' does not exist on type '...'

// Regular type inference (widens to string)
let name = "Alice";  // type: string

// Const assertion (narrows to literal type)
const nameConst = "Alice" as const;  // type: "Alice"

// With objects
const user = {
  id: 1,
  name: "Alice",
  roles: ["admin", "user"] as const  // readonly tuple
} as const;

// user.name = "Bob";  // Error: Cannot assign to 'name' because it is a read-only property

// Make this file a module so the local `name` does not clash with the built-in global one
export {};

function processValue(value: string | number) {
  // Type is narrowed to string in this block
  if (typeof value === "string") {
    console.log(value.toUpperCase());
  }
  // Type is narrowed to number here
  else {
    console.log(value.toFixed(2));
  }
}

// Discriminated unions
interface Circle { kind: "circle"; radius: number; }
interface Square { kind: "square"; size: number; }
type Shape = Circle | Square;

function area(shape: Shape) {
  // Type is narrowed based on 'kind' property
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.size ** 2;
  }
}

// 1. Let TypeScript infer simple types
let message = "Hello";  // Good: no need for explicit type here

// 2. Provide explicit types for function parameters
function formatName(firstName: string, lastName: string) {
  return `${firstName} ${lastName}`;
}

// 3. Consider adding return type annotations for complex functions
function processData(input: string[]): { count: number; items: string[] } {
  return {
    count: input.length,
    items: input.map(item => item.trim())
  };
}

// 4. Use explicit type annotations for empty arrays or objects
const emptyArray: string[] = [];  // Without annotation, inferred as any[]
const configOptions: Record<string, unknown> = {};  // Without annotation, inferred as {}

// 5. Use type assertions when TypeScript cannot infer correctly
// (guarded so the file also runs outside a browser, where `document` does not exist)
if (typeof document !== "undefined") {
  const canvas = document.getElementById("main-canvas") as HTMLCanvasElement;
}