How to fix Cannot narrow type with instanceof for built-in types in TypeScript

// WRONG - won't work for primitive strings
function processValue(value: unknown) {
  if (value instanceof String) {
    console.log(value.toUpperCase()); // TypeScript may not narrow correctly
  }
}

// CORRECT - use typeof for primitives
function processValue(value: unknown) {
  if (typeof value === "string") {
    console.log(value.toUpperCase()); // TypeScript correctly narrows to string
  }
}

// Other primitive type checks:
if (typeof value === "number") { /* value is number */ }
if (typeof value === "boolean") { /* value is boolean */ }
if (typeof value === "symbol") { /* value is symbol */ }
if (typeof value === "bigint") { /* value is bigint */ }
if (typeof value === "undefined") { /* value is undefined */ }

// Primitive string - instanceof doesn't work
const primitiveStr = "hello";
console.log(primitiveStr instanceof String); // false
console.log(typeof primitiveStr); // "string"

// Object wrapper string - instanceof works
const objectStr = new String("hello");
console.log(objectStr instanceof String); // true
console.log(typeof objectStr); // "object"

// In practice, you rarely create object wrappers manually
// Most built-in types you work with are primitives

const arr = [1, 2, 3];
console.log(arr instanceof Array); // true

const date = new Date();
console.log(date instanceof Date); // true

class MyClass {}
const obj = new MyClass();
console.log(obj instanceof MyClass); // true

// Custom type guard for string (primitive or object wrapper)
function isString(value: unknown): value is string {
  return typeof value === "string" || value instanceof String;
}

// Custom type guard for number
function isNumber(value: unknown): value is number {
  return typeof value === "number" || value instanceof Number;
}

// Usage
function processValue(value: unknown) {
  if (isString(value)) {
    // TypeScript knows value is string
    console.log(value.toUpperCase());
  }
}

// For union types
type StringOrNumber = string | number | String | Number;

function processUnion(value: StringOrNumber) {
  if (typeof value === "string" || value instanceof String) {
    // Handle string
  } else if (typeof value === "number" || value instanceof Number) {
    // Handle number
  }
}

// In an iframe or different window
const iframe = document.createElement("iframe");
document.body.appendChild(iframe);
const iframeArray = iframe.contentWindow?.Array;

const myArray = [1, 2, 3];

// This might be false in some contexts
console.log(myArray instanceof Array); // true in same realm
console.log(myArray instanceof iframeArray); // false - different constructors

// Solution: Use Array.isArray() or duck typing
console.log(Array.isArray(myArray)); // true - works across realms
console.log(Object.prototype.toString.call(myArray) === "[object Array]"); // true

// Array
Array.isArray(value)

// Date
Object.prototype.toString.call(value) === "[object Date]"

// RegExp
Object.prototype.toString.call(value) === "[object RegExp]"

// Error
Object.prototype.toString.call(value) === "[object Error]"

// Type assertion with custom error
function assertIsString(value: unknown): asserts value is string {
  if (typeof value !== "string") {
    throw new Error("Value must be a string");
  }
}

// Usage
function process(value: unknown) {
  assertIsString(value);
  // value is now string
  console.log(value.toUpperCase());
}

// Discriminated unions
type Success = { type: "success"; data: string };
type Error = { type: "error"; message: string };
type Result = Success | Error;

function handleResult(result: Result) {
  if (result.type === "success") {
    // result is Success
    console.log(result.data);
  } else {
    // result is Error
    console.error(result.message);
  }
}

// in operator narrowing
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; sideLength: number };
type Shape = Circle | Square;

function getArea(shape: Shape) {
  if ("radius" in shape) {
    // shape is Circle
    return Math.PI * shape.radius ** 2;
  } else {
    // shape is Square
    return shape.sideLength ** 2;
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "useUnknownInCatchVariables": true,
    "alwaysStrict": true,
    "exactOptionalPropertyTypes": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false
  }
}