JavaScript #01: ถ้อยแถลง

เกริ่นนำ

เนื้อหาในบทนี้เรามาอุ่นเครื่องกันก่อน รู้ที่มา รู้ที่ไป เริ่มจากประวัติไปจนถึงการติดตั้ง

ประวัติศาสตร์ JavaScript 101

คงคุ้นสไตล์การเขียนของผมอยู่แล้ว ก่อนเรียนรู้อะไรก็ต้องรู้ที่มาที่ไป บทความนี้ก็ไม่ได้รับการยกเว้น ตามมาครับ มาย้อนเวลากลับไปกัน ไปไม่ไกลมากเอาแค่ 20 ปีก็พอ ปี 1995 เป็นปีที่ Web เติบโตได้มาระยะแล้ว เริ่มมี graphical browser ออกมาให้ใช้ แต่เว็บก็ยังเป็นแบบ static อยู่ครับคือสามารถแสดงผลเป็นหน้าหนังสือพิมพ์ได้ แต่ภาพเคลื่อนไหวยังทำไม่ได้ ถ้าจะพอทำได้ในตอนนั้นก็น่าจะได้แค่น่าจะแค่ animated GIF เท่านั้น ส่วน VRML ก็กำลังอยู่ในขั้นตอนการพัฒนา

มีงานประชุมวิชาการประจำปีที่จัดต่อเนื่องจนถึงปัจจุบันอยู่งานหนึ่งชื่อว่า “Hollywood meets Silicon Valley” ชื่องานก็บอกในตัวมันอยู่แล้วนะครับว่าเป็นงานแสดงเทคโนโลยีทาง IT ซึ่งในปี 1995 นั้นเอง Sun ผู้ผลิตเครื่อง servers/workstations และ SunOS/Solaris อันโด่งดัง ก็ได้รับเชิญให้เป็นองค์ปาฐกในงานนั้นด้วย ในคราวนั้น Sun เลือกเอา WebRunner ซึ่งเป็น browser ที่ตัวเองสร้างขึ้นนำเอาไปแสดง

ว่ากันว่าบรรยากาศของผู้ฟังในเวลานั้นน่าเบื่อมาก ผู้ฟังไม่ค่อยสนใจกัน ก็โลกมี browser Mosaic อยู่แล้วไม่เห็นว่า WebRunner ดีกว่าตรงไหน เรื่องที่ demo ก็เป็นเรื่องพื้นๆ Mosaic ก็ทำได้หมดอยู่แล้ว  จนกระทั่งเมื่อ demo มาถึงการแสดงรูปโมเลกุลเป็นภาพ 3 มิติ ตอนแรกก็ไม่มีอะไรหน้าตื่นเต้น แต่ที่ทำเอาฮือฮาปลุกคนที่ง่วงอยู่ให้ตื่นตาค้างได้ก็ตรงที่พอ James Gosling (ผู้คิดค้น Java) เอาเมาส์เข้าไปจับลากในรูป ปรากฏว่ารูปโมเลกุลนั้นหมุนได้ตามมือเลยทีเดียว ซึ่งต่างกับ Mosaic ที่ทำได้แต่ภาพนิ่ง นั่นก็คือก้าวกระโดดอีกก้าวของเทคโนโลยีเว็บครับ เทคโนโลยีนั้นคือ Applet นั่นเอง  และนั่นก็เป็นจุดเริ่มต้นที่ทำให้ Java ผงาดครองโลกในเวลาต่อมา

เอ … แล้วเวลานั้น Microsoft กำลังทำอะไรอยู่นะ มัวแต่หลับไหลลืมตื่นหรืออย่างไร เราไปแอบดูกัน ก่อนหน้านั้นไม่นาน Microsoft  เคยสร้าง network ของตัวเองเป็นระบบปิดตั้งชื่อว่า Micrsoft Network หรือ MSN นั่นเอง คล้ายๆ กับ CompuServe หรือ AOL ในสมัยนั้น แต่ต่อมา TCP/IP เริ่มมาแรง  และปี 1995 นี่เอง เป็นปีที่ Microsoft ตัดสินใจอย่างเด็ดขาดที่กลับตัว 360 องศา ทิ้ง MSN มาสนับสนุน TCP/IP อย่างเต็มสูบ

ในช่วงปีนั้นก็มี browser ใหม่เกิดขึ้นสองตัวคือ Netscape ซึ่งได้ทีมบางส่วนจาก Mosaic มาเขียนใหม่หมดและทำเป็นเชิงการค้าอย่างเต็มรูป และตามมาติดๆ อีกตัวคือของ Microsoft  ซึ่งออก Internet Explorer หรือ IE นั่นเอง ตำนานมหากาพย์สงคราม browser จึงเกิดขึ้น ณ บัดนั้น และกินเวลากันยาวเกือบทศวรรษ

ในเวลานั้น Netscape เซ็นสัญญาเป็นพันธมิตรกับ Sun โดยดึงเอาเทคโนโลยีสุดยอดอย่าง Applet บรรจุลงไปใน Netscape และทีมของ Netscape เองก็สร้าง ภาษา script ตัวหนึ่งซึ่งทำงานบน browser ขึ้นมา ตั้งชื่อว่า Mocha ช่วงนั้นอะไรที่เป็นกาแฟจะขายดีเป็นพิเศษ แต่ชื่อ Mocha ก็ไม่ค่อยถูกโฉลกเท่าไหร่ หลังจากนั้นไม่กี่เดือนก็เปลี่ยนชื่อเป็น LiveScript

แต่ชื่อ LiveScript ก็มีชื่อยืนยาวได้เพียงไม่กี่เดือน เมื่อ Netscape เซ็นสัญญากับ Sun ดังที่กล่าวไปแล้ว Netscape จึงขอลิขสิทธิ์ชื่อ Java มาเป็นศิริมงคลแก่ภาษา script ของตัวเอง ช่วงนั้นชื่อ Java กำลังเริ่มขึ้นหม้อ อะไรที่เป็น Java ก็จะขายได้ ซึ่ง Sun ก็ให้เอกสิทธิ์ในการใช้ชื่อ JavaScript กับ Netscape ไป ทำให้ Netscape มีหมัดเด็ดเทคโนโลยีที่ใช้ชื่อ Java ถึงสองตัว ทั้งหมดนี้คือเรื่องรายที่เกิดขึ้นในปี 1995

