TypeScript State Machines: การเปลี่ยนสถานะที่ปลอดภัยด้วยประเภทข้อมูล

สเตทแมชชีน (State machines) นำเสนอแนวคิดที่มีประสิทธิภาพสำหรับการจัดการตรรกะแอปพลิเคชันที่ซับซ้อน เพื่อให้มั่นใจถึงพฤติกรรมที่คาดเดาได้และลดข้อผิดพลาด เมื่อรวมกับความสามารถในการกำหนดประเภทข้อมูลที่เข้มงวดของ TypeScript สเตทแมชชีนจะแข็งแกร่งยิ่งขึ้น โดยให้การรับประกันในระหว่างคอมไพล์เกี่ยวกับ transition ของสถานะและความสอดคล้องของข้อมูล โพสต์บล็อกนี้จะสำรวจประโยชน์ การนำไปใช้งาน และรูปแบบขั้นสูงของการใช้ TypeScript state machines เพื่อสร้างแอปพลิเคชันที่น่าเชื่อถือและบำรุงรักษาได้

สเตทแมชชีน (State Machine) คืออะไร?

สเตทแมชชีน (state machine หรือ finite state machine, FSM) คือแบบจำลองทางคณิตศาสตร์ของการคำนวณที่ประกอบด้วยสถานะจำนวนจำกัดและการเปลี่ยนผ่านระหว่างสถานะเหล่านั้น เครื่องจะอยู่ในสถานะเดียว ณ เวลาใดเวลาหนึ่งเท่านั้น และการเปลี่ยนผ่านจะถูกกระตุ้นโดยเหตุการณ์ภายนอก สเตทแมชชีนถูกนำมาใช้อย่างแพร่หลายในการพัฒนาซอฟต์แวร์เพื่อจำลองระบบที่มีโหมดการทำงานที่แตกต่างกัน เช่น ส่วนต่อประสานผู้ใช้, โปรโตคอลเครือข่าย และตรรกะของเกม

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

ทำไมถึงต้องใช้สเตทแมชชีน?

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

ประโยชน์ของ TypeScript สำหรับสเตทแมชชีน

TypeScript เพิ่มความปลอดภัยและโครงสร้างพิเศษให้กับการใช้งานสเตทแมชชีน โดยให้ประโยชน์หลักหลายประการ:

• ความปลอดภัยของประเภทข้อมูล (Type Safety): การกำหนดประเภทข้อมูลแบบคงที่ของ TypeScript ช่วยให้มั่นใจว่าการเปลี่ยนสถานะถูกต้องและข้อมูลได้รับการจัดการอย่างถูกต้องภายในแต่ละสถานะ ซึ่งสามารถป้องกันข้อผิดพลาดรันไทม์และทำให้การดีบักง่ายขึ้น
• การเติมโค้ดอัตโนมัติและการตรวจจับข้อผิดพลาด: เครื่องมือของ TypeScript ให้การเติมโค้ดอัตโนมัติและการตรวจจับข้อผิดพลาด ช่วยให้นักพัฒนาเขียนโค้ดสเตทแมชชีนที่ถูกต้องและบำรุงรักษาได้
• การปรับโครงสร้างโค้ดที่ดีขึ้น: ระบบประเภทข้อมูลของ TypeScript ทำให้การปรับโครงสร้างโค้ดสเตทแมชชีนทำได้ง่ายขึ้นโดยไม่ก่อให้เกิดผลข้างเคียงที่ไม่ตั้งใจ
• โค้ดที่อธิบายตัวเองได้: คำอธิบายประเภทข้อมูลของ TypeScript ทำให้โค้ดสเตทแมชชีนอธิบายตัวเองได้ดีขึ้น ปรับปรุงความสามารถในการอ่านและบำรุงรักษา

การนำสเตทแมชชีนอย่างง่ายไปใช้ใน TypeScript

มาดูตัวอย่างสเตทแมชชีนพื้นฐานโดยใช้ TypeScript: ไฟจราจรอย่างง่าย

1. กำหนดสถานะและเหตุการณ์

อันดับแรก เรามากำหนดสถานะที่เป็นไปได้ของไฟจราจรและเหตุการณ์ที่สามารถกระตุ้นการเปลี่ยนผ่านระหว่างสถานะเหล่านั้น

// Define the states
enum TrafficLightState {
  Red = \"Red\",
  Yellow = \"Yellow\",
  Green = \"Green\",
}

