How to fix Binding element 'x' implicitly has an 'any' type in TypeScript

// ❌ Error: binding elements have implicit any
function processUser({ name, age }) {
  console.log(name, age);
}

// ✅ Fixed: type the destructured object
function processUser({ name, age }: { name: string; age: number }) {
  console.log(name, age);
}

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

function processUser({ name, age, email }: User) {
  console.log(name, age, email);
}

// Or with type keyword
type UserData = {
  name: string;
  age: number;
};

const printUser = ({ name, age }: UserData) => {
  console.log(`${name} is ${age} years old`);
};

// ❌ Error
const handleClick = ({ target, clientX }) => {
  console.log(target, clientX);
};

// ✅ Fixed: add type annotation
const handleClick = ({ target, clientX }: { target: HTMLElement; clientX: number }) => {
  console.log(target, clientX);
};

// ✅ Better: use type alias
type ClickEvent = { target: HTMLElement; clientX: number };
const handleClick = ({ target, clientX }: ClickEvent) => {
  console.log(target, clientX);
};

interface Config {
  host: string;
  port: number;
  timeout?: number;
  retries?: number;
}

// ✅ Using the full interface
function connect({ host, port, timeout }: Config) {
  return `Connecting to ${host}:${port}`;
}

// ✅ Or be explicit about which are optional
function configureServer({ host, port, timeout = 5000 }: { host: string; port: number; timeout?: number }) {
  // timeout defaults to 5000 if not provided
}

// ✅ Using Partial for mostly optional object
function updateSettings(updates: Partial<Config>) {
  // all properties are optional
}

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

// ❌ Error: nested destructuring without types
function getUserInfo({ profile: { name, email } }) {
  console.log(name, email);
}

// ✅ Fixed: type the entire parameter
function getUserInfo({ profile: { name, email } }: User) {
  console.log(name, email);
}

// ✅ Or inline the nested type
function getUserInfo({ profile: { name, email } }: { profile: { name: string; email: string } }) {
  console.log(name, email);
}

{
  "compilerOptions": {
    "strict": true,
    // or individually:
    "noImplicitAny": true
  }
}