โจทย์ 4 ข้อจากสไลด์ — ลองทำเองก่อนดูเฉลย

tsc  Version 7.0.2       # ได้จาก tsc -v
node v24.14.0            # ได้จาก node --version

วิธีใช้บทนี้ให้ได้ผลจริง

ลำดับที่ผมอยากให้ทำ ต่อโจทย์หนึ่งข้อ:

1. อ่านโจทย์ + ดูข้อมูลตั้งต้น
2. อ่านหัวข้อ "คำถามที่โจทย์ไม่ได้ตอบ" ก่อน แล้วตัดสินใจว่าคุณจะเลือกทางไหน — จดไว้
3. เปิดไฟล์ .ts ของตัวเองแล้วเขียน
4. รัน tsc --noEmit --strict ไฟล์.ts ให้ผ่านก่อน แล้วค่อยรันดูค่า
5. ค่อยกดปุ่ม เฉลย

1 · Grocery App — กรองของที่มีอยู่ แล้วทำชื่อเป็นตัวพิมพ์ใหญ่

โจทย์จากสไลด์หน้า 40: "Create function to filter available items and map names to UPPERCASE."

ข้อมูลตั้งต้นที่ให้มา:

interface GroceryItem {
  name: string;
  price: number;
  available: boolean;
}

const groceries: GroceryItem[] = [
  { name: "apple",  price: 15, available: true  },
  { name: "milk",   price: 45, available: false },
  { name: "bread",  price: 35, available: true  },
  { name: "butter", price: 60, available: false },
  { name: "eggs",   price: 55, available: true  },
];

ก่อนเขียน — จะใช้ตัวไหน แล้วเรียงยังไง?

โจทย์ใช้คำสองคำที่เป็นชื่อ method ตรง ๆ อยู่แล้ว: filter กับ map
คำถามที่เหลือคือ ลำดับ — filter ก่อนแล้ว map หรือกลับกัน
ทั้งสองลำดับให้ผลลัพธ์เหมือนกันในข้อนี้ แต่งานที่เครื่องทำไม่เท่ากัน: กรองก่อนแปลว่าแปลงแค่ 3 ชิ้น · แปลงก่อนแปลว่าแปลง 5 ชิ้นแล้วทิ้ง 2
และถ้าเรียง map ก่อน คุณจะไม่มี available ให้กรองแล้ว ถ้า map คืนแค่ string

function availableNames(items: GroceryItem[]): string[] {
  return items
    .filter((item) => item.available)
    .map((item) => item.name.toUpperCase());
}

console.log(availableNames(groceries));
console.log(groceries[0]);

[ 'APPLE', 'BREAD', 'EGGS' ]
{ name: 'apple', price: 15, available: true }

2 · Movie App — เอาหนัง 3 เรื่องคะแนนดีที่สุด เรียงมากไปน้อย

โจทย์จากสไลด์หน้า 41: "Create a function to filter top 3 best rating movie and sort highest to lowest."

interface Movie {
  title: string;
  rating: number;
  genre: string;
}

const movies: Movie[] = [
  { title: "Inception",    rating: 8.8, genre: "sci-fi"   },
  { title: "The Room",     rating: 3.7, genre: "drama"    },
  { title: "Interstellar", rating: 8.6, genre: "sci-fi"   },
  { title: "Avengers",     rating: 7.1, genre: "action"   },
  { title: "Parasite",     rating: 8.5, genre: "thriller" },
  { title: "John Wick",    rating: 7.4, genre: "action"   },
];

ก่อนเขียน — คำว่า "filter top 3" ในโจทย์ หมายถึง .filter() จริงหรือเปล่า?

ไม่ใช่ — และนี่คือจุดที่คนพลาดกันมากที่สุดในข้อนี้
.filter() ตัดสินทีละชิ้นด้วยเงื่อนไขที่ดูจากชิ้นนั้นชิ้นเดียว แต่ "top 3" ต้องรู้จักทั้งกองก่อนถึงจะบอกได้ว่าใครติดสามอันดับแรก
ท่าที่ตรงกับโจทย์คือ เรียงก่อน แล้วตัดเอา 3 ตัวแรก — sort แล้ว slice

const best = movies.sort((a, b) => b.rating - a.rating).slice(0, 3);
console.log(best.map((m) => m.title));
console.log(movies.map((m) => m.title));   // ← บรรทัดนี้

[ 'Inception', 'Interstellar', 'Parasite' ]
[
  'Inception',
  'Interstellar',
  'Parasite',
  'John Wick',
  'Avengers',
  'The Room'
]

function topRated(list: Movie[], n: number): Movie[] {
  return [...list]                              // ← ก็อปกองใหม่ก่อน
    .sort((a, b) => b.rating - a.rating)
    .slice(0, n);
}

console.log(topRated(movies, 3).map((m) => `${m.title} ${m.rating}`));

[ 'Inception 8.8', 'Interstellar 8.6', 'Parasite 8.5' ]

3 · Food Delivery — ยอดออเดอร์ที่ส่งแล้ว เกิน 500 คืนเงิน 10%

