[Blog] One Year War (part 1/3) : Typescript

เมื่อช่วงเวลานี้ของปีที่แล้ว ... อันเนื่องมาจาก Oracle ประกาศลอยแพ Java Plugins บน Browser ...  

เลยทำให้ได้มีโอกาส(เริ่ม)ทำ SPA แบบที่เป็น Modern Technology ที่มีอยู่ในท้องตลาดอย่าง AngularJS และ Typescript ที่เรียกได้ว่าช่วงนั้น ปังสุดๆ ก็ว่าได้ ...  

จนมาถึงวันนี้ ก็ถือว่าประสบการณ์ 1 ปีแล้วสำหรับ AngularJS และ Typescript .. 

เลยคิดว่าได้เวลามาเขียนรีวิว จริงๆ จังๆ ซะที ...

ด้วย Background การทำ web ที่มีอยู่แล้ว
อะไรที่ Simple ๆ จะขอข้ามไปเพราะคิดว่า search google 

ยังไงก็เจอ tutorial แบบ Copy and Paste ได้อยู่แล้ว

ทำไมถึง One Year War ?

การสู้รบปรบมือ เป็นเรื่องธรรมดามากหากเราหัดใช้ Tech ใหม่ๆ
มีทั้ง Surprise หลายๆ อย่างที่เจอระหว่าง Dev ไม่ว่าจะเป็น Typescript Transpiler หรือแม้แต่ AngularJS ที่ไม่คิดว่าจะมีปัญหาก็ต้องมาเจอกับปัญหา Performance ที่เกิดจากเขียนแบบ Noob Noob


Typescript ดียังไง ?

หากเคยเขียน Type Language มาก่อน อย่างเช่น JAVA หรือ C# หรือแม้แต่ PHP ...
การที่ตัวแปรมี Type นั้นทำให้เราจัดการกับ Data ที่เก็บอยู่ในตัวแปรนั้นๆ ได้อย่างสบายใจ
ซึ่งผิดกับ javascript ที่ไม่มี Type หรือแม้มี Type ก็มีพวก Object
หรือ Define Type ที่การใช้งานค่อนข้างจะลำบาก และ ไม่มี Hint Assist ใน IDE ทั่วๆ ไป

Typescript จึงมาช่วยในส่วนที่ขาดของ Javascript เหล่านั้น ดังเช่น
การทำ IIFE (immediately-invoked function expression) 
ถ้าเป็น Typescript เราสามารถเขียนได้ดังต่อไปนี้

namespace Hello {
  export function world() {
  }
}

เมื่อทำการ Transpile ผ่านพวก tsc ให้เป็น Javascript ปกติ ... เราจะได้ code แบบนี้

var Hello;
(function (Hello) {
    function world() {
    }
    Hello.world = world;
})(Hello || (Hello = {}));

ดูดีเลยทีเดียว ...
แต่ส่วนตัวที่คิดว่า Highlight ของ Typescript นั้น
น่าจะอยู่ที่ Feature ที่ทำให้เรา เลิกที่จะเขียน ....

var that = this;

โดยการใช้แบบนี้ แทน ....

 แล้ว Code ที่เราจะได้ คือ ....

จะเห็นว่า Typescript ทำการ Wrap inner function ด้วย IIFE ให้
ซึ่งทำให้เราลดการเขียน var that = this ไปได้หลายบรรทัดเลยหากเราเขียนเป็น Class ...

ไปลองเล่นตาม Play Ground ได้ที่นี่ - https://www.typescriptlang.org/play/index.html


ข้อเสีย Typescript ?

แน่นอนว่าภาษาที่ต้องใช้ Compiler/Translator มันมักจะไม่ค่อยคล่องตัวเท่าไหร่ ....
เนื่องมาจาก Typescript โดยพื้นฐานเป็นการทำ Javascript ให้มี "Type"
ดังนั้นหากเราต้องการใช้ Javascript Library จึงจำเป็นที่จะต้องมี "Type" เสียก่อน
โชคยังดีที่มี DefinitelyTyped ซึ่งเป็นที่รวม "Type" ของ Javascript Library
ที่มีคนอาสา Define "Type" มาให้ ซึ่งถ้าหาก Library ที่เราใช้ ไม่ Popular พอ ...
เราก็ต้องทำ Type ขึ้นมาเอง แต่จุดเริ่มต้นที่ดี คือไปลองหาใน repo นั้นก่อน หรือผ่านทาง Typings

และแม้ว่า tsc จะสามารถทำ sourcemap ที่เกิดจากการ transpile typescript ให้เป็น javascript
แต่ในบางครั้งการที่เราจะ debug typescript นั้นก็ไม่ง่ายเท่าไหร่นัก ....

สรุป

การใช้ Typescript ทำให้การเขียน code javascript เป็นเรื่องที่ง่ายขึ้น
แต่ก็แลกมากับ overhead ที่เกิดขึ้นไม่ว่าจะเป็นการ Transpile หรือแม้แต่ Debug ....
หากจะนำ Typescript ไปใช้ อาจจะต้องดูว่า ทีมที่ทำนั้นมีประสบการณ์ Javascript มามากน้อยแค่ไหน
ถ้ามาจากฝั่งพวก Java หรือ Type Language เพื่อมาเริ่ม project ใหม่
ที่เป็น javascript ก็เป็นนิมิตหมายที่ดีที่จะนำมาใช้ครับ

แต่ถ้า โปร javascript อยู่แล้ว  ... หรือเขียน module style แบบ NodeJS ....
ข้ามๆ มันไปเถอะ ถ้าไม่ได้จะใช้ AngularJS 2  lol