TypeScript 5 6

// Before - bugs not caught
function processValue(value: string) {
  // ❌ BUG: string is always truthy, ?? never used
  const result = value ?? "default";
  // "default" can never be reached

  // ❌ BUG: empty string is falsy, unintended fallback
  const name = value || "Anonymous";
  // "" becomes "Anonymous" incorrectly
}

function getCount(count: number) {
  // ❌ BUG: 0 is falsy, unintended fallback
  return count || 10;
  // count = 0 becomes 10 incorrectly
}

// After - errors prevent bugs
function processValue(value: string) {
  const result = value ?? "default";
  // ❌ Error: Left side is never null/undefined
  // Suggests: Remove ?? or change to || if intentional
}

function getCount(count: number) {
  return count || 10;
  // ❌ Error: Left side might be 0 (falsy)
  // Suggests: Use ?? for null/undefined only
}

// ✅ Correct patterns
function processValue(value: string | null | undefined) {
  const result = value ?? "default";
  // ✅ OK: value might be null/undefined
}

function getCount(count: number | null) {
  return count ?? 10;
  // ✅ OK: Only replaces null, not 0
}

function getName(name: string) {
  // ✅ Explicit check if empty string is intentional
  return name || "Anonymous";
  // TypeScript suggests: Did you mean ?? instead?
}

interface ApiResponse {
  data: unknown;
  error: string | null;
  status: number;
}

// Before - buggy nullish check
function handleResponse(response: ApiResponse) {
  // ❌ Error: response.data is always defined (never null/undefined)
  const data = response.data ?? {};
  // Suggests: data can't be null/undefined, check logic

  // ❌ Error: status is number, can't be nullish
  const statusCode = response.status ?? 500;
  // Suggests: status might be 0, use || if intentional

  // ✅ Correct: error might be null
  const errorMessage = response.error ?? "Unknown error";
}

// After - correct types and checks
interface ApiResponse {
  data?: unknown; // ✅ Explicitly optional
  error: string | null;
  status: number;
}

function handleResponse(response: ApiResponse) {
  // ✅ OK: data is optional (can be undefined)
  const data = response.data ?? {};

  // ✅ OK: error can be null
  const errorMessage = response.error ?? "Unknown error";

  // ✅ Correct: check for falsy values explicitly
  if (!response.status || response.status === 0) {
    // Handle edge case
  }
}

interface Config {
  host: string;
  port: number;
  timeout: number;
  retries: number;
}

// Buggy default assignment
function createConfig(userConfig: Partial<Config>): Config {
  return {
    // ❌ Error: string can't be nullish, ?? unnecessary
    host: userConfig.host ?? "localhost",
    // Suggests: host is string | undefined, correct type

    // ❌ Error: port might be 0 (valid value)
    port: userConfig.port || 8080,
    // BUG: port = 0 becomes 8080

    // ❌ Error: timeout might be 0 (valid value)
    timeout: userConfig.timeout || 30000,
    // BUG: timeout = 0 becomes 30000

    retries: userConfig.retries || 3,
    // ❌ Same bug with retries = 0
  };
}

// Fixed with correct types and checks
interface ConfigInput {
  host?: string;
  port?: number;
  timeout?: number;
  retries?: number;
}

function createConfig(userConfig: ConfigInput): Config {
  return {
    // ✅ OK: host is optional
    host: userConfig.host ?? "localhost",

    // ✅ OK: Use ?? to preserve 0 as valid value
    port: userConfig.port ?? 8080,

    // ✅ OK: 0 is valid timeout, ?? preserves it
    timeout: userConfig.timeout ?? 30000,

    // ✅ OK: 0 retries is valid
    retries: userConfig.retries ?? 3,
  };
}

// Now: port = 0, timeout = 0, retries = 0 work correctly
const config = createConfig({ port: 0, timeout: 0, retries: 0 });
// ✅ config.port = 0 (not 8080)
// ✅ config.timeout = 0 (not 30000)
// ✅ config.retries = 0 (not 3)

interface FormData {
  email: string;
  age: number;
  terms: boolean;
  newsletter: boolean;
}

// Buggy validation with truthy checks
function validateForm(data: Partial<FormData>): boolean {
  // ❌ Error: age might be 0 (valid value, but falsy)
  const hasAge = data.age || false;
  // BUG: age = 0 treated as missing

  // ❌ Error: terms is boolean, can't be nullish
  const agreedToTerms = data.terms ?? false;
  // Should check for undefined explicitly

  // ❌ Error: newsletter is boolean
  const wantsNewsletter = data.newsletter || false;
  // BUG: false becomes false (correct) but check is wrong

  return !!data.email && hasAge && agreedToTerms;
}

// Fixed validation with correct checks
function validateForm(data: Partial<FormData>): boolean {
  // ✅ Explicit undefined check
  const hasEmail = data.email !== undefined && data.email !== "";

  // ✅ Check for undefined, preserve 0 as valid
  const hasAge = data.age !== undefined;

  // ✅ Explicit boolean check (not nullish)
  const agreedToTerms = data.terms === true;

  return hasEmail && hasAge && agreedToTerms;
}

// Now validation works correctly
validateForm({ email: "user@example.com", age: 0, terms: true });
// ✅ Valid: age = 0 is accepted

validateForm({ email: "user@example.com", age: 18, terms: false });
// ❌ Invalid: terms must be true

interface FeatureFlags {
  darkMode: boolean;
  analytics: boolean;
  beta: boolean;
}

