Weather Dashboard

A weather dashboard requests weather observations and displays a city, measurement, and freshness time. Real weather services have different units, forecast intervals, credentials, and uncertainty. The core example parses a representative offline payload; the companion describes integrating a provider without claiming a live forecast.

The parser treats JSON as unknown and checks its fields. The timestamp and temperature are fictional test data, not current weather. A real dashboard must fetch from an actual service.

Never present a hard-coded demonstration temperature as current conditions; show the observation timestamp and provider context.

This source was compiled using TypeScript 5.8.3 with strict checking, then executed with Node.js 22.16.0. Its stdout below is the actual captured output. The core logic is runnable without a framework or a remote API; integration-specific examples appear in a separate lab when needed.

TypeScript source

type Weather = { city: string; temperatureC: number; observedAt: string };
function isWeather(value: unknown): value is Weather {
  return typeof value === "object" && value !== null &&
    "city" in value && typeof value.city === "string" &&
    "temperatureC" in value && typeof value.temperatureC === "number" &&
    "observedAt" in value && typeof value.observedAt === "string";
}
const raw: unknown = JSON.parse('{"city":"Pune","temperatureC":24,"observedAt":"2026-01-01T12:00:00Z"}');
console.log(isWeather(raw) ? `${raw.city}: ${raw.temperatureC}°C` : "Invalid weather response");

Verified output

Pune: 24°C

Compile: npx tsc --strict --target es2022 --module commonjs weather-dashboard.ts; run: node weather-dashboard.js. For examples importing node: modules, install @types/node as a development dependency; for browser or React projects use the separate lab setup.

The parser treats JSON as unknown and checks its fields. The timestamp and temperature are fictional test data, not current weather. A real dashboard must fetch from an actual service.

Before editing the code, predict what the output will be for one changed input. Run it and compare your prediction with the actual result.

Never present a hard-coded demonstration temperature as current conditions; show the observation timestamp and provider context.

Determine whether the issue belongs to the type system, a trust boundary, or actual runtime behavior before choosing a correction.

Add Fahrenheit conversion and an observed-at label. Add loading, empty, and error UI states for the real API.

Record expected success and failure outcomes, run the code, and compare the observed behavior. Keep the exercise compatible with strict type checking.

The parser treats JSON as unknown and checks its fields. The timestamp and temperature are fictional test data, not current weather. A real dashboard must fetch from an actual service.

Apply the same reasoning to the practice task, then integrate it into a real app only when the runtime and dependency setup are ready.