// Define the events
enum TrafficLightEvent {
  TIMER = \"TIMER\",
}

2. กำหนดประเภทของสเตทแมชชีน

ถัดไป เรามากำหนดประเภทสำหรับสเตทแมชชีนของเราที่ระบุสถานะ เหตุการณ์ และบริบท (ข้อมูลที่เกี่ยวข้องกับสเตทแมชชีน) ที่ถูกต้อง

interface TrafficLightContext {
  cycleCount: number;
}

interface TrafficLightStateDefinition {
  value: TrafficLightState;
  context: TrafficLightContext;
}


type TrafficLightMachine = {
  states: {
    [key in TrafficLightState]: {
      on: {
        [TrafficLightEvent.TIMER]: TrafficLightState;
      };
    };
  };
  context: TrafficLightContext;
  initial: TrafficLightState;
};

3. ใช้ตรรกะของสเตทแมชชีน

ตอนนี้ เราจะใช้ตรรกะของสเตทแมชชีนโดยใช้ฟังก์ชันง่ายๆ ที่รับสถานะปัจจุบันและเหตุการณ์เป็นอินพุต และส่งคืนสถานะถัดไป

function transition(
  state: TrafficLightStateDefinition,
  event: TrafficLightEvent
): TrafficLightStateDefinition {
  switch (state.value) {
    case TrafficLightState.Red:
      if (event === TrafficLightEvent.TIMER) {
        return { value: TrafficLightState.Green, context: { ...state.context, cycleCount: state.context.cycleCount + 1 } };
      }
      break;
    case TrafficLightState.Green:
      if (event === TrafficLightEvent.TIMER) {
        return { value: TrafficLightState.Yellow, context: { ...state.context, cycleCount: state.context.cycleCount + 1 } };
      }
      break;
    case TrafficLightState.Yellow:
      if (event === TrafficLightEvent.TIMER) {
        return { value: TrafficLightState.Red, context: { ...state.context, cycleCount: state.context.cycleCount + 1 } };
      }
      break;
  }

  return state; // ส่งคืนสถานะปัจจุบันหากไม่มีการเปลี่ยนสถานะที่กำหนดไว้
}

// สถานะเริ่มต้น
let currentState: TrafficLightStateDefinition = { value: TrafficLightState.Red, context: { cycleCount: 0 } };

