// Error
function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

const user = { name: 'Alice', age: 30 };
greet(user);
// TS2345: Argument of type '{ name: string; age: number; }'
//         is not assignable to parameter of type 'string'.

// Fix 1: Pass the right value
greet(user.name);

// Fix 2: Change the function to accept the object
function greetUser(user: { name: string }) {
  console.log(`Hello, ${user.name}!`);
}
greetUser(user); // OK

// Error
let age: number = "thirty";
// TS2322: Type 'string' is not assignable to type 'number'.

// Also common with literal types
type Direction = 'north' | 'south' | 'east' | 'west';
let dir: Direction = 'up';
// TS2322: Type '"up"' is not assignable to type 'Direction'.

// Fix: Use the correct type
let age: number = 30;

// Fix: Use a valid union member
let dir: Direction = 'north';

// Fix: Widen the type if you genuinely need flexibility
let flexAge: number | string = "thirty";

// Error
interface Cat {
  name: string;
  meow(): void;
}

const pet: Cat = { name: 'Whiskers', meow() {} };
pet.bark();
// TS2339: Property 'bark' does not exist on type 'Cat'.

// Error with union type
function handle(input: string | number) {
  console.log(input.toUpperCase());
  // TS2339: Property 'toUpperCase' does not exist on type 'string | number'.
  // (number has no toUpperCase)
}

// Fix 1: Add the property to the interface
interface Pet {
  name: string;
  meow?(): void;
  bark?(): void;
}

// Fix 2: Narrow the union before accessing the property
function handle(input: string | number) {
  if (typeof input === 'string') {
    console.log(input.toUpperCase()); // Safe — narrowed to string
  }
}

// Fix 3: Use a type assertion when you are certain (use sparingly)
const data = JSON.parse('{"foo": 1}') as { foo: number };
console.log(data.foo); // OK

// Error
function processInput(input: unknown) {
  console.log(input.toUpperCase()); // TS2571
  input.forEach((item: unknown) => {}); // TS2571 again
}

// Common in catch blocks (TypeScript 4+ makes caught errors 'unknown')
try {
  riskyOperation();
} catch (err) {
  console.log(err.message); // TS2571
}

// Fix: Narrow with typeof / instanceof before use
function processInput(input: unknown) {
  if (typeof input === 'string') {
    console.log(input.toUpperCase()); // narrowed to string
  }
  if (Array.isArray(input)) {
    input.forEach((item) => console.log(item)); // narrowed to array
  }
}

// Fix for catch blocks
try {
  riskyOperation();
} catch (err) {
  if (err instanceof Error) {
    console.log(err.message); // OK
  } else {
    console.log(String(err)); // fallback
  }
}

// Create a reusable type guard helper
function isErrorWithMessage(err: unknown): err is { message: string } {
  return (
    typeof err === 'object' &&
    err !== null &&
    'message' in err &&
    typeof (err as Record<string, unknown>).message === 'string'
  );
}

try {
  riskyOperation();
} catch (err) {
  if (isErrorWithMessage(err)) {
    console.log(err.message);
  }
}

// Error
const users = ['Alice', 'Bob', 'Charlie'];
// With noUncheckedIndexedAccess, array access returns string | undefined
const first = users[0];
console.log(first.toUpperCase());
// TS18048: 'first' is possibly 'undefined'.

// Also common with optional properties
interface Config {
  timeout?: number;
}
function connect(config: Config) {
  const ms = config.timeout * 1000;
  // TS18048: 'config.timeout' is possibly 'undefined'.
}

// Fix 1: Explicit undefined check
const first = users[0];
if (first !== undefined) {
  console.log(first.toUpperCase()); // safe
}

// Fix 2: Non-null assertion (use only when you are certain it exists)
console.log(first!.toUpperCase());

// Fix 3: Optional chaining
console.log(first?.toUpperCase()); // returns undefined if first is undefined

// Fix 4: Nullish coalescing with a default
function connect(config: Config) {
  const ms = (config.timeout ?? 5000) * 1000;
}

// Fix 5: Provide a fallback with logical OR
const name = users[0] || 'Unknown';

// Example: narrowing leaves nothing
function process(input: string | number) {
  if (typeof input === 'string') {
    // input is string here
  } else if (typeof input === 'number') {
    // input is number here
  } else {
    // input is 'never' here — no type left
    console.log(input);
    // Property 'foo' does not exist on type 'never'
  }
}

// Contradictory intersection
type Impossible = string & number; // never
// The type can never be satisfied

// Understanding: 'never' in exhaustive checks is intentional
type Shape = 'circle' | 'square';

function area(shape: Shape): number {
  if (shape === 'circle') return Math.PI;
  if (shape === 'square') return 1;

  // TypeScript knows we've handled all cases
  // This assertion would error if Shape gains a new member — great for safety!
  const _exhaustive: never = shape;
  throw new Error(`Unhandled shape: ${_exhaustive}`);
}

// If you are hitting 'never' unexpectedly, your narrowing is too aggressive
// Widen the type or remove the impossible branch

// Error
type StringFn = (x: string) => void;
type NumberFn = (x: number) => void;
type EitherFn = StringFn | NumberFn;

declare const fn: EitherFn;
fn('hello');
// Error: Each member of the union type has signatures,
// but none of those signatures are compatible with each other.

// Why: if fn is StringFn, it CANNOT accept a number.
// if fn is NumberFn, it CANNOT accept a string.
// TypeScript cannot safely call it with either argument type.

// Fix 1: Use a union-parameter function
type FlexFn = (x: string | number) => void;
declare const flexFn: FlexFn;
flexFn('hello'); // OK
flexFn(42);      // OK

// Fix 2: Use intersection for overloaded callables
type BothFn = ((x: string) => void) & ((x: number) => void);
declare const bothFn: BothFn;
bothFn('hello'); // OK
bothFn(42);      // OK

// Fix 3: Narrow to one branch before calling
if (typeof myArg === 'string') {
  (fn as StringFn)(myArg);
} else {
  (fn as NumberFn)(myArg);
}

// Error
const colors = { red: '#f00', green: '#0f0', blue: '#00f' };

function getColor(name: string) {
  return colors[name];
  // Error: Element implicitly has an 'any' type because
  // expression of type 'string' can't be used to index
  // type '{ red: string; green: string; blue: string; }'.
}

// Fix 1: Use keyof to restrict the parameter
function getColor(name: keyof typeof colors) {
  return colors[name]; // name is 'red' | 'green' | 'blue'
}

// Fix 2: Type guard with 'in'
function getColorSafe(name: string): string | undefined {
  if (name in colors) {
    return colors[name as keyof typeof colors];
  }
  return undefined;
}

// Fix 3: Add an index signature to the type
interface ColorMap {
  [key: string]: string;
}
const dynamicColors: ColorMap = { red: '#f00' };
function getDynColor(name: string) {
  return dynamicColors[name]; // OK
}

// Fix 4: Use Record<string, string>
const palette: Record<string, string> = { red: '#f00' };

// Error: obvious re-declaration
const username = 'Alice';
const username = 'Bob'; // Cannot redeclare block-scoped variable 'username'.

// Subtle error: file treated as a global script
// TypeScript treats the file as global, so 'name' conflicts with window.name:
const name = 'Alice'; // Cannot redeclare block-scoped variable 'name'.

// Fix 1: Rename the variable
const username = 'Alice';
const updatedUsername = 'Bob';

// Fix 2: Make the file a module by adding an export or import
// This creates module scope and avoids global conflicts
export {};  // Turns the file into a module
const name = 'Alice'; // OK — module-scoped now

// Fix 3: Use a name that does not shadow globals
const userName = 'Alice'; // avoids conflict with 'name' global

// Error
import { getUserById } from './userService';
// Module has no exported member 'getUserById'.

// The module actually exports:
// export function fetchUser(id: number) { ... }
// export default class UserService { ... }

// Fix 1: Use the correct export name
import { fetchUser } from './userService';

// Fix 2: Import the default export
import UserService from './userService';

// Fix 3: Import everything and inspect at runtime
import * as UserModule from './userService';

// Fix 4: Re-export with the expected name (if you control the module)
// In userService.ts:
export { fetchUser as getUserById } from './userService';

// Error: Missing import
const [value, setValue] = useState(false);
// TS2304: Cannot find name 'useState'.

// Fix: Add the import
import { useState } from 'react';

// Error: Using browser globals without DOM lib
document.getElementById('app');
// TS2304: Cannot find name 'document'.

// Fix: Add "dom" to lib in tsconfig.json
// "lib": ["ES2020", "DOM", "DOM.Iterable"]

// Error: Using Node.js globals without @types/node
process.env.NODE_ENV;
// TS2304: Cannot find name 'process'.

// Fix: Install @types/node
// npm install --save-dev @types/node

// Error: no type definitions for lodash
import lodash from 'lodash';
// Could not find a declaration file for module 'lodash'.

// Error: wrong path
import { utils } from '../helpers/util';
// Cannot find module '../helpers/util'.

// Fix 1: Install @types package
// npm install --save-dev @types/lodash
import lodash from 'lodash'; // now has types

// Fix 2: Declare the module yourself
// Create a file: src/types/lodash.d.ts
declare module 'lodash' {
  export function chunk<T>(array: T[], size: number): T[][];
}

// Fix 3: Wildcard declaration for untyped assets
declare module '*.png';
declare module '*.svg';
declare module 'some-untyped-lib';

// Fix 4: Check the path (case-sensitive on Linux/macOS)
import { utils } from '../helpers/utils'; // 'utils' not 'util'