W3Schools Tryit Editor

// Contextual Typing Example
// In TypeScript, parameter types would be inferred based on context

// Array methods with callbacks demonstrate contextual typing
const names = ["Alice", "Bob", "Charlie"];

// Parameter 'name' would be inferred as string in TypeScript
console.log("forEach example:");
names.forEach(name => {
  console.log(`Name: ${name}, Uppercase: ${name.toUpperCase()}`);
});

// Parameter 'name' would be inferred as string, and return type as number in TypeScript
console.log("\nmap example:");
const nameLengths = names.map(name => {
  return name.length;
});
console.log("Name lengths:", nameLengths);
console.log("Type of nameLengths array:", typeof nameLengths);
console.log("Type of first element:", typeof nameLengths[0]);

// Filter example where parameter is contextually typed
console.log("\nfilter example:");
const longNames = names.filter(name => {
  // In TypeScript, 'name' would be inferred as string
  return name.length > 4;
});
console.log("Long names:", longNames);

// In the browser, event handlers would have inferred parameter types
console.log("\nEvent handling example:");
console.log("In a browser, TypeScript would infer 'event' as MouseEvent in:");
console.log("document.addEventListener('click', event => { ... })");

// Object methods with callbacks also demonstrate contextual typing
const user = {
  name: "David",
  greet(greeting) {
    // In TypeScript, 'greeting' would be inferred based on how this method is called
    return `${greeting}, I'm ${this.name}`;
  }
};

console.log("\nMethod call example:");
console.log(user.greet("Hello"));

forEach example:
Name: Alice, Uppercase: ALICE
Name: Bob, Uppercase: BOB
Name: Charlie, Uppercase: CHARLIE

map example:
Name lengths: [ 5, 3, 7 ]
Type of nameLengths array: object
Type of first element: number

filter example:
Long names: [ 'Alice', 'Charlie' ]

Event handling example:
In a browser, TypeScript would infer 'event' as MouseEvent in:
document.addEventListener('click', event => { ... })

Method call example:
Hello, I'm David