// จำลองเหตุการณ์ตัวจับเวลา
currentState = transition(currentState, TrafficLightEvent.TIMER);
console.log(\"New state:\", currentState);

currentState = transition(currentState, TrafficLightEvent.TIMER);
console.log(\"New state:\", currentState);

currentState = transition(currentState, TrafficLightEvent.TIMER);
console.log(\"New state:\", currentState);

ตัวอย่างนี้แสดงให้เห็นถึงสเตทแมชชีนพื้นฐานแต่ใช้งานได้จริง มันเน้นย้ำว่าระบบประเภทข้อมูลของ TypeScript ช่วยบังคับใช้การเปลี่ยนสถานะและการจัดการข้อมูลที่ถูกต้องได้อย่างไร

การใช้ XState สำหรับสเตทแมชชีนที่ซับซ้อน

สำหรับสถานการณ์สเตทแมชชีนที่ซับซ้อนมากขึ้น ลองพิจารณาใช้ไลบรารีการจัดการสถานะโดยเฉพาะ เช่น XState XState นำเสนอวิธีการประกาศเพื่อกำหนดสเตทแมชชีนและคุณสมบัติต่างๆ เช่น สถานะแบบลำดับชั้น (hierarchical states), สถานะแบบขนาน (parallel states) และการ์ด (guards)

ทำไมต้อง XState?

• ไวยากรณ์เชิงประกาศ (Declarative Syntax): XState ใช้ไวยากรณ์เชิงประกาศเพื่อกำหนดสเตทแมชชีน ทำให้ง่ายต่อการอ่านและทำความเข้าใจ
• สถานะแบบลำดับชั้น (Hierarchical States): XState รองรับสถานะแบบลำดับชั้น ทำให้คุณสามารถซ้อนสถานะภายในสถานะอื่นเพื่อสร้างแบบจำลองพฤติกรรมที่ซับซ้อนได้
• สถานะแบบขนาน (Parallel States): XState รองรับสถานะแบบขนาน ทำให้คุณสามารถสร้างแบบจำลองระบบที่มีกิจกรรมพร้อมกันได้หลายอย่าง
• การ์ด (Guards): XState อนุญาตให้คุณกำหนดการ์ด ซึ่งเป็นเงื่อนไขที่ต้องเป็นไปตามข้อกำหนดก่อนที่จะเกิดการเปลี่ยนสถานะ
• การดำเนินการ (Actions): XState อนุญาตให้คุณกำหนดการดำเนินการ ซึ่งเป็นผลข้างเคียงที่ทำงานเมื่อมีการเปลี่ยนสถานะ
• การสนับสนุน TypeScript: XState มีการสนับสนุน TypeScript ที่ยอดเยี่ยม โดยให้ความปลอดภัยของประเภทข้อมูลและการเติมโค้ดอัตโนมัติสำหรับการกำหนดสเตทแมชชีนของคุณ
• ตัวแสดงผล (Visualizer): XState มีเครื่องมือตัวแสดงผลที่ช่วยให้คุณสามารถแสดงผลและดีบักสเตทแมชชีนของคุณได้

ตัวอย่าง XState: การประมวลผลคำสั่งซื้อ

มาพิจารณาตัวอย่างที่ซับซ้อนยิ่งขึ้น: สเตทแมชชีนการประมวลผลคำสั่งซื้อ คำสั่งซื้อสามารถอยู่ในสถานะต่างๆ เช่น "รอดำเนินการ", "กำลังประมวลผล", "จัดส่งแล้ว" และ "ส่งมอบแล้ว" เหตุการณ์ต่างๆ เช่น "ชำระเงิน", "จัดส่ง" และ "ส่งมอบ" จะกระตุ้นการเปลี่ยนผ่าน

import { createMachine } from 'xstate';

// กำหนดสถานะ
interface OrderContext {
  orderId: string;
  shippingAddress: string;
}

// กำหนดสเตทแมชชีน
const orderMachine = createMachine(
  {
    id: 'order',
    initial: 'pending',
    context: {
      orderId: '12345',
      shippingAddress: '1600 Amphitheatre Parkway, Mountain View, CA',
    },
    states: {
      pending: {
        on: {
          PAY: 'processing',
        },
      },
      processing: {
        on: {
          SHIP: 'shipped',
        },
      },
      shipped: {
        on: {
          DELIVER: 'delivered',
        },
      },
      delivered: {
        type: 'final',
      },
    },
  }
);

// ตัวอย่างการใช้งาน
import { interpret } from 'xstate';

const orderService = interpret(orderMachine)
  .onTransition((state) => {
    console.log('Order state:', state.value);
  })
  .start();

orderService.send({ type: 'PAY' });
orderService.send({ type: 'SHIP' });
orderService.send({ type: 'DELIVER' });

ตัวอย่างนี้แสดงให้เห็นว่า XState ทำให้การกำหนดสเตทแมชชีนที่ซับซ้อนง่ายขึ้นอย่างไร ไวยากรณ์เชิงประกาศและการสนับสนุน TypeScript ทำให้การทำความเข้าใจพฤติกรรมของระบบและป้องกันข้อผิดพลาดง่ายขึ้น

รูปแบบสเตทแมชชีนขั้นสูง

นอกเหนือจากการเปลี่ยนสถานะพื้นฐานแล้ว ยังมีรูปแบบขั้นสูงหลายอย่างที่สามารถเพิ่มพลังและความยืดหยุ่นของสเตทแมชชีนได้

สเตทแมชชีนแบบลำดับชั้น (สถานะที่ซ้อนกัน)

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

สเตทแมชชีนแบบขนาน (สถานะพร้อมกัน)

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

การ์ด (การเปลี่ยนสถานะตามเงื่อนไข)

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

การดำเนินการ (ผลข้างเคียง)

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

การประยุกต์ใช้ TypeScript State Machines ในโลกแห่งความเป็นจริง

TypeScript state machines มีคุณค่าในการประยุกต์ใช้หลากหลายด้าน นี่คือตัวอย่างบางส่วน:

• ส่วนต่อประสานผู้ใช้ (User Interfaces): การจัดการสถานะของส่วนประกอบ UI เช่น แบบฟอร์ม, กล่องโต้ตอบ และเมนูนำทาง
• เอนจิ้นเวิร์กโฟลว์ (Workflow Engines): การสร้างแบบจำลองและจัดการกระบวนการทางธุรกิจที่ซับซ้อน เช่น การประมวลผลคำสั่งซื้อ, การขอสินเชื่อ และการเรียกร้องประกัน
• การพัฒนาเกม: การควบคุมพฤติกรรมของตัวละครในเกม, วัตถุ และสภาพแวดล้อม
• โปรโตคอลเครือข่าย: การใช้งานโปรโตคอลการสื่อสาร เช่น TCP/IP และ HTTP
• ระบบสมองกลฝังตัว (Embedded Systems): การจัดการพฤติกรรมของอุปกรณ์สมองกลฝังตัว เช่น เทอร์โมสตัท, เครื่องซักผ้า และระบบควบคุมอุตสาหกรรม ตัวอย่างเช่น ระบบชลประทานอัตโนมัติสามารถใช้สเตทแมชชีนเพื่อจัดการตารางการรดน้ำตามข้อมูลเซ็นเซอร์และสภาพอากาศได้
• แพลตฟอร์มอีคอมเมิร์ซ: การจัดการสถานะคำสั่งซื้อ, การประมวลผลการชำระเงิน และเวิร์กโฟลว์การจัดส่ง สเตทแมชชีนสามารถจำลองขั้นตอนต่างๆ ของคำสั่งซื้อ ตั้งแต่ "รอดำเนินการ" ไปจนถึง "จัดส่งแล้ว" และ "ส่งมอบแล้ว" เพื่อให้มั่นใจว่าลูกค้าจะได้รับประสบการณ์ที่ราบรื่นและเชื่อถือได้

แนวปฏิบัติที่ดีที่สุดสำหรับ TypeScript State Machines

เพื่อให้ได้รับประโยชน์สูงสุดจาก TypeScript state machines โปรดปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้:

• รักษาสถานะและเหตุการณ์ให้เรียบง่าย: ออกแบบสถานะและเหตุการณ์ของคุณให้เรียบง่ายและมุ่งเน้นมากที่สุดเท่าที่จะทำได้ ซึ่งจะทำให้สเตทแมชชีนของคุณเข้าใจและบำรุงรักษาได้ง่ายขึ้น
• ใช้ชื่อที่สื่อความหมาย: ใช้ชื่อที่สื่อความหมายสำหรับสถานะและเหตุการณ์ของคุณ ซึ่งจะช่วยปรับปรุงความสามารถในการอ่านโค้ดของคุณ
• จัดทำเอกสารสเตทแมชชีนของคุณ: จัดทำเอกสารวัตถุประสงค์ของแต่ละสถานะและเหตุการณ์ ซึ่งจะทำให้ผู้อื่นเข้าใจโค้ดของคุณได้ง่ายขึ้น
• ทดสอบสเตทแมชชีนของคุณอย่างละเอียด: เขียนการทดสอบยูนิตที่ครอบคลุมเพื่อให้แน่ใจว่าสเตทแมชชีนของคุณทำงานได้ตามที่คาดไว้
• ใช้ไลบรารีการจัดการสถานะ: พิจารณาใช้ไลบรารีการจัดการสถานะเช่น XState เพื่อทำให้การพัฒนาสเตทแมชชีนที่ซับซ้อนง่ายขึ้น
• แสดงผลสเตทแมชชีนของคุณ: ใช้เครื่องมือแสดงผลเพื่อแสดงภาพและดีบักสเตทแมชชีนของคุณ ซึ่งสามารถช่วยให้คุณระบุและแก้ไขข้อผิดพลาดได้เร็วขึ้น
• พิจารณาการทำให้เป็นสากล (i18n) และการแปลเป็นภาษาท้องถิ่น (L10n): หากแอปพลิเคชันของคุณมุ่งเป้าไปที่ผู้ชมทั่วโลก ให้ออกแบบสเตทแมชชีนของคุณเพื่อรองรับภาษา สกุลเงิน และธรรมเนียมทางวัฒนธรรมที่แตกต่างกัน ตัวอย่างเช่น ขั้นตอนการชำระเงินในแพลตฟอร์มอีคอมเมิร์ซอาจต้องรองรับวิธีการชำระเงินและที่อยู่จัดส่งหลายรายการ
• การเข้าถึง (A11y): ตรวจสอบให้แน่ใจว่าสเตทแมชชีนและส่วนประกอบ UI ที่เกี่ยวข้องสามารถเข้าถึงได้สำหรับผู้ใช้ที่มีความพิการ ปฏิบัติตามแนวทางการเข้าถึง เช่น WCAG เพื่อสร้างประสบการณ์ที่ครอบคลุม

สรุป

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