ภาษา JavaScript นี่มีหลายท่านสับสนคิดว่าเป็นภาษา Java ฉบับย่อส่วน จริงๆ แล้วไม่ใช่เลยครับ มันคนละภาษากันโดยสิ้นเชิง ที่ชื่อมันคล้ายกันเพราะการตลาดไม่ใช่เทคโนโลยี JavaScript ผมว่านะมันออกไปทางภาษา C เสียมากกว่า เน้นสั้นกระทัดรัด จนในวงการมีคำกล่าวว่า “Java is to JavaScript as ham is to hamster.

ประวัติศาสตร์ JavaScript 102

จะปล่อยให้ Netscape จัดหนักฝ่ายเดียวได้ยังไง ในปี 1996 Microsoft โต้กลับโดยการสร้างภาษา script ของตัวเองทำงานบน browser ได้เหมือน JavaScript และแถมทำงานใน shell ได้อีกต่างหากตั้งชื่อว่า VBScript เอกสิทธิ์สำหรับ IE เท่านั้น  ซึ่งสวนทางกับทาง Netscape ที่ใช้งานได้หลากหลาย OS

อ้างอิงจากตำราการล้มยักษ์ บันทึกกล่าวเอาไว้ว่า วิธีล้มยักษ์ที่ดีที่สุดคือการรุม ดังนั้นวิธีการที่ Netscape ทำนั้นน่าสนใจมาก ทำในสิ่งที่นึกไม่ถึงคือการส่งมอบตัวภาษา JavaScript ให้แก่หน่วยงานมาตรฐาน ซึ่งเมื่อเป็นมาตรฐานแล้วจะกลายเป็นของสาธารณะต่อไป ทาง Netscape เลือก ECMA ซึ่งเป็นหน่วยงานมาตรฐานเทียบเท่ากับ ISO ของยุโรป

ECMA รับไปแล้วก็จัดทีมดูแลมาตรฐานขึ้นมาโดยมากก็เริ่มจากทีมงานเดิมนั่นเอง แต่นัยยะน่าสนใจครับ มันกลายเป็นของฟรีที่ใครก็ได้เอาไปใช้ได้ ดังนั้น browser ที่เกิดใหม่ขึ้นมาทุกตัว จึงหาเหตุผลจะที่ไม่รองรับ JavaScript นั้น ไม่ได้เลย  กลายเป็นยุทธการ ‘ป่าล้อมเมือง’ อันลือลั่นที่คอมมูนิสต์ใช้ในอดีต Microsoft เอง ก็ต้องรองรับ JavaScript เช่นกัน แต่เพื่อหลีกเลี่ยงปัญหาลิขสิทธิ์ต่างๆ Microsoft ก็สร้าง JScript ขึ้นมา ทำให้ IE ใช้ได้ทั้ง JScript และ VBScript

ถามว่า Microsoft เลือกจะสนับสนุนภาษา script ตัวไหนเป็นหลัก ก็คงไม่ต้องเดา VBScript นั่นเอง ยังจำกันได้ไหมครับ ยุคก่อน 2010 นี่ปวดตับกันมาก ถ้าจะทำธุรกรรมทาง Internet กับธนาคารไทยหลายธนาคาร ต้องใช้ IE เท่านั้น browser ตัวอื่นใช้ไม่ได้ อีกหลายเว็บเช่นการไฟฟ้า (ถ้าผมจำไม่ผิด) ก็เหมือนกันจะดูค่าไฟก็ต้องใช้ IE คงรู้เหตุผลนะครับเพราะอะไร

ปัญหาดังกล่าว แต่ก่อนก็อาจจะไม่นับว่าเป็นปัญหาเท่าไหร่นัก เพราะผู้ใช้คอมพิวเตอร์ส่วนมากใช้ Windows อยู่แล้ว แต่การมาถึงของ tablet อย่าง IPad จะว่าไปมันก็คือเครื่องคอมพิวเตอร์อีกแบบหนึ่ง กลุ่มคนที่ใช้เทคโนโลยีล้ำสมัย(ในยุคนั้น) ที่เรียกว่า early adopters นั้น ส่วนมากก็คนชั้นสูงของสังคม  คนกลุ่มนี้พูดอะไรเสียงก็จะดังเป็นพิเศษ กลุ่มนี้เองเป็นตัวกระทุ้งให้เกิดการเปลี่ยนแปลง และตามมาด้วย Android ที่ปล้นยอดการใช้งานเครื่องคอมพิวเตอร์ไปจาก Microsoft ทำให้ยอดขาย Windows และ Office ตกลยอย่างมีนัยสำคัญ พูดได้ว่า ‘ป่าล้อมเมือง’ วันนี้เป็นผลแล้ว ทุกเว็บหนีจาก VBScript เข้าสู่ JavaScript หมดสิ้นแล้ว

มาถึงวันนี้เรารู้กันเป็นอย่างดีแล้วว่าผลลัพธ์เป็นอย่างไร  VBScript บน browser ถูกประกาศว่าตายแล้ว ใน IE 11 ที่คู่บุญมากับ Windows 8.1 นั้นไม่รองรับ VBScript อีกต่อไป ถือว่าเป็นการสิ้นสุคยุคของ VBScript อย่างเป็นทางการ ผิดกับ JavaScript ครับวันนี้โตวันโตคืน จากลูกเป็ดขี้เหร่อย่างการเป็นภาษา script เล็กๆ กำลังจะกลายเป็นหงส์เป็นหนึ่งในภาษาหลักที่พัฒนา Enterprise Applications กันเลยทีเดียว

ประวัติศาสตร์ JavaScript 103

เรามาพิจารณากันถึงชื่อของภาษากันบ้างครับคำว่า JavaScript ถามว่าใครเป็นผู้ถือลิขสิทธิ์ ก็บอกได้เลยครับผู้ถือครองเป็นคนแรกคือ Sun ผู้เป็นเจ้าของ Java นั่นเอง แต่ได้มอบเอกสิทธิ์ให้แก่ Netscape เป็นผู้ได้รับอนุญาตให้ใช้แต่เพียงผู้เดียว วันนี้ Netscape กลายร่างกลายเป็น ISP ไปแล้ว ส่วนทายาทของ Netscape คือ Mozilla Foundation ผู้คิดค้น Firefox นั้นผมก็ไม่แน่ใจว่าได้สิทธิของชื่อ JavaScript ไปด้วยหรือไม่

