How to fix Cannot destructure into a non-binding pattern in TypeScript

// ❌ Missing declaration keyword
({ x } = obj);

// ❌ Trying to destructure into property
const obj.x = value;

// ❌ Invalid pattern in assignment
function({ a, b } = params) { }

// ✅ Correct destructuring with declaration
const { x } = obj;

// ✅ Correct parameter destructuring
function handler({ a, b }: { a: string; b: number }) { }

// ✅ Array destructuring
const [first, second] = array;

// ✅ Correct: Use const/let/var
const { name, age } = person;
let [x, y] = coordinates;
var { id } = user;

// ❌ Wrong: Missing declaration keyword
({ name, age } = person);  // Missing const/let/var

// ✅ If you need reassignment without declaration, use different syntax
let obj = { name: "" };
obj.name = person.name;  // Direct property assignment

let x, y;
({ x, y } = getCoordinates());  // Valid reassignment

// ❌ Wrong: Type inside the pattern
const handler = ({ name: string, age: number }) => {
  console.log(name, age);
};

// ✅ Correct: Type annotation after the pattern
const handler = ({ name, age }: { name: string; age: number }) => {
  console.log(name, age);
};

// ✅ With interface for cleaner code
interface User {
  name: string;
  age: number;
}

const handler = ({ name, age }: User) => {
  console.log(name, age);
};

// ✅ Array destructuring in parameters
const logCoords = ([x, y]: [number, number]) => {
  console.log(`x: ${x}, y: ${y}`);
};

// ❌ Invalid: Trying to destructure into non-existent properties
const obj.prop = value;  // Can't destructure into property

// ✅ Valid alternatives:
// Option 1: Create new variables
const { prop } = getObject();

// Option 2: Use direct assignment
const obj = { prop: value };

// Option 3: Spread syntax for creating new objects
const result = { ...oldObj, prop: newValue };

// ✅ Nested destructuring works fine
const { user: { name, email } } = data;

// ✅ Renaming during destructuring
const { prop: newName } = object;

// ✅ Default values
const { prop = "default" } = object;

// ❌ Wrong: Inline type annotations
class MyClass {
  constructor({ id: number, name: string }) {
    // ...
  }
}

// ✅ Correct: Type annotation after pattern
interface ConstructorParams {
  id: number;
  name: string;
}

class MyClass {
  constructor({ id, name }: ConstructorParams) {
    this.id = id;
    this.name = name;
  }
}

// ✅ Method example
class Handler {
  process({ data, options }: { data: string; options?: Record<string, unknown> }) {
    console.log(data);
  }
}

// ❌ Wrong: Type annotation inside pattern
const process = ({ input: string }) => {
  return input.toUpperCase();
};

// ✅ Correct: Type annotation after pattern
const process = ({ input }: { input: string }) => {
  return input.toUpperCase();
};

// ✅ With interface
interface ProcessParams {
  input: string;
  debug?: boolean;
}

const process = ({ input, debug }: ProcessParams) => {
  if (debug) console.log(input);
  return input.toUpperCase();
};

// ✅ Empty destructuring pattern also needs type
const noop = ({}: Record<string, unknown>) => {
  // Function accepts any object but ignores it
};

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true
  }
}

// Before: ❌ Trying to destructure into property
const obj = {};
const { x, y } = coordinates;
obj.{x, y} = coordinates;  // Doesn't work

// After: ✅ Just destructure to variables
const { x, y } = coordinates;
const obj = { x, y };

// Before: ❌ Destructuring into wrong pattern
this.setState({
  const { name, age } = newData  // Wrong
});

// After: ✅ Destructure first, then update
const { name, age } = newData;
this.setState({ name, age });

// Or use spread syntax
this.setState({ ...newData });

// Before: ❌ Nested destructuring issue
const compose = (f) => ({ x, y } = data) => f(x, y);

// After: ✅ Properly formatted
const compose = (f) => ({ x, y }: { x: number; y: number }) => f(x, y);