How to fix Discriminant property 'X' cannot be used for narrowing in TypeScript

// WRONG - discriminant uses general string type
type BadResult =
  | { status: string; data: string }
  | { status: string; error: Error };

function process(result: BadResult) {
  if (result.status === "success") {
    // TypeScript cannot narrow - 'data' might not exist
    console.log(result.data); // Error
  }
}

// CORRECT - discriminant uses literal types
type GoodResult =
  | { status: "success"; data: string }
  | { status: "error"; error: Error };

function processGood(result: GoodResult) {
  if (result.status === "success") {
    // TypeScript narrows successfully
    console.log(result.data); // OK - knows this is the success type
  }
}

// WRONG - Person is assignable to Employee (all Employee properties exist on Person)
type Employee = { name: string; role: string };
type Person = { name: string; role: string; age: number };

type BadUnion = Employee | Person;

// CORRECT - use discriminant to make types mutually exclusive
type GoodEmployee = { kind: "employee"; name: string; role: string };
type GoodPerson = { kind: "person"; name: string; role: string; age: number };

type GoodUnion = GoodEmployee | GoodPerson;

function identify(entity: GoodUnion) {
  if (entity.kind === "employee") {
    // Narrowed to GoodEmployee
    console.log(entity.name, entity.role);
  } else {
    // Narrowed to GoodPerson
    console.log(entity.name, entity.age);
  }
}

type Action =
  | { type: "increment"; amount: number }
  | { type: "decrement"; amount: number };

// WRONG - intersection breaks narrowing
type TimestampedAction = Action & { timestamp: Date };

function handle(action: TimestampedAction) {
  if (action.type === "increment") {
    // May not narrow correctly depending on TypeScript version
    console.log(action.amount);
  }
}

// CORRECT - add timestamp to each union member individually
type BetterAction =
  | { type: "increment"; amount: number; timestamp: Date }
  | { type: "decrement"; amount: number; timestamp: Date };

function handleBetter(action: BetterAction) {
  if (action.type === "increment") {
    // Narrows correctly
    console.log(action.amount, action.timestamp);
  }
}

type MyData =
  | { type: "text"; content: string }
  | { type: "image"; url: string };

// WRONG - wider initial type prevents narrowing
type ApiResponse = Record<string, any> | MyData;

function process(response: ApiResponse) {
  if (typeof response === "object" && "type" in response) {
    if (response.type === "text") {
      // May not narrow - still typed as ApiResponse
      console.log(response.content); // Error
    }
  }
}

// CORRECT - use specific type or type guard
function isMyData(value: ApiResponse): value is MyData {
  return (
    typeof value === "object" &&
    value !== null &&
    "type" in value &&
    (value.type === "text" || value.type === "image")
  );
}

function processCorrect(response: ApiResponse) {
  if (isMyData(response)) {
    // Now response is MyData
    if (response.type === "text") {
      console.log(response.content); // OK
    }
  }
}

// WRONG - discriminant is optional
type BadState =
  | { status?: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; error: string };

function render(state: BadState) {
  if (state.status === "success") {
    // Cannot narrow reliably - status might be undefined
    console.log(state.data); // Error
  }
}

// CORRECT - discriminant is required in all members
type GoodState =
  | { status: "loading" }
  | { status: "success"; data: string }
  | { status: "error"; error: string };

function renderGood(state: GoodState) {
  if (state.status === "success") {
    console.log(state.data); // OK
  }
}

type Result =
  | { type: "success"; value: number }
  | { type: "failure"; error: string };

// WRONG - type is inferred as string, not literal "success"
const result1 = { type: "success", value: 42 };
// Type: { type: string; value: number }

// This won't narrow correctly
function handle(r: Result) {
  if (r.type === "success") {
    console.log(r.value); // May error
  }
}

// CORRECT - use const assertion
const result2 = { type: "success", value: 42 } as const;
// Type: { readonly type: "success"; readonly value: 42 }

// Or explicitly type it
const result3: Result = { type: "success", value: 42 };
// Type: Result (which narrows correctly)