เรื่องนี้จริงๆ แล้วก็ไม่ค่อยมีใครสนใจเท่าไหร่นัก เพราะ Sun เองก็เป็นป๋าทำตัวเป็นผู้ที่มีแต่ให้อยู่แล้ว ป๋าใจกว้างไม่มีปัญหา แต่ทุกสิ่งเกิดขึ้นมาดำรงอยู่และก็ต้องดับไปตาม ‘Law of Anitjung’ ใครตามเว็บผมเมื่อสิบปีก่อนคงจำได้ว่า ผมเคยบอกบ่อยครั้งว่า Sun ไม่น่าจะรอด เล่นแจกอย่างเดียว กองเชียร์ที่อยู่ข้างหลังกินอ้วนทุกคน Sun นั้นกินก็ไม่ได้กินแถมแผลเหอะหวะ และ Sun ก็จากเราไปในที่สุด สุดท้าย Oracle ซื้อ Sun ไป ตอนนี้ลิขสิทธิ์คำว่า JavaScript ตกไปอยู่ในมือ Oracle แล้วครับ

Oracle ไม่เหมือน Sun ที่เป็นผู้มีแต่ให้  ภาพพจน์ของ Sun คือ nerd  geek นักวิจัย และแหกคอก ส่วนภาพพจน์ของ Oracle นั้นคือนักธุรกิจล้วนๆ ครับ อะไรเดิมที่เป็นของ Sun ที่ Oracle ได้ไป เช่น Java, OpenOffice เป็นต้น ก็เกิดแรงกระเพื่อมอย่างหนักรวมทั้ง JavaScript ก็เช่นกันครับ มีการรณรงค์ให้ใช้คำให้ถูกต้อง ภาษาที่เราใช้ชื่อว่า ECMAScript ไม่ใช่ JavaScript ดังเหตุผลที่กล่าวมาข้างต้น ดังนั้นจากนี้เป็นต้นไป ผมจะใช้คำว่า ECMAScript แทน ทิ้งคำว่า JavaScript ให้เหลือเพียงแค่ชื่อ (บทความ) เท่านั้น ที่ต้องตั้งบทความว่า JavaScript ก็เพราะความคุ้นเคย เผื่อจะทำให้หลายท่านหลงเข้ามาอ่าน ก็แค่นั้นครับ

ECMAScript ในมุมมองของ Enterprise Applications

โปรแกรมระดับองค์กรหรือ Enterprise Applications นั้นเป็นโปรแกรมที่เขียนไม่ยากนักในเชิงเทคนิค แต่ความน่ากลัวของมันอยู่ที่ขนาดที่ใหญ่ จำนวนโปรแกรมที่มากและที่สำคัญก็คือมีการเปลี่ยนแปลงตลอดเวลา เรื่องเหล่านี้ก็เราท่านก็เข้าใจกันดีอยู่แล้ว ในยุคเริ่มต้นของ Enterprise Web Applications นั้น โลกมุ่งเน้นไปยัง server-side programming เริ่มจากยุค CGI, PERL มาสู่ PHP จากนั้นกลายเป็น ASP, JSP, Servlet และเป็น Java EE และ ASP.NET  และแนวใหม่อย่าง Ruby on Rails เป็นต้น

ในยุคแรกๆ นั้น ECMAScript นำหน้าที่เป็นตัวฟรุ๊งฟริ้งเท่านั้น ทำให้การแสดงผลดูดี แต่ก็ใช่ว่านักพัฒนาส่วนใหญ่จะเขียน ECMAScript กันนะครับ ไม่เลย ส่วนมากมักจะใช้ 3rd party ECMAScript libraries ที่ทำสำเร็จรูปแล้ว แค่เรียกใช้เท่านั้น

แต่ต่อมาก็เริ่มเขียน ECMAScript มากขึ้นเนื่องจากว่าการ submit form นั้นถ้าไม่สำเร็จจะเกิด round trip กลับไปแก้ใหม่ซึ่งทำให้ผู้ใช้เสียทั้งเวลาและอารมณ์ เคยไหมครับที่ลงทะเบียนเข้าใช้อะไรซักอย่าง ทางเว็บให้เรากรอกข้อมูลส่วนตัว พอกรอกเสร็จกดปุ่มบันทึก เงียบไปพักใหญ่กลับมาหน้าเดิม พร้อมคำด่าว่าข้อมูลช่องนี้โน้นต้องกรอกตามนี้ ข้อมูลบางส่วนหายอีกโดยเฉพาะอย่างยิ่งรหัสผ่าน ก็ต้องกรอกใหม่อีก ซึ่งถ้าใช้ ECMAScript เขียนทางฝั่ง browser ก็จะลดปัญหานี้ได้มากครับ

แต่ในปัจจุบันอย่างที่ผมเขียนในบทความ Introduction to High Performance Enterprise Applications ท่านคงทราบดีแล้วว่า ECMAScript ในปัจจุบันมีบทบาทมากขนาดไหน ซึ่งผมคงไม่ของขยายซ้ำอีก

สถานภาพ ECMAScript

ECMAScript เริ่มเป็นมาตรฐาน รุ่น 1 ที่เรียกว่า ES1 เมื่อปี 1997  โดยได้รหัสชื่อว่า ECMA-262 โดยที่ ECMA นั้นสร้างทีมขึ้นมาทีมหนึ่งเรียกว่า TC-39 เพื่อเป็นแกนกลางในการพัฒนาตัวภาษา ปัจจุบันพัฒนามาถึงรุ่นที่ 5.1 หรือที่เรียกว่า ES5.1 เมื่อปี 2011 และเนื่องจากการเกิดขึ้นของการเขียนโปรแกรมฝั่ง browser ที่มีขนาดใหญ่และจริงจังขึ้นเรื่อยๆ ทำให้ ES6 ที่กำลังจะออกมาในกลางปี 2015 นี้ จะมีโครงสร้างภาษาเต็ม มี class และอื่นๆ เพิ่มขึ้นอีกมาก แต่ก็ต้องทำความเข้าใจให้ดีว่า ส่วนใหญ่มันเป็นเพียง syntactic sugar หรือเป็นการปรับ syntax ของภาษาให้ง่ายขึ้นหรือคุ้นเคยขึ้นนั่นเอง แต่ใส่ในมันยังเป็นแบบเดิม คือภาษามันรองรับความสามารถนั้นอยู่แล้ว แต่ทำให้มันสะดวกขึ้น หรือคล้ายกับภาษาทั่วมากขึ้น แต่ก็ต้องระวังอย่างเช่น การใช้ class ใน ES6 นั้น ก็พึงสังวรไว้ว่ามันมีบางอย่างไม่เหมือนกัน class ในภาษาอื่น ดังนั้นจึงเป็นที่มาของบทความชุดที่ทำจะแนะนำตัวตนที่แท้จริงของ ECMAScript อย่างคร่าวๆ ให้รับรู้กัน

