คงไว้ซึ่ง type ที่เชื่อถือได้ที่ขอบเขตของแอปพลิเคชัน ซึ่งเป็นที่ที่ DOM เครือข่าย และ JSON หลุดพ้นจากคอมไพเลอร์
เปิดบทเรียนนี้ใน Kodokonโค้ดในโลกจริงเริ่มต้นที่ซึ่ง type อันสมบูรณ์แบบสิ้นสุดลง: DOM เครือข่าย และ JSON คืนข้อมูลที่ TypeScript เดาไม่ได้ พรมแดนแรก: DOM querySelector คืน Element | null ซึ่งเป็น type ที่คลุมเครือเกินกว่าจะอ่าน value หรือเรียก focus()
const input = document.querySelector<HTMLInputElement>(
"#email"
);
if (input) {
input.value = "test@example.com";
input.focus();
}type parameter คือคำสัญญาที่คุณให้ไว้กับคอมไพเลอร์: เป็นหน้าที่ของคุณที่จะเล็งไปยัง selector ที่ถูกต้อง เมื่อ element มาจาก event ให้เลือกใช้การตรวจสอบด้วย instanceof ซึ่งตรวจสอบ type ขณะรันไทม์จริง ๆ
const form = document.querySelector("form");
form?.addEventListener("submit", (event) => {
event.preventDefault();
if (event.target instanceof HTMLFormElement) {
console.log(new FormData(event.target));
}
});พรมแดนที่สอง: เครือข่าย response.json() คืน Promise<any> หรือกล่าวอีกนัยหนึ่งคือประตูที่เปิดกว้างสู่อะไรก็ได้ ขั้นต่ำในระดับมืออาชีพคือ: ประกาศ type ที่คาดหวังไว้ ตรวจสอบ response.ok และรวมศูนย์การเรียกไว้ในฟังก์ชันที่มี type
interface Post {
id: number;
title: string;
}
async function getPost(id: number): Promise<Post> {
const url = `https://api.example.com/posts/${id}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return (await response.json()) as Post;
}as Post นั้นยังคงเป็นคำแถลงความไว้วางใจ: หาก API เปลี่ยนไป ไม่มีอะไรเตือนคุณขณะรันไทม์ สำหรับข้อมูลที่สำคัญยิ่ง ให้เขียน type guard ที่ตรวจสอบรูปทรงที่แท้จริงของ JSON ก่อนใช้งานมัน
function isPost(value: unknown): value is Post {
if (typeof value !== "object" || value === null) {
return false;
}
const obj = value as Record<string, unknown>;
return (
typeof obj.id === "number" &&
typeof obj.title === "string"
);
}