TypeScript in real projects

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "strict": true,
    "noEmit": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

const input = document.querySelector<HTMLInputElement>("#pin");
if (!input) throw new Error("PIN input is missing");
input.value = "560001"; // OK: input is HTMLInputElement here

const form = document.querySelector("form"); // HTMLFormElement | null
form?.addEventListener("submit", (event) => {
  event.preventDefault(); // event is inferred as SubmitEvent
});

document.addEventListener("keydown", (e) => {
  console.log(e.key); // e is KeyboardEvent
});

async function loadProducts(): Promise<Product[]> {
  const res = await fetch("/api/products");
  if (!res.ok) throw new Error("HTTP " + res.status);
  const data: unknown = await res.json();
  if (!Array.isArray(data)) throw new Error("Expected a list");
  return data.filter(isProduct); // isProduct is a type guard
}

// With a schema library such as Zod, one description gives the check AND the type:
// const ProductSchema = z.object({ id: z.string(), name: z.string(), price: z.number() });
// type Product = z.infer<typeof ProductSchema>;
// const product = ProductSchema.parse(data); // throws if the shape is wrong

const total = document.getElementById("total") as HTMLSpanElement; // "trust me, it is a span"
const button = document.querySelector("button")!;                  // "trust me, it is not null"
// If you are wrong, the app crashes at runtime: TypeScript believed you.