ECMAScript 6 หรือ ES6 นั้นมีชื่อรหัสการพัฒนาว่า Harmony

ECMAScript เลวร้ายจริงหรือ?

ภาษา ECMAScript นั้น 9 ใน 10 ของผู้ทดลองใช้ครั้งแรกบอกเป็นเสียงเดียวกันว่ามัน ‘ปวดตับมาก‘ อะไรมันดูแล้วงงไปหมด จริงๆ แล้วคงต้องแยกให้ชัดเจนครับ library ที่คู่บุญบารมีมากับ ECMAScript คือ Document Object Model หรือ DOM มันก็คือ library ที่เอาไว้จัดการ elements ต่างๆ ของหน้า HTML ของเรานั่นเอง library ตัวนี้ทำมาตั้งนานแล้วครับ ทุกวันนี้ก็ยังใช้งานอยู่ บอกได้คำเดียวว่า library ตัวนี้ค่อนข้างแย่จริงๆ

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

รู้จัก TypeScript

อย่างที่ผมกล่าวไว้ในบทความก่อนหน้า แนวคิด Single Page Application หรือ SPA ทำเอาวงการการเขียนโปรแกรมสะเทือนไปหมด การเขียนโปรแกรมก็ไม่ได้ยากกว่าที่เคยเขียน แต่กลับได้ประสิทธิภาพเพิ่มขึ้นอย่างมากโดยอัตโนมัติ และข้อดีอีกหลายๆ ข้อที่ผมอธิบายไปแล้ว ก่อให้เกิด Exodus หรือการอพยพครั้งใหญ่จากการเขียนโปรแกรมแบบเดิมๆ มาเป็นแบบ SPA กลุ่มคนที่อพยพมานี้ส่วนมากมีพื้นฐานมาจาก Object-Oriented พอมาเจอ Functional Programming อย่างของ ECMAScript ก็ไม่คุ้นเคย รับไม่ได้ เทียบไปแล้วก็เหมือนกลุ่มนักท่องเที่ยวฝรั่งบางกลุ่ม ลองไปดูตามแหล่งท่องเที่ยวที่ฝรั่งเที่ยวดูสิครับ จะมีผับมีบาร์ขึ้นตามเต็มไปหมด  ถามว่าอยากได้กลุ่มคนนี้ไหม ถ้าอยากได้ก็ต้องปรับตามเขา ดังนั้น ES6 จึงกลายเป็นอย่างที่เห็น

