PlusMagi's Blog By Pitt Phunsanit Frontend TypeScript: การทำงานแบบ Synchronous

TypeScript: การทำงานแบบ Synchronous

TypeScript และแนวคิดการทำงานแบบ Synchronous

ในโลกของการพัฒนาซอฟต์แวร์สมัยใหม่ โดยเฉพาะอย่างยิ่งเมื่อใช้ภาษาที่รันบน Event Loop อย่าง JavaScript การทำความเข้าใจระหว่าง ‘รูปแบบการเขียนโค้ดที่เป็นลำดับขั้นตอนโดยตรง’ กับ ‘กลไกการประมวลผลจริง’ จึงเป็นสิ่งสำคัญ TypeScript ไม่ได้เปลี่ยนธรรมชาติของ Node.js หรือ V8 Engine ที่ต้องจัดการงาน I/O แบบ Asynchronous แต่ช่วยให้เราสามารถกำหนดโครงสร้างและคาดหวังพฤติกรรมเชิงตรรกะว่าฟังก์ชันต่างๆ จะถูกเรียกใช้งานตามลำดับทีละขั้นได้อย่างไร

คำว่า Synchronization ในบริบทนี้หมายถึงหลักการที่ระบุว่า เมื่อมีการดำเนินการหนึ่งเกิดขึ้นแล้ว กระบวนการถัดไปจะไม่เริ่มขึ้นจนกว่ากระบวนการแรกจะเสร็จสมบูรณ์ 100% โค้ดส่วนใหญ่ที่เราเขียนด้วย TS มักจะเป็น synchronous flow ตามปกติ เช่น ลำดับการประกาศตัวแปรหรือการเรียงลำดับ function call ซึ่ง interpreter จะรับประกันว่าเป็น Sequential Execution เสมอ นี่คือพื้นฐานทางประเภท (Type System) ของมันก่อนที่จะเข้าไปเกี่ยวข้องกับระบบ Non-blocking IO เลยแม้แต่น้อย

ขอบเขตของการทำงานแบบ Synchronous ด้วย Type Safety

TypeScript เพิ่มชั้นของ Static Typing เข้ามาเพื่อเสริมแนวคิดด้านความมั่นคงและความน่าเชื่อถือในการไหลเวียนข้อมูล การใช้ Strong Types ช่วยให้นักพัฒนาไม่เพียงแต่รู้เท่านั้นว่าโค้ดควรทำอะไรในขั้นตอนต่อไป แต่อย่ายังสามารถป้องกันข้อผิดพลาดจากการส่งผ่านชนิดข้อมูลที่ไม่ถูกต้องระหว่างบล็อกโค้ดได้อีกด้วย ตัวอย่างเช่น หากเราออกแบบโมเดล A ที่ต้องรอผลจาก Model B ก่อนจึงจะสร้าง Output C ได้ ระบบ TypeScript ก็ช่วยให้เรารับรองไทป์และโครงสร้างตามนั้นได้อย่างเข้มงวด

  • Sequential Dependency: เป็นหัวใจหลักที่ทำให้ code block ต่างๆ ต้องรันจบเป็นชุด
  • Predictable Flow Control: โครงสร้างควบคุมต่างๆ อย่าง `if/else` หรือ `for loop` ถูกบังคับให้ประมวลผลเสร็จสิ้นภายในรอบการวนซ้ำหรือเงื่อนไขเดียว
// นี่คือตัวอย่าง synchronous flow ล้วน ๆ\ntype User = { id: number, name: string }; // กำหนดประเภท (Type Definition)\npromise getUserData(id: number): Promise<Array<User>>| null => async < ... \{ /* สมมติว่าเป็นฟังก์ชัน Async */ } ; 
in function processUsersSync(): void { 
	const users1 = fetchInitialConfig();  /* Synchronous Call - รันก่อนเสมอ*/
	try {
		let result = await executeStepOne(users1); {/* แม้มี 'await' แต่ถ้าไม่มี I/O จริง มันก็ยังดูเหมือน Sync ในโค้ดส่วนนี้* /}
	console.log(                             
               
        
Exit mobile version