รูปแบบที่นำกลับมาใช้ใหม่สำหรับโมเดลข้อมูล
ประยุกต์ใช้รูปแบบเจเนอริกกับโมเดลจริง เช่น Paginated , Result , DTO ที่ใช้ Pick/Omit/Partial และแผนที่ที่ใช้ id เป็นคีย์
รูปแบบที่นำกลับมาใช้ใหม่สำหรับโมเดลข้อมูล เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
บทนำ
เป้าหมาย: รวมรูปทรงข้อมูลที่ใช้บ่อยเป็นชนิดเจเนริกเพื่อใช้โครงสร้างซ้ำโดยไม่สูญเสียความปลอดภัยด้านชนิด
- ชนิดแบ่งหน้า<T>
- ชนิดผลลัพธ์<T,E>
- ออบเจ็กต์ถ่ายโอนข้อมูลด้วยการเลือก/การละเว้น/ชนิดบางส่วน
- map ที่ใช้รหัสเป็นคีย์
ชนิดแบ่งหน้า<T>
ชนิดแบ่งหน้า<T> รวมศูนย์ข้อมูลกำกับและคงชนิดรายการ T ให้แม่นยำสำหรับรายการต่าง ๆ
type Paginated<T> = {
items: T[];
total: number;
page: number;
pageSize: number;
};
type User = { id: number; name: string };
const page1: Paginated<User> = {
items: [{ id: 1, name: "Ada" }],
total: 10,
page: 1,
pageSize: 5,
};
console.log(page1.items[0].name);ชนิดผลลัพธ์<T,E>
ชนิดผลลัพธ์<T,E> จำลองความสำเร็จและความล้มเหลวอย่างชัดเจนด้วยตัวแยกแยะ (ok) เพื่อแยกแขนงอย่างปลอดภัย
type Ok<T> = { ok: true; data: T };
type Err<E = string> = { ok: false; error: E };
type Result<T, E = string> = Ok<T> | Err<E>;
function readUser(id: number): Result<{ id: number; name: string }> {
return id > 0 ? { ok: true, data: { id, name: "Ada" } } : { ok: false, error: "not found" };
}
const r = readUser(1);
if (r.ok) {
console.log(r.data.name);
} else {
console.error(r.error);
}รูปแบบออบเจ็กต์ถ่ายโอนข้อมูล
ด้วยการเลือก/การละเว้น/ชนิดบางส่วน คุณสามารถสร้างชนิดออบเจ็กต์ถ่ายโอนข้อมูลแบบกระชับจากแบบจำลองหลักได้ โดยไม่ต้องทำซ้ำ
type User = { id: number; name: string; email?: string; role: "user" | "admin" };
type UserCreateDto = Pick<User, "name" | "email">; // fields required to create
// Update = partial editable fields
type UserUpdateDto = Partial<Pick<User, "name" | "email">>;
const createBody: UserCreateDto = { name: "Ada", email: "a@x.io" };
const updateBody: UserUpdateDto = { name: "Ada L." };MapById<T>
MapById<T> จัดทำดัชนีเอนทิตีตาม id เพื่อค้นหาได้รวดเร็ว จำกัด T เพื่อรับประกันว่ามี id อยู่
type Key = string | number;
type MapById<T extends { id: Key }> = Record<Key, T>;
const byId: MapById<{ id: number; name: string }> = {
1: { id: 1, name: "Ada" },
2: { id: 2, name: "Lin" },
};
console.log(byId[1].name);เคล็ดลับ
เคล็ดลับ:
- ทำให้รูปแบบต่าง ๆ เล็กและนำมาประกอบกันได้
- เลือกใช้ยูเนียนที่มีตัวแยกแยะสำหรับเครื่องจักรสถานะ
- สร้างออบเจ็กต์ถ่ายโอนข้อมูลจากแบบจำลอง หลีกเลี่ยงการคัดลอกด้วยตนเอง
ตรวจสอบชนิดแบ่งหน้า<T>
ตรวจสอบอย่างรวดเร็ว: เหตุใดจึงควรกำหนดชนิดเจเนริกแบ่งหน้า<T>
สรุปทบทวน
สรุปทบทวน: ทำรูปทรงที่เกิดซ้ำให้เป็นแบบทั่วไป: ชนิดแบ่งหน้า<T> ชนิดผลลัพธ์<T,E> ออบเจ็กต์ถ่ายโอนข้อมูลด้วย การเลือก/การละเว้น/ชนิดบางส่วน และตารางจับคู่ที่จัดดัชนีด้วยรหัส ฟังก์ชันช่วยขนาดเล็กสามารถปรับใช้กับความสามารถต่าง ๆ ได้
คำถามที่พบบ่อย
บทเรียน “รูปแบบที่นำกลับมาใช้ใหม่สำหรับโมเดลข้อมูล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “รูปแบบที่นำกลับมาใช้ใหม่สำหรับโมเดลข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบที่นำกลับมาใช้ใหม่สำหรับโมเดลข้อมูล”
ประยุกต์ใช้รูปแบบเจเนอริกกับโมเดลจริง เช่น Paginated , Result , DTO ที่ใช้ Pick/Omit/Partial และแผนที่ที่ใช้ id เป็นคีย์ คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน
บทเรียน “รูปแบบที่นำกลับมาใช้ใหม่สำหรับโมเดลข้อมูล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- อินเทอร์เฟซและนามแฝงชนิดข้อมูลแบบเจเนอริก
- ชนิดข้อมูลแบบมีเงื่อนไข (เบื้องต้น) และการกระจายบนยูเนียน
- รูปแบบที่นำกลับมาใช้ใหม่สำหรับโมเดลข้อมูล