เจาะลึกพื้นฐาน React และ TypeScript: เขียน TSX ให้โปรสะอาดและลดบั๊กด้วย Type

ทำความรู้จัก React และ TypeScript ในแบบฉบับ TSX

เวลาเราเขียน React (ไลบรารีสำหรับสร้างหน้าจอเว็บ) เรามักจะเจอไฟล์ที่ลงท้ายด้วย .jsx หรือ .tsx ซึ่งเจ้า TSX ก็คือการเอา TypeScript (ภาษาที่ช่วยตรวจสอบความถูกต้องของข้อมูล) มาใส่ใน JSX (รูปแบบการเขียนโค้ดที่หน้าตาเหมือน HTML ใน JavaScript) นั่นเอง

ลองนึกภาพว่าปกติคุณเขียน HTML แบบอิสระ แต่พอใช้ TSX มันเหมือนมี "ครูฝึก" คอยตรวจการบ้านให้ตลอดเวลา ถ้าคุณพิมพ์ผิดหรือใส่ข้อมูลผิดประเภท โปรแกรมจะแจ้งเตือนทันทีตั้งแต่นาทีที่คุณยังไม่ได้รันโค้ดเลยครับ

การเข้าใจ TSX จะช่วยให้คุณทำงานได้ไวขึ้น เพราะไม่ต้องเสียเวลาเดาว่าตัวแปรนี้เก็บค่าอะไรไว้ หรือลืมส่งข้อมูลตัวไหนไปให้หน้าจอแสดงผลบ้าง ซึ่งเป็นทักษะสำคัญมากสำหรับโปรแกรมเมอร์มือใหม่ที่อยากเขียนโค้ดให้มีคุณภาพตั้งแต่เริ่ม

// ตัวอย่างการเขียนคอมโพเนนต์ด้วย TSX
interface UserProps {
  name: string; // กำหนดว่า name ต้องเป็นข้อความเท่านั้น
  age: number;  // กำหนดว่า age ต้องเป็นตัวเลขเท่านั้น
}

const UserCard = ({ name, age }: UserProps) => {
  return <div>{name} อายุ {age} ปี</div>;
};

จากโค้ดด้านบน เราใช้ interface (โครงสร้างของข้อมูล) มากำหนดกฎให้ UserCard เพื่อให้แน่ใจว่าใครก็ตามที่เรียกใช้ฟังก์ชันนี้ ต้องส่งค่า name และ age มาให้ถูกต้องตามประเภทที่ระบุไว้ครับ

กฎการเขียน TSX และการกำกับ Type ใน Expression

กฎเหล็กของ TSX คือทุกอย่างที่เขียนในปีกกา {} หรือที่เรียกว่า Expression (นิพจน์ที่คืนค่าออกมา) จะต้องได้รับการตรวจสอบ Type (ชนิดของข้อมูล) อย่างเข้มงวดเสมอครับ

การใส่ Type ให้กับข้อมูลใน Expression ช่วยให้คุณมั่นใจว่าค่าที่คุณจะเอาไปแสดงผลบนหน้าจอจะไม่เป็นค่าว่างหรือข้อมูลที่ผิดพลาด ซึ่งมักเป็นสาเหตุหลักที่ทำให้แอปฯ ค้างหรือพังโดยไม่รู้ตัว

ลองดูตัวอย่างการกำกับ Type ในส่วนของการแสดงผลกันครับ

// การกำกับ Type ใน Expression
const ScoreBoard = ({ score }: { score: number }) => {
  return (
    <div>
      {/* ใช้วงเล็บปีกกาเพื่อใส่ JavaScript เข้าไปใน HTML */}
      <p>คะแนนของคุณคือ: {score.toFixed(0)}</p>
    </div>
  );
};

ในตัวอย่าง {score.toFixed(0)} คือการใช้ Expression เพื่อแปลงตัวเลขให้เป็นทศนิยมศูนย์ตำแหน่ง ถ้าเราเผลอส่งข้อความมาแทนตัวเลข TypeScript จะรีบเตือนเราทันทีว่า "คุณทำแบบนี้ไม่ได้นะ" ช่วยลดบั๊ก (ข้อผิดพลาดของโปรแกรม) ได้มหาศาลครับ

