TypeScript 4 9

// Option 1: Annotate type (safe but loses precision)
const config: Record<string, string | number> = {
  host: "localhost", // Type: string | number (too wide)
  port: 8080, // Type: string | number (too wide)
};

config.host.toUpperCase(); // ❌ Error - might be number
// Lost string literal type

// Option 2: No annotation (precise but unsafe)
const config = {
  host: "localhost", // Type: "localhost" (precise!)
  port: 8080, // Type: 8080 (precise!)
  timeout: "30000", // ❌ Typo: should be number, not string
};
// No type checking against expected structure

const config = {
  host: "localhost",
  port: 8080,
  timeout: 30000,
} satisfies Record<string, string | number>;

// ✅ Type checked against Record<string, string | number>
// ✅ host type: "localhost" (precise literal)
// ✅ port type: 8080 (precise literal)

config.host.toUpperCase(); // ✅ OK - host is string
config.port.toFixed(2); // ✅ OK - port is number

// Would catch typo:
const bad = {
  timeout: "30000", // ❌ Error with satisfies
} satisfies Record<string, string | number>; // String not in union

type RouteHandler = (req: Request, res: Response) => void;

type Routes = Record<string, RouteHandler>;

// Without satisfies - lose literal types
const routes: Routes = {
  "/api/users": (req, res) => {
    /* ... */
  },
  "/api/posts": (req, res) => {
    /* ... */
  },
};

type RoutePath = keyof typeof routes;
// ❌ Type: string (too wide, not useful)

// With satisfies - preserve literal types
const routes = {
  "/api/users": (req, res) => {
    /* ... */
  },
  "/api/posts": (req, res) => {
    /* ... */
  },
  "/api/comments": (req, res) => {
    /* ... */
  },
} satisfies Routes;

type RoutePath = keyof typeof routes;
// ✅ Type: "/api/users" | "/api/posts" | "/api/comments"

// Usage with precise autocomplete
function navigateTo(path: RoutePath) {
  // IDE autocompletes exact paths
}

navigateTo("/api/users"); // ✅ OK
navigateTo("/api/invalid"); // ❌ Error

type Color = `#${string}` | `rgb(${string})` | `hsl(${string})`;

type Palette = Record<string, Color>;

// Validate colors while keeping exact hex values
const theme = {
  primary: "#0173B2",
  secondary: "#029E73",
  accent: "#DE8F05",
  background: "#FFFFFF",
  text: "#000000",
  // error: "not-a-color" // ❌ Would error with satisfies
} satisfies Palette;

// ✅ Type checked against Palette structure
// ✅ theme.primary type: "#0173B2" (exact value)
// ✅ theme.secondary type: "#029E73"

// Can use exact values in other types
type ThemeKey = keyof typeof theme;
// Type: "primary" | "secondary" | "accent" | "background" | "text"

type PrimaryColor = (typeof theme)["primary"];
// Type: "#0173B2" (precise!)

type APIResponse = {
  [endpoint: string]: {
    method: "GET" | "POST" | "PUT" | "DELETE";
    response: unknown;
  };
};

// Validate structure, preserve endpoint literals
const api = {
  getUsers: {
    method: "GET",
    response: [] as User[],
  },
  createUser: {
    method: "POST",
    response: {} as User,
  },
  updateUser: {
    method: "PUT",
    response: {} as User,
  },
} satisfies APIResponse;

// ✅ Validated against APIResponse
// ✅ api.getUsers.method type: "GET"
// ✅ api.createUser.method type: "POST"

type APIEndpoint = keyof typeof api;
// Type: "getUsers" | "createUser" | "updateUser" (precise!)

// Type-safe API client
function callAPI<E extends APIEndpoint>(endpoint: E): (typeof api)[E]["response"] {
  const config = api[endpoint];
  // config.method has precise literal type
  return fetch(`/api/${endpoint}`, { method: config.method }).then((r) => r.json());
}

// Return type inferred from api definition
const users = await callAPI("getUsers"); // Type: User[]
const newUser = await callAPI("createUser"); // Type: User

type FeatureFlags = Record<string, boolean>;

// Validate structure, preserve exact boolean values
const features = {
  darkMode: true,
  betaFeatures: false,
  analytics: true,
  notifications: false,
} satisfies FeatureFlags;

// ✅ Type checked as Record<string, boolean>
// ✅ features.darkMode type: true (literal)
// ✅ features.betaFeatures type: false (literal)

// Can narrow based on literal types
type EnabledFeatures = {
  [K in keyof typeof features]: (typeof features)[K] extends true ? K : never;
}[keyof typeof features];
// Type: "darkMode" | "analytics" (only true features)

// Conditional rendering based on precise flags
function renderFeature<K extends keyof typeof features>(
  feature: K
): features[K] extends true ? JSX.Element : null {
  if (features[feature]) {
    return <div>Feature enabled</div> as any;
  }
  return null as any;
}

type Box<T> = { kind: "number"; value: number } | { kind: "string"; value: string };

function processBox(box: Box<unknown>) {
  if ("value" in box) {
    // ✅ Narrowed to: Box<unknown> (has value property)
    console.log(box.value);
  }
}

class Person {
  accessor name: string = "";
  // Equivalent to:
  // private _name: string = "";
  // get name() { return this._name; }
  // set name(value: string) { this._name = value; }
}

const value = parseFloat("invalid");

if (value === NaN) {
  // ⚠️ Warning: This comparison always returns false
  // Suggestion: Use Number.isNaN(value) instead
}

// ✅ Correct
if (Number.isNaN(value)) {
  console.log("Not a number");
}

npm install -D typescript@4.9

// Before
const config: Config = {
  /* ... */
};

// After
const config = {
  /* ... */
} satisfies Config;

// Before
if (x === NaN) {
  /* ... */
}

// After
if (Number.isNaN(x)) {
  /* ... */
}