// Buggy flag checks
function checkFeatures(flags: Partial<FeatureFlags>) {
  // ❌ Error: darkMode is boolean, can't be nullish
  const isDark = flags.darkMode ?? true;
  // Should check for undefined explicitly

  // ❌ Error: analytics is boolean
  const trackAnalytics = flags.analytics || false;
  // BUG: false (disable) becomes false (correct) but wrong check

  // ❌ Error: beta is boolean
  if (flags.beta ?? false) {
    // Should check undefined explicitly
  }
}

// Fixed flag checks
function checkFeatures(flags: Partial<FeatureFlags>) {
  // ✅ Explicit undefined check with default
  const isDark = flags.darkMode !== undefined ? flags.darkMode : true;

  // ✅ Explicit boolean check
  const trackAnalytics = flags.analytics === true;

  // ✅ Explicit undefined/boolean check
  const betaEnabled = flags.beta === true;

  if (betaEnabled) {
    enableBetaFeatures();
  }
}

// Now flags work correctly
checkFeatures({ darkMode: false, analytics: false, beta: false });
// ✅ All flags respected as false

// Iterator helpers on any iterable
function* numbers() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
}

// .map() - Transform values
const doubled = numbers().map((n) => n * 2);
// ✅ Type: IterableIterator<number>
console.log([...doubled]); // [2, 4, 6, 8, 10]

// .filter() - Filter values
const evens = numbers().filter((n) => n % 2 === 0);
// ✅ Type: IterableIterator<number>
console.log([...evens]); // [2, 4]

// .take() - Take first N values
const firstThree = numbers().take(3);
// ✅ Type: IterableIterator<number>
console.log([...firstThree]); // [1, 2, 3]

// .drop() - Skip first N values
const afterTwo = numbers().drop(2);
// ✅ Type: IterableIterator<number>
console.log([...afterTwo]); // [3, 4, 5]

// .flatMap() - Map and flatten
function* arrays() {
  yield [1, 2];
  yield [3, 4];
}

const flattened = arrays().flatMap((arr) => arr);
// ✅ Type: IterableIterator<number>
console.log([...flattened]); // [1, 2, 3, 4]

// .reduce() - Reduce to single value
const sum = numbers().reduce((acc, n) => acc + n, 0);
// ✅ Type: number
console.log(sum); // 15

// .toArray() - Convert to array
const arr = numbers().toArray();
// ✅ Type: number[]
console.log(arr); // [1, 2, 3, 4, 5]

// .some() - Check if any match
const hasEven = numbers().some((n) => n % 2 === 0);
// ✅ Type: boolean
console.log(hasEven); // true

// .every() - Check if all match
const allPositive = numbers().every((n) => n > 0);
// ✅ Type: boolean
console.log(allPositive); // true

// .find() - Find first match
const firstEven = numbers().find((n) => n % 2 === 0);
// ✅ Type: number | undefined
console.log(firstEven); // 2

function* fetchUsers() {
  yield { id: 1, name: "Alice", age: 30, active: true };
  yield { id: 2, name: "Bob", age: 25, active: false };
  yield { id: 3, name: "Charlie", age: 35, active: true };
  yield { id: 4, name: "Diana", age: 28, active: true };
}

// Chain iterator helpers for efficient processing
const activeUserNames = fetchUsers()
  .filter((user) => user.active)
  .map((user) => user.name)
  .take(2)
  .toArray();
// ✅ Type: string[]
// Result: ["Alice", "Charlie"]

// Lazy evaluation - only processes needed items
const firstActiveUser = fetchUsers().find((user) => user.active);
// ✅ Type: User | undefined
// Only evaluates until first match (efficient)

// Project structure:
// src/
//   features/
//     auth/
//       components/
//         LoginForm.tsx    ← You are here
//         Button.tsx
//     shared/
//       components/
//         Button.tsx

// Before - random order in auto-import suggestions
import { Button } from "???";
// Suggestions:
// 1. ../../../shared/components/Button
// 2. ./Button
// (random order, confusing)

// After - region-prioritized
import { Button } from "???";
// Suggestions (prioritized):
// 1. ./Button                          ← Same directory (highest priority)
// 2. ../../../shared/components/Button ← Different region (lower priority)
// ✅ Closer imports suggested first

// library.js (untyped JavaScript with side effects)
console.log("Library loaded!");
globalThis.configureApp = function () {
  /* ... */
};

// app.ts
import "./library.js";
// ⚠️ Warning with --noUncheckedSideEffectImports:
// Side-effect import from untyped module

// ✅ Fix: Add explicit types
declare module "./library.js" {
  export function configureApp(): void;
}

import "./library.js";
// ✅ Now type-checked

// Before - need both flags
{
  "compilerOptions": {
    "noCheck": true,
    "skipLibCheck": true
  }
}

// After - noCheck implies skipLibCheck
{
  "compilerOptions": {
    "noCheck": true
    // skipLibCheck automatically enabled
  }
}

npm install -D typescript@5.6

// Before - buggy check
const value = alwaysDefined ?? "default";

// After - remove unnecessary ??
const value = alwaysDefined;

// Or fix type if it should be optional
const value: Type | undefined = ...;
const result = value ?? "default"; // ✅ Now correct

// Before - buggy for 0, false
const port = userPort || 8080;

// After - preserve 0 as valid
const port = userPort ?? 8080;

// Before - manual iteration
function* transform() {
  for (const item of source()) {
    if (item > 0) {
      yield item * 2;
    }
  }
}

// After - iterator helpers
const result = source()
  .filter((item) => item > 0)
  .map((item) => item * 2);

{
  "compilerOptions": {
    "noUncheckedSideEffectImports": true
  }
}