โจทย์จากสไลด์หน้า 42: "Create a function to calculate delivered orders if total more than 500 apply 10% to cash back to customer."

interface Order {
  id: number;
  item: string;
  price: number;
  status: "delivered" | "pending" | "cancelled";
}

const orders: Order[] = [
  { id: 1, item: "Pizza",  price: 280, status: "delivered" },
  { id: 2, item: "Sushi",  price: 450, status: "cancelled" },
  { id: 3, item: "Burger", price: 150, status: "delivered" },
  { id: 4, item: "Pasta",  price: 220, status: "delivered" },
  { id: 5, item: "Salad",  price: 120, status: "pending"   },
];

ก่อนเขียน — จะใช้ตัวไหน?

ข้อนี้ต้องใช้ สามตัวต่อกัน: filter เอาเฉพาะ "delivered" → reduce รวมราคาให้เหลือตัวเลขเดียว → แล้วค่อยตัดสินใจเรื่องส่วนลด
ตัวที่ยังไม่เคยใช้ในสองข้อแรกคือ reduce — มันคือตัวที่ยุบ array ให้เหลือค่าเดียว

interface Bill {
  total: number;
  cashBack: number;
  payable: number;
}

function summarize(list: Order[]): Bill {
  const total = list
    .filter((o) => o.status === "delivered")
    .reduce((sum, o) => sum + o.price, 0);   // ← ค่าตั้งต้น 0

  // เลือกแล้วว่า "เกิน 500" = มากกว่า 500 (500 พอดีไม่ได้คืน)
  const cashBack = total > 500 ? total * 0.1 : 0;
  return { total, cashBack, payable: total - cashBack };
}

console.log(summarize(orders));

{ total: 650, cashBack: 65, payable: 585 }

เรื่องปัดเศษ — ผมรันแล้วผลไม่ตรงกับที่คาดไว้ ขอเล่าตามจริง

ก่อนรัน ผมคิดว่าจะได้โชว์กับดักเลขทศนิยมของคอมพิวเตอร์ตรงนี้พอดี
แต่รันจริงแล้ว 650 * 0.1 ได้ 65 เป๊ะ ๆ ไม่มีเศษหลุด

> 650 * 0.1
65

ข้อมูลชุดนี้บังเอิญปลอดภัย ไม่ได้แปลว่าปัญหาไม่มี
ผมเลยลองยิงราคาที่มีทศนิยมแบบที่ร้านอาหารใช้จริง แล้วมันโผล่ทันที:

> 129.9 * 3
389.70000000000005

> 0.1 + 0.2
0.30000000000000004

> 129.9 + 220.1 + 300.5
650.5
> 650.5 * 0.1
65.05

4 · HR Payroll — รวมเงินเดือนพนักงาน full-time แยกตามตำแหน่ง

โจทย์จากสไลด์หน้า 43: "Create a function to calculate the total monthly salary for full-time by roles."

interface Employee {
  name: string;
  role: string;
  type: "full-time" | "part-time";
  dailyRate: number;
  workDays: number;
}

const employees: Employee[] = [
  { name: "Alice", role: "developer", type: "full-time", dailyRate: 2000, workDays: 22 },
  { name: "Bob",   role: "designer",  type: "full-time", dailyRate: 1800, workDays: 22 },
  { name: "Carol", role: "developer", type: "part-time", dailyRate: 1200, workDays: 10 },
  { name: "Dave",  role: "developer", type: "full-time", dailyRate: 2200, workDays: 22 },
  { name: "Eve",   role: "manager",   type: "full-time", dailyRate: 2500, workDays: 22 },
];

ก่อนเขียน — ข้อนี้ต่างจากข้อ 3 ตรงไหน?

ข้อ 3 ยุบทั้งกองให้เหลือตัวเลขเดียว · ข้อนี้ยุบให้เหลือobject ที่มีหลายช่อง (developer เท่าไหร่ · designer เท่าไหร่ · manager เท่าไหร่)
แต่ตัวที่ใช้ยังเป็น reduce ตัวเดิม — เปลี่ยนแค่ชนิดของ accumulator จาก number เป็น Record<string, number>
นี่คือจุดที่คนเข้าใจ reduce จริง ๆ กับคนที่จำสูตร sum ได้อย่างเดียวจะแยกกันชัด

function payrollByRole(list: Employee[]): Record<string, number> {
  return list
    .filter((e) => e.type === "full-time")
    .reduce<Record<string, number>>((acc, e) => {
      acc[e.role] = (acc[e.role] ?? 0) + e.dailyRate * e.workDays;
      return acc;
    }, {});
}

const result = payrollByRole(employees);
console.log(result);
console.log(result["intern"]);
console.log(Object.keys(result));

{ developer: 92400, designer: 39600, manager: 55000 }
undefined
[ 'developer', 'designer', 'manager' ]

acc[e.role] = acc[e.role] + e.dailyRate * e.workDays;

{ developer: NaN, designer: NaN, manager: NaN }

5 · สรุปคำถามที่ต้องถามก่อนพิมพ์บรรทัดแรก

ทั้งสี่ข้อมีรูปแบบเดียวกัน: โจทย์บอกว่าจะทำอะไร แต่ไม่ได้บอกว่าขอบมันอยู่ตรงไหน
ตารางนี้คือของที่ผมจะพิมพ์ส่งกลับไปถามคนออกโจทย์จริง ๆ ก่อนลงมือ:

6 · Recap ของทั้งกลุ่ม (สไลด์หน้า 44–48)

สไลด์ปิดท้ายด้วยการทวนสี่เรื่องที่ใช้ในโจทย์ทุกข้อ:

Core Types — ชนิดพื้นฐานและกอง (หน้า 45)

/** ===== PRIMITIVE TYPE ===== */
const message: string = "Hello World";
const numeric: number = 1000;
const isEnabled: boolean = true;

/** ===== ARRAY COLLECTION ===== */
const scoreList: Array<number> = [40, 45, 50, 43, 50];
const students: Array<string> = [
  "John Doe",
  "Frederic Castro",
  "Josie Watson",
  "Claude Cole",
  "Dominik James",
];

Array<number> กับ number[] เป็นอันเดียวกันเป๊ะ เขียนได้ทั้งสองแบบ
สไลด์ใช้ Array<T> ในหน้านี้ แต่ในหน้าโจทย์ทั้งสี่ข้อใช้ Movie[] · Order[] — แบบหลังพบบ่อยกว่าในโค้ดจริง

Interface และ Type — สองวิธีตั้งชื่อรูปร่างข้อมูล (หน้า 46)

type PairTuple = [number, boolean, string];
type StudentIdType = number | string;
type ClassroomType = {
  name: string;
  capability: number;
};

interface IGameSession {
  round: string;
  score: number;
}

interface ITwentyFourGame extends IGameSession {
  streak: number;
  hasTimer: boolean;
}

Function — เขียนได้สองแบบ (หน้า 47)

function sum(num1: number, num2: number): number {
  return num1 + num2
}

const sum = (num1: number, num2: number): number => {
  return num1 + num2
}

ทั้งสองแบบใช้ได้ · แบบล่าง (arrow function) คือแบบที่คุณเขียนไปแล้วเป็นสิบครั้งในบทนี้ ตอนส่งเข้า filter · map · reduce — แค่ไม่ได้ตั้งชื่อให้มัน

Transform Element — เปลี่ยนรูปข้อมูล (หน้า 48)

// มี [...] นำหน้า (แบบเฉลยข้อ 2) — splice ควักแค่กองสำเนา ของเดิมไม่โดน
[...movies].sort((a, b) => b.rating - a.rating).splice(0, 3)
// คืน  [ 'Inception', 'Interstellar', 'Parasite' ]
// movies เหลือ 6 เรื่อง ลำดับเดิมครบ ← ปลอดภัย

// ไม่มี [...] นำหน้า — splice ควักของจริง
movies.sort((a, b) => b.rating - a.rating).splice(0, 3)
// คืน  [ 'Inception', 'Interstellar', 'Parasite' ]  ← เหมือนกันเป๊ะ
// movies เหลือ [ 'John Wick', 'Avengers', 'The Room' ] ← หนังดีสามเรื่องหายไปจากตัวแปร!

ทดสอบความเข้าใจ

ถามกลับได้เลย

ถ้าเฉลยข้อไหนอ่านแล้วยังไม่เห็นภาพ หรือคุณเขียนอีกท่าแล้วผลไม่ตรงกับในบท — เอาโค้ดที่คุณเขียนมาถามได้เลย พร้อมบรรทัดที่ tsc ฟ้อง
โดยเฉพาะถ้าคุณเลือกตอบข้อกำกวมต่างจากในบท (เช่นเลือก >= แทน >) — นั่นไม่ใช่ความผิด แต่เป็นจุดที่ควรเอามาคุยกันว่าทำไมถึงเลือกแบบนั้น

อ้างอิง

• MDN — Array.prototype.sort() — อ่านย่อหน้าแรกกับหัวข้อ Description ตรงที่เขียนว่ามันเรียง in place และตรงที่ยืนยันว่า sort เป็น stable · เป็นที่มาของกับดักใหญ่ที่สุดในบทนี้
• MDN — Array.prototype.reduce() — อ่านหัวข้อ initialValue ให้ครบ จะเห็นเลยว่าถ้าไม่ใส่แล้วจะเกิดอะไร ทั้งเรื่อง type และเรื่อง TypeError บน array ว่าง
• MDN — Array.prototype.toSorted() — ดูตาราง browser compatibility ท้ายหน้า ก่อนตัดสินใจใช้แทน [...arr].sort() ในโปรเจกต์จริง
• TypeScript — noUncheckedIndexedAccess — อ่านตัวอย่างสองก้อนในหน้านั้น จะเห็นความต่างของ T กับ T | undefined ซึ่งคือเหตุผลที่ข้อ 4 ได้ NaN โดยไม่มีใครเตือน
• TypeScript Handbook — Everyday Types — อ่านหัวข้อ Union Types และ Type Aliases vs Interfaces เพื่อเข้าใจว่าทำไม status ถึงเขียนเป็น union ได้แต่ต้องใช้ type ไม่ใช่ interface