อธิบายรูปร่างของออบเจ็กต์ของคุณด้วยชนิดข้อมูลที่แม่นยำ แล้วทำให้นำกลับมาใช้ซ้ำได้ด้วยอินเทอร์เฟซ
เปิดบทเรียนนี้ใน Kodokonใน JavaScript ออบเจ็กต์ (object) รวบรวมข้อมูลที่เกี่ยวข้องกันหลายชิ้นเป็นคู่คีย์-ค่า เหมือนบัตรบันทึกข้อมูล: หนังสือมีชื่อเรื่องและจำนวนหน้า ใน TypeScript คุณสามารถอธิบาย รูปร่าง (shape) ที่แน่นอนของออบเจ็กต์ได้: มันมีพร็อพเพอร์ตี้อะไรบ้าง และแต่ละอย่างเป็นชนิดใด
const book: { title: string; pages: number } = {
title: "The Little Prince",
pages: 96,
};
console.log(book.title); // "The Little Prince"การเขียนรูปร่างออกมาทุกครั้งกลายเป็นเรื่องซ้ำซากอย่างรวดเร็ว อินเทอร์เฟซ (interface) ตั้งชื่อให้กับรูปร่างนั้น เพื่อให้คุณนำมาใช้ซ้ำได้ทุกที่ คุณประกาศมันด้วยคีย์เวิร์ด interface ตามด้วยชื่อ (ขึ้นต้นด้วยตัวพิมพ์ใหญ่ตามธรรมเนียม) แล้วตามด้วยรายการพร็อพเพอร์ตี้และชนิดข้อมูลของแต่ละอัน
interface Recipe {
name: string;
servings: number;
isVegetarian: boolean;
}
const pancakes: Recipe = {
name: "Pancakes",
servings: 4,
isVegetarian: true,
};พร็อพเพอร์ตี้ทั้งหมดของอินเทอร์เฟซจำเป็นต้องมีโดยค่าเริ่มต้น: การลืม servings จะทำให้เกิดข้อผิดพลาด ในการทำให้พร็อพเพอร์ตี้เป็น ทางเลือก (optional) ให้เพิ่มเครื่องหมายคำถาม ? ถัดจากชื่อของมันทันที จากนั้นออบเจ็กต์จะถูกสร้างโดยมีหรือไม่มีพร็อพเพอร์ตี้นั้นก็ได้
interface Contact {
name: string;
phone: string;
email?: string; // optional thanks to the ?
}
const alice: Contact = {
name: "Alice",
phone: "0601020304",
}; // allowed: email can be omitted