Bài 10. TypeScript với DOM và gọi API

Khái niệm và lý thuyết

Thư viện chuẩn của TS (lib.dom.d.ts) mô tả toàn bộ API trình duyệt. document.querySelector("input") trả về HTMLInputElement | null: TS buộc bạn xử lý trường hợp không tìm thấy phần tử.

Dữ liệu từ mạng là ranh giới tin cậy: kiểu TypeScript không kiểm tra được lúc chạy. Cách đúng là coi kết quả response.json() là unknown, rồi kiểm tra trước khi gán kiểu. Thư viện schema cho phép viết một lần, vừa kiểm tra runtime vừa suy ra kiểu tĩnh.

DOM và sự kiện

const o = document.querySelector<HTMLInputElement>("#ten");
const nut = document.getElementById("gui") as HTMLButtonElement | null;
if (o && nut) {
  nut.addEventListener("click", (e: MouseEvent) => {
    e.preventDefault();
    alert("Xin chào " + o.value.trim());
  });
}
document.addEventListener("keydown", e => {
  if (e.key === "Escape") console.log("Đóng"); // e tự là KeyboardEvent
});

fetch có kiểu

interface NguoiDung { id: number; name: string; email: string }

function laNguoiDung(x: unknown): x is NguoiDung {
  return typeof x === "object" && x !== null &&
    typeof (x as any).id === "number" && typeof (x as any).name === "string";
}

async function layDanhSach(): Promise<NguoiDung[]> {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  if (!res.ok) throw new Error("HTTP " + res.status);
  const data: unknown = await res.json();
  if (!Array.isArray(data) || !data.every(laNguoiDung))
    throw new Error("Dữ liệu không đúng định dạng");
  return data;
}

Kiểm tra bằng schema (Zod)

import { z } from "zod";
const NguoiDung = z.object({ id: z.number(), name: z.string(), email: z.email() });
type NguoiDung = z.infer<typeof NguoiDung>; // kiểu suy ra từ schema

const ds = z.array(NguoiDung).parse(await res.json());