0Pricing
TypeScript Academy · บทเรียน

รูปแบบที่นำกลับมาใช้ใหม่สำหรับโมเดลข้อมูล

ประยุกต์ใช้รูปแบบเจเนอริกกับโมเดลจริง เช่น 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. อินเทอร์เฟซและนามแฝงชนิดข้อมูลแบบเจเนอริก
  2. ชนิดข้อมูลแบบมีเงื่อนไข (เบื้องต้น) และการกระจายบนยูเนียน
  3. รูปแบบที่นำกลับมาใช้ใหม่สำหรับโมเดลข้อมูล
← กลับไปที่ TypeScript Academy