Micrsoft เอง หลังจากเสียรูปมวยถูกรุมชกนับแปดไปสองครั้งจนต้องทิ้ง VBScript ไปแล้วนั้น เมื่อสองหรือสามปีที่ผ่านมา Microsoft กลับลำ 360 องศา (อีกครั้ง) เมื่อสู้กัน ECMAScript ไม่ได้ ก็ขี่หลังมันเลยก็แล้วกัน Microsoft จึงให้ Anders Hejlsberg จอมยุทธ์มือหนึ่งของสำนัก (ผู้สร้าง C# และ .net) ออกแบบภาษาที่ต่อเติมขึ้นจาก ECMAScript เหมือนกันภาษา C++ ที่ต่อเติมขึ้นจากภาษา C โดยการทำงานเป็นลักษณะการทรานไพล์ คือแปลจากภาษาระดับสูงภาษาหนึ่งให้กลายเป็นภาษาระดับสูงอีกภาษาหนึ่ง ซึ่งผลลัพธ์ที่ได้ก็คือ ECMAScript นั่นเอง

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

TypeScript นั้น ถ้าไม่ใช่มาจาก Microsoft อาจจะได้รับความนิยมมากกว่านี้ กลุ่มแอนตี้ Microsoft นี่เยอะครับ อะไรที่ Microsoft เริ่มแหย่ขาเข้ามาก็จะถูกกลุ่มแอนตี้ต่อต้านอย่างหนัก อย่างเช่นกรณี Tomboy notes บน Linux เป็นตัวอย่างที่คลาสสิกมาก ใครสนใจลงไปค้นเพิ่มเติมดู ผมไม่ขอกล่าวนะที่นี้ครับ ดังนั้นไม่ว่า TypeScript จะดีแค่ไหนก็ตาม รับรองได้เลยว่าไปไม่รอดอย่างแน่นอน

แต่เกมส์มันเปลี่ยน เพิ่งเปลี่ยนเมื่อเดือนที่แล้วเอง ยังจำ AngularJS ที่ผมกล่าวถึงในบทความที่ผ่านมาได้รึเปล่าครับ ผมเคยบอกว่าทางทีมของ AngularJS ผู้นำด้าน SPA กำลังจะสร้างรุ่นใหม่ 2.0 โดยการเขียนใหม่ทั้งหมดไม่ได้ต่อยอดจากของเก่า รื้อเขียนใหม่ทั้งหมด ไหนๆ ก็รื้อแล้ว ก็เลยคิดจะเอา ES6 มาใช้ แต่ก็จนใจที่ spec ของ ES6 ยังไม่เสร็จดี ครั้นจะรอก็คงไม่ไหว ทอดตาไปทั่วแผ่นดิน ก็เห็น TypeScript นี่แหละ ที่เอา ES6 เป็นซับเซ็ท ทางทีม AngularJS จึงประกาศสร้างภาษา ATScript ที่จะผนวกเอา TypeScript มาเป็นซับเซ็ทอีกที แต่พอผ่านมาประมาณครึ่งปีมาถึง มีนา 15 ที่ AngularJS ก็ประกาศล้มเลิก ATScript และหันไปใช้ TypeScript เป็นฐานในการพัฒนาแทน

ถ้าเรื่องนี้เป็นเรื่องบังเอิญ ก็คือว่าทีม TypeScript ถูกหวยรางวัลที่ 1 จากที่คิดว่าไม่น่ารอด กลับกลายเป็นอนาคตสดใส แต่ผมว่ามีคนไม่น้อยที่ไม่เชื่อเช่นนั้น เรื่องนี้ไม่น่าจะเป็นข้อตกลงเพียงระหว่างทีมพัฒนาของทั้งสองทีม แต่น่าจะเป็นระดับบริษัทของสองยักษ์ใหญ่ของวงการอย่าง Google กับ Microsoft เลยทีเดียว ผมก็ไม่ได้ได้แอบอยู่ใต้เตียงซะด้วยเลยไม่รู้ว่าตกลงอะไรกัน แต่ที่แน่ๆ ก็คือภาษา TypeScript จากที่ร่อแร่ป้อแป้ ร่ำๆ ว่าน่าจะตามศิษย์พี่ใหญ่อย่าง VBScript ไปในไม่ช้า กลับได้น้ำฟื้นคืนชีพ กลายเป็นภาษาที่แรงมากในชั่วข้ามเดือนที่ผ่านมา

ปรัชญา TypeScript

ดูจากหัวหน้าทีมผู้ออกแบบ TypeScript คือ Hejlsberg แล้ว ผมเดาหน้าตาโทนของภาษาได้เลยว่าออกแนวไหนโดยไม่จำเป็นต้องเห็นตัวภาษาก่อนด้วยซ้ำไป ถ้าไปถาม Hejlsberg ถึง TypeScript เชื่อมั่นได้เลยว่าคำแรกๆ ที่พูดออกมาไม่หนีความว่า ‘static typing’  และตามมาด้วยคำว่า ‘strong typing’ อย่างแน่นอน มันกลายเป็นมนตราประจำค่าย Microsoft ในยุคปัจจุบันไปแล้ว ผมเองก็เคยเห็นด้วยนะ และมองขั้วตรงข้ามอย่าง ‘dynamic typing’ ว่าเป็นพวกเสี่ยงขี่ มอเตอร์ไซด์ไม่สวมหมวกกันน๊อค แต่พอมาใช้งานภาษาอย่าง Python ที่เป็น dynamic types อย่างจริงจัง พบว่ามันไม่ได้น่ากลัวอย่างที่ทางอีกขั้วพยายามโจมตี ในทางกลับกัน dynamic types กลับให้เราได้มากกว่าในราคาที่เท่ากัน

นอกจากเรื่อง static types แล้ว TypeScript ยังเพิ่มความสามารถอีกหลายอย่าง แต่ความสามารถเหล่านั้น มักมีอยู่ใน ES6 – harmony อยู่แล้ว TypeScript เพียงแค่นำเอาแนวคิดนั้นของ ES6 มา implementก่อนเท่านั้น แต่ความสามารถของทั้งหมด ES6 ยังไม่ได้บรรจุลงใน TypeScript อย่างครบถ้วน ทั้งนี้ก็เข้าใจไม่ยากครับ เพราะ spec ของ ES6 ยังไม่นิ่งนั่นเอง ณ ปัจจุบันวันที่เขียนบทความนี้ TypeScript รุ่นล่าสุดคือ 1.4 ทาง Microsoft ประกาศว่าหลังจาก ES6 คลอดแล้ว ทาง Microsoft จะออก TypeScript รุ่น 2.0 เพื่อรองรับ ES6 ให้ครบถ้วน

การเพิ่ม static types ของ TypeScript นั้นอยู่บนพื้นฐานปรัชญาที่ว่า “เพิ่มความสามารถโดยไม่ลดประสิทธิภาพ” ทำได้อย่างไรเรามาลองดูกัน

ใน TypeScript เราสามารถกำหนดชนิดตัวแปรต่างๆ ให้แก่ตัวแปรแต่ละตัวได้ และจะทรานไพล์กลายเป็น ECMAScript เหมือน CFront ที่ทรานไพล์จาก C++ ให้กลายเป็น C แต่ถ้าไปดูผลลัพธ์ ECMAScript เราจะพบว่า เราได้ source code เหมือนเดิมเกือบทุกประการ ต่างเพียงแค่ว่า ชนิดตัวแปรที่กำหนดเอาไว้ หายหมด แล้วมันจะสร้างชนิดตัวแปรมาขึ้นแล้วทุบทิ้งในขั้นตอนสุดท้ายเพื่ออะไรกันนะ

ประโยชน์ที่ได้มีสองสถานหลักๆ อย่างแรกคือ ‘Type Safety’ ถ้านิยามพารามิเตอร์ของฟังก์ชันไว้ว่าอย่างไร เวลาใช้งานก็ต้องส่งมาให้ตรงชนิดกัน ถ้าไม่ต้องกันก็จะทรานไพล์ไม่ผ่าน ซึ่งเชื่อกันอย่างกว้างขวางว่า type safety ลักษณะนี้จะทำให้เราสามารถเขียนโปรแกรมขนาดใหญ่ขึ้นโดยมีความผิดพลาดน้อยลง

ส่วนประโยชน์ข้อที่สองก็คือความสามารถในการทำ intelligence code completion หรือที่ศัพท์ทาง Microsoft เรียกว่า IntelliSense นั่นเอง ซึ่งความสามารถนี้คือการทาง IDE รู้จักชนิดของตัวแปร จึงสามารถแสดงตัวเลือกของ methods พร้อมทั้ง prototypes ต่างๆ มาให้เลือกได้อย่างถูกต้อง ไม่ต้องพิมพ์เอง ซึ่งเครื่องมือของ Microsoft เป็นเจ้าแรกๆ ที่ทำเช่นนี้ได้ ปัจจุบัน IDE ชั้นนำก็ทำได้ทั้งนั้น เพียงแต่ว่าถ้าภาษาเป็น dynamic types จะทำได้ยากกว่ามาก และไม่มีวันสมบูรณ์ 100% เพราะ IDE ต้องใช้วิธีการเดาชนิดตัวแปรของตัวแปรนั้น ดังนั้นเมื่อ TypeScript ดัด ECMAScript ให้กลายเป็น static types แล้ว ความสามารถนี้จึงได้มาโดยอัตโนมัติ

สรุปเนื้อหาที่จะเขียน

ในบทความนี้จะมุ่งเน้นไปยัง ES5 เป็นตัวตั้งต้น และส่วนใดที่เพิ่มเติมเป็น ES6 และ TypeScript ก็จะเขียนเพิ่มเติมแยกหัวข้อเอาไว้ต่างหากเพื่อความชัดเจน แต่แน่นอน ES6 ตอนที่ผมเขียนนี้ยังไม่เสร็จและ TypeScript2 ก็ยังไม่ออก ดังนั้นบทความชุดนี้ ผมคงต้องกลับมาปรับปรุงอีกรอบเมื่อ ES6 และ TypeScript2 ลงตัว

การติดตั้งโปรแกรม

ขั้นตอนนี้เป็นการเตรียมเครื่องมือที่จะใช้ในบทความต่อๆ ไป ผมใช้ node.js ที่รันโปรแกรม เป็น console หรือ text mode เหมือนกันเวลาที่เราเรียนภาษา C เมื่อหลายสิบปีก่อน ผมว่ามันง่ายดี  แต่ในบทความชุดนี้จะไม่ได้กล่าวถึงความสามารถที่เพิ่มเติมขึ้นมาใดๆ ของ node.js แต่อย่างใด มองมันเป็นคอมไพเลอร์ธรรมดาเท่านั้น และในบางครั้งเพื่อความเข้าใจผมอาจสลับไปรันบน browser เพื่อให้เห็นความแตกต่าง ซึ่ง browser ที่หมดใช้ในหมวดนี้ทั้งหมดจะใช้เพียงยี่ห้อเดียวคือ Chrome

คอมไพเลอร์ที่มีลักษณะเหมือน  node.js นั้นไม่ได้มีเพียงแค่ตัวเดียวนะครับ ตัวที่ดังๆ มีอยู่สองยี่ห้อ ซึ่งตัวแรกรู้จักกันเป็นอย่างดีแล้ว เป็นของ Joyent  เป็นต้นตำรับ node.js นั่นเอง แต่ต้นตำรับก็มีจุดอ่อนอยู่ครับ ก็คือกว่าจะออกแต่ละรุ่น ใช้เวลาออกค่อนข้างนาน ไม่ตอบโจทย์ความต้องการ ES6 ของ V8 ที่มีรุ่นใหม่ๆ ออกถี่กว่า

ศาสนา OpenSource สอนให้เราละเว้นการยึดมั่นถือมั่นกับบริษัทเอกชนเจ้าใดเจ้าหนึ่งเพียงลำพัง ดังนั้นจึงมีผู้ fork โครงการ node.js เอาไปทำ ตั้งชื่อว่า io.js เขา fork ไปตั้งแต่ node.js เพิ่งเริ่มโครงการใหม่ๆ ซึ่งวัตถุประสงค์ก็คือการขจัดปัญหาที่กล่าวมาข้างต้นทั้งหมด แถมยังคิดค้นของใหม่ของต้วเองใส่เข้าไปด้วย

ถ้าจะว่าไป node.js ถือได้ว่าเป็นซับเซตของ io.js นั่นเอง ถ้าเราใช้ io.js ก็เพียงแค่ติดตั้งทดแทน node.js เท่านั้น การตั้งชื่อเครื่องมือต่างๆ ก็ตั้งชื่อเหมือนกับ node.js ดังนั้นใช้ทดแทนกันได้เลย โดยไม่ต้องแก้อะไร ท่านเลือกตัวใดตัวหนึ่งก็ได้ ซึ่งต่อไปผมจะเรียกคอมไพเลอร์ของ Joyent ว่า node.js และใช้คำว่า node ในความหมายกว้างๆ อาจจะเป็น node.js หรือ io.js ก็ได้ แต่ในบทความนี้ผมจะใช้ node.js เป็นหลักนะครับ เพราะมีผู้ใช้มากกว่า และใครใช้ io.js ก็จะใช้ได้อย่างไม่มีปัญหาครับ

การติดตั้ง node

ชอบ node.js หรือ io.js ขึ้นอยู่กับท่านครับ การติดตั้งโปรแกรมก็ทำนองเดียวกัน ไม่แตกต่าง

ขั้นที่ 1 download โปรแกรม

ไปที่เว็บ https://nodejs.org เพื่อ download node.js หรือ https://iojs.org เพื่อ download ตัว binary ที่ตรงกับ OS ของท่าน ซึ่งได้หมด ตั้งแต่ Windows, Mac, Linux ไปจนถึง SunOS ถ้าเป็น Windows ก็เลือกที่เป็น Windows Installer แต่ถ้าเป็น Linux ก็เลือกที่เป็น .tar.gz มา ที่เราต้องลงโปรแกรมเองแทนที่จะใช้จาก repositories นั้นเป็นเพราะ เราจะได้รุ่นใหม่ล่าสุด และการติดตั้งโปรแกรมเองก็ไม่ได้ยุ่งยากอะไรนัก

ขั้นตอนที่ 2 การติดตั้งโปรแกรม

ทั้ง node.js และ io.js ใช้วิธีลงโปรแกรมเหมือนกัน สำหรับ Windows ก็เป็น installer ก็ next อย่างเดียว ยกเว้น directory ที่ลง ผมแนะนำให้ลงที่ c:\nodejs ครับ

สำหรับ Linux แค่ แตก package โดยใช้

ผมแนะนำให้แตกที่ home directory ของ user ที่เราใช้เลย เมื่อแตกแล้วก็จะได้ directory ใหม่ขึ้นมาเช่น node-v0.12.2-linux-x64 หรือถ้าท่านใช้ io.js ก็จะได้ชื่อคล้ายๆ กันนี้ เพื่อให้เรียกโปรแกรมจากที่ใดก็เรา เราจะต้องบรรจุ directory นี้ลงไปใน PATH ในการนี้เราแก้แฟ้ม ~/.profile เพิ่มบรรทัดข้างล่างต่อท้ายแฟ้ม

โดยชื่อ directory นั้นต้องตรงกับชื่อ directory ที่แตกออกมาจาก .tar.gz นะครับ อย่าลอกตามผม จากนั้น reboot เครื่องใหม่ซักหนึ่งรอบ

ขั้นตอนที่ 3 ทดสอบการติดตั้งโปรแกรม

เมื่ออยู่ที่ OS prompt ให้พิมพ์ตามนี้ครับ

จะบอกชื่อรุ่นของ node โปรแกรม node นี้เองเป็นทั้งคอมไพเลอร์ ตัว runtime และ interactive shell ในตัวเดียวกัน คล้ายๆ กับ Python หรือ Ruby นั่นเอง

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

npm เป็น package manager ที่จะดึง packages ที่เราใช้จาก repository ที่อยู่ในอินเตอร์เนต จะมองว่าเหมือน app store ของ OS โทรศัพท์มือถือก็คงไม่ผิดนัก จุดแข็งของ node ก็อยู่ที่ขนาดของ repository นั่นเอง มันใหญ่มาก ท่านไปค้นหาและเลือกใช้ได้ฟรีที่ https://www.npmjs.com ปัจจุบันที่เขียนบทความนี้ก็มีจำนวน packages พุ่งขึ้นไปกว่า 14x,xxx ตัวแล้วครับ ตัว repository นี้ใช้ได้ทั้ง node.js และ io.js ครับ

ถ้าเราต้องการ package ใดของ npm ก็ไม่ต้อง download มานะครับ ใช้คำสั่ง npm นี้ติดตั้งเลย โปรแกรมจะช่วยเราวิเคราะห์ว่า package ที่เราติดตั้งเรียกใช้ packages อื่นที่เรายังไม่ได้ติดตั้งหรือไม่ (dependencies) และจะรวบรวมติดตั้งมาให้ครบถ้วนในคราวเดียวกันเลย ในที่นี้ผมจะติดตั้ง ภาษา TypeScript ซึ่งก็เป็น package หนึ่งใน npm นั่นเอง ซึ่งทำได้โดย

คำสั่ง npm install เป็นคำสั่งติดตั้ง package ส่วน typescript เป็นชื่อ package ที่ท่านต้องการติดตั้ง ท่านสามารถเลือกหาได้จาก  https://www.npmjs.com ได้เลย ชอบ package ไหนเอาชื่อ package มาใส่แทนตรงนี้ ส่วน -g เป็นการติดตั้งเป็น global ที่โปรเจคมองเห็น ถ้าไม่ใส่ -g มันจะติดตั้งลงใน ./node_modules และเมื่อเรารันโปรแกรม node จะไปหา packages ที่เราต้องการใช้จาก ./node_modules และถ้าไม่เจอจะไปหาที่ global

จากนั้นเรามาทดสอบทรานไพเลอร์ TypeScript กัน ชื่อว่า tsc ลองพิมพ์เข้าไปที่ prompt เลยว่า

ถ้ามันแสดงรุ่นของโปรแกรมออกมา (ไม่ต่ำกว่า 1.4) ก็ยินดีด้วยครับ ท่านติดตั้งทรานไพเลอร์ TypeScript สำเร็จแล้วครับ

ขั้นตอนที่ 4 Hello, World Node

เมื่อทดสอบการติดตั้งโปรแกรมแล้วแล้ว ก็ควรมาลองเขียนโปรแกรมดูครับ เอาเป็นโปรแกรม Hello, World แบบมีการวนรอบ ตามนี้ครับ

โปรแกรมแสดง Hello, World 10 ครั้ง วิธีการเขียน ก็ให้ท่านพิมพ์คำว่า node แล้วกด enter เลยครับ มันจะได้ prompt เป็น >  จากนั้นก็พิมพ์เข้าไปเลยครับทีละบรรทัด บรรทัดแรกไม่ต้องแปลกใจว่าเพื่อพิมพ์เสร็จแล้วกด enter มันให้ผลลัพธ์ว่า undefined ก็คำสั่งไม่ได้เป็นคำสั่งที่แสดงค่านั่นเอง มันจึงไม่มีค่าที่ส่งกลับออกมา

ส่วนบรรทัดที่ 2, 3 และ 4 นั้นเมื่อพิมพ์เสร็จ มันจะแสดง … แสดง node.js จะรู้เองว่าคำสั่งยังไม่จบ มันจึงขอให้เราพิมพ์เพิ่มนั่นเอง เราก็พิมพ์ไปครับ หลังจากคำสั่งที่ 4 มันจึงแสดงผลลัพธ์ และแถม undefined ให้อีกที เนื่องจากคำสั่ง for ไม่ใช่คำสั่งที่แสดงผลลัพธ์นั่นเอง

แต่ถ้าเราพิมพ์คำว่า str แล้วกด enter มันจะแสดง คำตอบออกมาว่า ‘Hello, World’  คราวนี้ไม่มี undefined นะครับ เพราะคำสั่งนั้นเป็นการแสดงผล

ถ้าต้องการออกจากโปรแกรมให้กด ctrl-c สองครั้ง เป็นอันเสร็จพิธี

การรันอีกวิธีหนึง ให้ท่านก็ใช้ editor อะไรก็ได้ เขียนโปรแกรมข้างบนแล้วบันทึกแฟ้มเป็น hello.js จากนั้นก็ใช้ node รันได้ดังนี้ครับ

ก็จะได้ผลลัพธ์เดียวกัน หรือจะเขียนให้เต็มยศหน่อยก็สั่งดังนี้ครับ

command-line arguments ที่เติมเข้าไปสองตัวก็คือ –use_strict หมายความว่าตัวแปรนั้นต้องนิยามก่อนจึงจะใช้ได้ การนิยามโดยทั่วไปก็ใช้คำสั่ง var นั่นเอง จากตัวอย่างข้างต้น str ในบรรทัดแรกต้อง var ครับ  แต่ถ้าไม่ได้ใช้ –use_strict ก็จะไม่ต้อง var ก็ได้ แต่มันจะเสี่ยงต่อความผิดพลาดแล้วมีผลแปลกๆ บางอย่าง เพื่อตัดปัญหาผมเลย –use_strict เพื่อบังคับเลยว่าต้อง var ก่อนใช้เท่านั้น

แต่ถ้ากลัวลืม ก็ใส่เอาไว้ในโปรแกรมเลยครับ โดยที่เราเพิ่มบรรทัดแรกไปว่า

เท่านี้ก็จบครับ ในบทความชุดนี้ ผมจะใช้ strict mode ในทุกโปรแกรมที่เขียนครับ

ส่วน –harmony ก็คือการให้ node รองรับไวยากรณ์ของ ES6 (เท่าที่ทำได้) ถ้าไม่ใส่ argument ตัวนี้ก็จะเป็น ES5 ครับ

ขั้นตอนที่ 5 Hello, World บน Chrome

สร้างแฟ้ม app.html มีเนื้อหาดังนี้

และสร้างแฟ้ม app.js ภายในมีเนื้อหาเดียวกันกับ hello.js  นำแฟ้มทั้งสองไปใส่ไว้ใน web server จากนั้นก็ใช้ Chrome เรียกใช้ เมื่อเรียกใช้แล้วท่านจะไม่เห็นผลลัพธ์บน Chrome นะครับ เพราะคำสั่ง console.log() ไม่ได้เอาไว้ให้ผู้ใช้ดู เราต้องกด F12 เพื่อเรียก JavaScript Console ขึ้นมาจึงจะเห็นผลลัพธ์ เดี๋ยวถ้าท่านใช้ IDE ที่ผมแนะนำ ก็จะง่ายกว่านี้ครับ

ขั้นตอนที่ 6 Hello, World TypeScript

โปรแกรม Hello, World ของ TypeScript เขียนดังนี้ครับ

ลองเปรียบเทียบกับ ECMAScript ดูครับว่าต่างกันอย่างไร ที่ต่างมีแค่บรรทัดที่ 2 บรรทัดเดียวครับคือมีการกำหนดชนิดตัวแปรให้แก่ str ให้เป็นชนิด string นั่นเอง นั่นแหละครับหัวใจของ TypeScript เขาหละ

เอาแฟ้ม hello.js เดิมมาคัดลอกเป็น hello2.ts  (เน้นนะครับนามสกุล .ts) แล้วแก้โดยเพิ่มชนิดตัวแปร : string เข้าไป จากนั้นเราก็ลองทรานไพล์โดย

ถ้าไม่มีอะไรผิดพลาด เราจะได้ผลลัพธ์ออกมาเป็นแฟ้ม hello2.js  ลองเปรียบเทียบกับ hello.js ดูสิครับ เหมือนกันอย่างกะแพะ ก็ผมบอกแล้วว่า เมื่อทรานไพล์เสร็จชนิดหายหมด มันเอาไว้ตรวจเช็คเวลาทรานไพล์เท่านั้น

การติดตั้ง brackets IDE

IDE ที่ทำ frontend เก่งๆ ที่ทำได้ดีทั้ง HTML, CSS และ ECMAScript ในตัวเดียวกันนั้นมีหลายตัว แต่ถ้าตัดพวกหมีควาย ใหญ่โตกินทรัพยากรเครื่องอย่างหนัก และพวกที่ผูกติดกับ OS เจ้าใดเจ้าหนึ่งออกไป ก็จะเหลือตัวเก่งกล้าอาราเล่ไม่มากนัก ผมคัดมาให้สอง 2 ตัว WebStorm ของ JetBrains และ Brackets ของ Adobe

WebStorm ความสามารถอยู่ในขั้นสูงมาก ราคาไม่แพง ราคาเพียง $99 เท่านั้น บริษัทตั้งไข่ก็ครึ่งราคา สถานศึกษาหรือใช้งานแบบ Open Source ก็ฟรีครับ

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

การติดตั้งก็ไปที่เว็บแล้ว download มาเลยครับ เพื่อความสะดวกในการใช้งาน ผมแนะนำให้ติดตั้ง extension เพิ่มเติมโดยกดปุ่มที่อยู่ด้านขวาสุดที่เป็นตัวต่อเลโก้ชื่อว่า Extension Manager แล้วค้นหาติดตั้ง extensions ดังนี้ครับ

Node.js bindings เพื่อรันโปรแกรม node ได้จาก IDE โดยตรง
Brackets TypeScript เพื่อให้รองรับภาษา TypeScript
Brackets File Format เพื่อจัดแฟ้มข้อมูล JSON, XML, CSS หรือ SQL ให้สวยงาม

เมื่อติดตั้งแล้ว ท่านจะเห็นเมนูใหม่ที่ชื่อว่า Node.js กดเข้าไปเลือก Configuration… จากนั้นในช่องสุดท้ายที่เขียนว่า Flags for v8 ก็ให้ใส่ command-line arguments ดังที่กล่าวไว้ในหัวข้อก่อนหน้าว่า

 การใช้งาน

ไปที่ File->Open Folder… ไปเลือก root folder ของโปรเจคที่ท่านต้องการ จากนั้นการใช้งานได้เลยครับ สร้าง folder ย่อย หรือสร้างแฟ้มอะไรก็ได้ครับ ลองสร้าง hello.js ดูครับ จากนั้นรันโดย Node.js->Run เป็นอันเสร็จพิธีครับ

ส่วนถ้าจะรันบน Chrome นั้นก็เขียนทั้ง app.html และ app.js ตามหัวข้อข้างมันโดยใช้ Brackets ตามปกติ จากนั้นไปที่หน้า app.js แล้ว icon รูปเหมือน สายฟ้า หรือตัว N ที่อยู่ด้านขวาสุด มันจะเรียก Chrome ขึ้นมาโดยอัตโนมัติ และมี internal web browser สำเร็จเลย กด F12 จะเห็นผลลัพธ์

ถ้าแก้อะไรที่แฟ้มโปรแกรม หน้า Chrome จะปรับตามอัตโนมัติโดยไม่ต้อง refresh  แต่บางทีถ้าเกิดเพี้ยนๆ ก็กด refresh F5 ได้ครับ ไม่ต้องไปกดตัว N ใหม่

TypeScript หละใช้งานอย่างไร

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

ท่านก็ใช้ Brackets สร้างแฟ้มดังกล่าวตั้งชื่อว่า run_ts.js จากนั้นก็ไปสร้างแฟ้ม hello2.ts ภายในก็มีโปรแกรม TypeScript ดังข้างบน เมื่อต้องการรันโปรแกรม ให้สลับมาเลือกแฟ้ม run_ts.js  แล้วก็รันโดย Node.js->Run ก็จะรันโปรแกรม TypeScript ได้ครับ  และถ้าท่านต้องการเปลี่ยนชื่อโปรแกรมก็ให้เปลี่ยนที่บรรทัดที่ 3 ครับ

ทางเลือกอีกทาง

ถ้าท่านไม่ต้องการเขียนโค้ดข้างต้น เรามีอีกวิธีหนึ่งคือให้ tsc.exe รันค้างเอาไว้ เมื่อมันพอแฟ้มที่เราระบุมีการแก้ไข มันจะคอมไพล์ให้โดยอัตโนมัติ ดังนั้นท่านเพียงแค่รันโปรแกรมที่ tsc.exe สร้างให้เป็นแฟ้ม .js เท่านั้น การติดตั้งโปรแกรมเป็นดังนี้

โปรแกรมจะรันค้างเอาไว้ไม่หลุด มันจะรอไปเรื่อยๆ ถ้าท่านแก้ไข hello.ts มันก็จะคอมไพล์เป็น ES5 ซึ่งท่านนำไปรันได้เลย

ทิ้งท้าย

ในบทความต่อไปก็เข้าเรื่องการโปรแกรมกันแล้ว ติดตามกันต่อไปนะครับ

 

 

 

 

 

 

 

[Total: 7    Average: 4.6/5]

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *