How to fix Operator 'in' cannot be applied to types 'X' and 'Y' in TypeScript

// CORRECT: Checking property in object
interface User {
  name: string;
  age?: number;  // Optional property
}

const user: User = { name: "Alice" };

if ("age" in user) {
  console.log(user.age);  // TypeScript knows age exists here
}

// CORRECT: Checking index signature
interface Dictionary {
  [key: string]: number;
}

const dict: Dictionary = { "a": 1, "b": 2 };
if ("c" in dict) {
  console.log(dict.c);  // TypeScript knows c exists
}

// WRONG: Using 'in' with primitives
const str = "hello";
if ("length" in str) {  // Error: 'in' can't be used with string primitive
  console.log(str.length);
}

// CORRECT: Use typeof or other methods for primitives
if (typeof str === "string") {
  console.log(str.length);
}

// WRONG: Trying to check type with 'in'
function processValue(value: string | number) {
  if (value in string) {  // Error: 'in' can't be used this way
    console.log(value.toUpperCase());
  }
}

// CORRECT: Use typeof for primitive types
function processValue(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase());  // TypeScript knows it's string
  } else {
    console.log(value.toFixed(2));     // TypeScript knows it's number
  }
}

// CORRECT: Use instanceof for class instances
class Animal {
  move() { console.log("Moving"); }
}
class Bird extends Animal {
  fly() { console.log("Flying"); }
}

function handleAnimal(animal: Animal) {
  if (animal instanceof Bird) {
    animal.fly();  // TypeScript knows it's Bird
  } else {
    animal.move();
  }
}

// CORRECT: User-defined type guards
interface Cat {
  meow(): void;
}
interface Dog {
  bark(): void;
}

function isCat(pet: Cat | Dog): pet is Cat {
  return (pet as Cat).meow !== undefined;
}

function handlePet(pet: Cat | Dog) {
  if (isCat(pet)) {
    pet.meow();  // TypeScript knows it's Cat
  } else {
    pet.bark();  // TypeScript knows it's Dog
  }
}

// WRONG: Generic without constraint
function hasProperty<T>(obj: T, key: string): boolean {
  return key in obj;  // Error: 'in' can't be applied to types 'string' and 'T'
}

// CORRECT: Constrain T to extend object
function hasProperty<T extends object>(obj: T, key: string): boolean {
  return key in obj;  // OK: T is guaranteed to be an object
}

// CORRECT: More specific constraint
function hasProperty<T extends Record<string, any>>(obj: T, key: string): boolean {
  return key in obj;
}

// Usage examples
const user = { name: "Alice", age: 30 };
console.log(hasProperty(user, "name"));  // true
console.log(hasProperty(user, "email")); // false

// WRONG: Can't use with primitives
const str = "hello";
// console.log(hasProperty(str, "length"));  // Error: string doesn't extend object

// For checking properties that might be on primitives, use a different approach
function hasPropertyOrPrimitive<T>(value: T, key: string): boolean {
  if (typeof value === "object" && value !== null) {
    return key in value;
  }
  return false;
}

// Problem: Union type with object and primitive
type Response = string | { data: any; error?: string };

function handleResponse(response: Response) {
  // WRONG: Can't use 'in' directly
  // if ("data" in response) { ... }

  // CORRECT: Check type first
  if (typeof response === "object" && response !== null) {
    // Now TypeScript knows response is object type
    if ("data" in response) {
      console.log(response.data);
    }
    if ("error" in response) {
      console.log(response.error);
    }
  } else {
    console.log("String response:", response);
  }
}

// Alternative: Discriminated union
type SuccessResponse = { type: "success"; data: any };
type ErrorResponse = { type: "error"; message: string };
type ApiResponse = SuccessResponse | ErrorResponse | string;

function handleApiResponse(response: ApiResponse) {
  if (typeof response === "string") {
    console.log("Raw string:", response);
  } else if (response.type === "success") {
    console.log("Success:", response.data);  // TypeScript knows it's SuccessResponse
  } else {
    console.log("Error:", response.message); // TypeScript knows it's ErrorResponse
  }
}

// For arrays of mixed types
type MixedArray = (string | { id: number; name: string })[];

function processMixedArray(arr: MixedArray) {
  arr.forEach(item => {
    if (typeof item === "object") {
      // Now safe to use 'in'
      if ("name" in item) {
        console.log(item.name);
      }
    } else {
      console.log("String item:", item);
    }
  });
}

// WRONG: Using 'in' to check if value is in array
const colors = ["red", "green", "blue"];
const color = "red";

if (color in colors) {  // This checks array indices, not values!
  console.log("Found");  // Actually checks if "red" is a property/index
}

// What the above actually does:
// "0" in colors → true (index 0 exists)
// "red" in colors → false ("red" is not an index)
// "length" in colors → true (arrays have length property)

// CORRECT: Use includes() for arrays
if (colors.includes(color)) {
  console.log("Found color in array");
}

// CORRECT: Use has() for Sets
const colorSet = new Set(["red", "green", "blue"]);
if (colorSet.has(color)) {
  console.log("Found color in Set");
}

// CORRECT: Use has() for Maps
const colorMap = new Map([["red", "#FF0000"], ["green", "#00FF00"]]);
if (colorMap.has(color)) {
  console.log("Found color in Map:", colorMap.get(color));
}

// CORRECT: Use in for object property checking
const colorObj = { red: "#FF0000", green: "#00FF00", blue: "#0000FF" };
if (color in colorObj) {
  console.log("Found color in object:", colorObj[color]);
}

// For checking if method exists (less common, usually better approaches)
const obj = { greet: () => "Hello", count: 42 };
if ("greet" in obj && typeof obj.greet === "function") {
  obj.greet();
}

// Problematic pattern: Using 'in' for type discrimination
interface Circle {
  kind: "circle";
  radius: number;
}
interface Square {
  kind: "square";
  sideLength: number;
}
type Shape = Circle | Square;

// WRONG approach
function getArea(shape: Shape): number {
  if ("radius" in shape) {  // Works but not ideal
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.sideLength ** 2;
  }
}

// BETTER: Discriminated union with kind property
function getAreaBetter(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;  // TypeScript knows it's Circle
  } else {
    return shape.sideLength ** 2;        // TypeScript knows it's Square
  }
}

// EVEN BETTER: Switch statement
function getAreaBest(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.sideLength ** 2;
  }
}

// For dynamic property checking, consider alternative patterns
interface Config {
  apiUrl?: string;
  timeout?: number;
  retries?: number;
}

// Instead of checking each property with 'in'
function validateConfig(config: Config): string[] {
  const errors: string[] = [];

  // Verbose with 'in'
  if (!("apiUrl" in config)) errors.push("apiUrl is required");
  if (!("timeout" in config)) errors.push("timeout is required");

  return errors;
}

// Better: Use optional chaining and nullish coalescing
function validateConfigBetter(config: Config): string[] {
  const errors: string[] = [];

  if (!config.apiUrl) errors.push("apiUrl is required");
  if (config.timeout == null) errors.push("timeout is required");

  return errors;
}

// Best: Schema validation library (Zod, Yup, etc.)
import { z } from "zod";

const ConfigSchema = z.object({
  apiUrl: z.string().url(),
  timeout: z.number().min(100),
  retries: z.number().optional(),
});

function validateConfigBest(config: unknown) {
  return ConfigSchema.safeParse(config);
}