การใช้ Fragment เพื่อความสะอาดของโค้ด

เวลาเราเขียน React เรามักต้องห่อหุ้ม Element หลายตัวไว้ในแท็กเดียวเสมอ แต่บางครั้งการใช้ <div> ครอบบ่อย ๆ จะทำให้โครงสร้าง HTML ของคุณดูรกและซับซ้อนเกินความจำเป็น

Fragment (แท็กเปล่าสำหรับห่อหุ้ม) จึงเข้ามาแก้ปัญหานี้ มันเหมือนการเอาของใส่กล่องพัสดุโดยไม่ใส่กล่องซ้อนกล่องให้เปลืองพื้นที่ ช่วยให้หน้าเว็บของคุณสะอาดและจัดการง่ายขึ้นมากครับ

// การใช้ Fragment
const MyComponent = () => {
  return (
    <>
      <h1>หัวข้อหลัก</h1>
      <p>เนื้อหาด้านใน</p>
    </>
  );
};

สัญลักษณ์ <> และ </> คือทางลัดของ Fragment ครับ เมื่อโปรแกรมรันขึ้นมาจริงๆ ตัว <> เหล่านี้จะไม่ถูกสร้างเป็น HTML จริงๆ บนหน้าเว็บ ทำให้โครงสร้างหน้าเว็บไม่เพี้ยนและไม่รกหูรกตาครับ

Strict Null Checks กับการ Rendering

ปัญหาที่โปรแกรมเมอร์มือใหม่เจอประจำคือ Null (ค่าที่ไม่มีตัวตน) หรือ Undefined (ค่าที่ยังไม่ได้กำหนด) ซึ่งถ้าเราเผลอเอาค่าพวกนี้ไปแสดงผลบนหน้าจอ มันจะทำให้แอปฯ พังทันที

เราจึงต้องเปิดใช้งาน Strict Null Checks (กฎการตรวจสอบค่าว่าง) ในโปรเจกต์เสมอ เพื่อบังคับให้เราต้องจัดการกับกรณีที่ข้อมูลอาจไม่มีอยู่จริงก่อนที่จะเขียนโค้ดแสดงผลครับ

// การจัดการกับค่าที่อาจเป็น Null
const Welcome = ({ name }: { name?: string }) => {
  // ใช้เครื่องหมาย ? เพื่อเช็คว่ามีค่า name อยู่จริงไหม
  return <div>สวัสดี {name ?? "ผู้ใช้งานทั่วไป"}</div>;
};

ในโค้ดนี้ name?: string หมายความว่า name อาจจะไม่มีค่าก็ได้ เราจึงใช้ ?? (ตัวดำเนินการตรวจสอบค่าว่าง) เพื่อบอกว่า "ถ้าไม่มีชื่อ ให้แสดงคำว่า ผู้ใช้งานทั่วไป แทนนะ" นี่คือวิธีป้องกันที่มือโปรใช้กันจริงในการทำงานครับ

สรุป: เริ่มต้นให้ถูกทางด้วย TSX

การเข้าใจพื้นฐาน TSX ไม่ใช่แค่เรื่องของการพิมพ์โค้ดให้ผ่าน แต่มันคือการฝึกคิดแบบมีระบบ การใช้ TypeScript ช่วยให้คุณเห็นภาพรวมของข้อมูลในโปรเจกต์ได้ชัดเจนขึ้นตั้งแต่บรรทัดแรกที่พิมพ์

ตัวอย่างการนำไปใช้จริง: ในการทำโปรเจกต์แรกของคุณ ให้ลองเปิดโปรเจกต์ด้วยคำสั่ง npx create-react-app my-app --template typescript แล้วลองกำหนด Interface ให้กับข้อมูลที่จะแสดงผลทุกครั้ง แทนที่จะปล่อยให้เป็นค่าว่าง

จำไว้ว่าการเขียนโค้ดที่ "อ่านง่าย" และ "ตรวจสอบได้" คือจุดเริ่มต้นของการเป็นโปรแกรมเมอร์มืออาชีพครับ หมั่นฝึกฝนการจัดการ Type ให้เป็นนิสัย แล้วคุณจะพบว่าการแก้บั๊กในภายหลังจะกลายเป็นเรื่องง่ายไปโดยปริยาย