Typescript 3 Step Getting started

หลายๆคนที่เป็น developer ( นักพัฒนา ) ด้านเว็บน่าจะรู้จักเจ้า typescript ไม่มากก็น้อย น่าจะเคยได้ยินผ่านหูมาบ้าง เอาจริงๆผมได้ยินมานานแล้ว และได้มีโอกาสในการนำมาใช้งานในการพัฒนางานจริงซักที จึงอยากแชร์ความรู้ที่เรียนมา อาจจะไม่ใช่ทั้งหมดแต่ก็จะมาเล่าข้อดีข้อเสียกันนะครับ

1. Typescript คืออะไร ?

ถ้าพูดง่ายๆมันคือภาษาที่เป็น pre-complie หรือเข้าใจง่ายๆเป็นภาษาที่เขียนแล้วแปลงเป็น javascript อีกที แล้วทำเพื่ออะไร ? ทั้งๆที่เราเขียน javascript เองก็ได้อยู่แล้ว เราจะเรียนภาษาที่ทำเป็น javascript อีกทำไมถูกไหม ถ้าคุณเริ่มเขียน javascript มาซักพักหนึ่งคุณจะเจอปัญหาพื้นฐานอย่างหนึ่งเลยคือ

ความ dynamic type หรือพูดง่ายๆคือ ตัวแปรที่เราประกาศเป็น string ตอนแรกเราสามารถเปลี่ยนแปลงค่ามันในตอน run time ( ตอนที่โปรแกรมทำงานอยู่ ) เป็น number ได้เลย ยกตัวอย่างง่ายๆที่ typescript ชอบใช้แล้วกัน

function plus(x,y) {
  return x + y
}
plus(1,1) // return 2

จากตัวอย่างข้างบนจะเราเขียน function ง่ายๆให้ทำการบวกค่า 2 ค่าแล้วก็คืนค่ากลับไป คุณอ่านก็คิดว่า ก็ไม่มีอะไรแปลกนี่หว่า ? ใช่ครับ จนกระทั่งมีคนเรียกแบบนี้

plus('abc', 'def') // return 'abcdef'

คราวนี้กลายเป็นว่า function นี้เอาค่า string + string ซึ่ง program เราทำงานได้ แต่ไม่ถูกต้อง เพราะ function ที่เราตั้งใจเขียนแต่แรกคือการเอาค่าสองค่าเอารวมค่ากัน และเราตั้งใจในตอนแรกว่ามันต้องเป็นตัวเลข แต่ดันมีคนกรอก string มาอย่างนี้ถ้าเราจะต้องมาเขียนกันเราต้องเขียนยังไงครับ ?

function plus(x,y) {
  if( typeof x === 'number' && typeof y === 'number') {
    return x + y
  }
  throw new Error('need parameter to be number')
}

โดยตัว typescript จะเป็น superset ของ javascript นั่นหมายความว่าสิ่งที่ javascript ทำได้ตัว TS จะเขียนได้เช่นกันแต่มีบางอย่างที่ตัว TS ทำได้แต่ตัว javascript ทำไม่ได้ครับ ดูจากรูปด้านล่างได้เลย

typescript
typescript superset javascdript

แต่ ณ ปัจจุบันตัว browser เองยังอ่าน TS ไม่ได้เราเลยจะทำการเขียน file TS ก่อนแล้วทำการ complie เป็น javascript ครับ

2. ทำไมเราต้องใช้ Typescript ?

เอาจริงจุดประสงค์หลักๆ คือ ทำให้ javascript เป็น strong type นั่นแหละคือจุดประสงค์จริงๆ แค่นี้เลย ที่เหลือเป็นพวกลูกเล่นช่วยเหลือเราให้สามารถดูแลโค้ดได้ง่ายขึ้นและดีขึ้นครับ

จากตัวอย่างข้างบนถ้าเราเขียนเป็นแบบ TS แล้วหน้าตามันจะประมาณนี้ครับ

function plus(x:number, y:number):number {
  return x + y
}

โดยไม่ต้องมาเขียน error ด้วยซ้ำเหตุผลเพราะว่าถ้าเราใช้ TS แล้วตัว IDE ในปัจจุบันนั้นมันจะทำการเช็คค่าต่างๆ ให้เราอีกด้วย เพราะฉะนั้นมันจะไม่มีทางเลยที่ตัว program เราจะปล่อยให้คนกรอกเป็น string เข้ามาครับ
( ใครยังไม่รู้จักว่าอะไรคืออะไรเชิญอ่านตรงนี้ก่อน https://oxygenyoyo.com/2019/02/23/set-up-ide-code/ )

ช่วยอธิบาย code

ตัว TS ถ้าเราใช้ไปสักพักเราจะเริ่มเข้าใจไอเดียของมันว่า มันช่วยบอกให้คนที่มาทำงานต่อจากเราสามารถเข้าวิธีการออกแบบ และการส่งค่าหรือการใช้ function ต่างๆได้ง่าย ผมยกตัวอย่างง่ายๆแล้วกัน ปกติถ้าเราจะเขียนขอข้อมูลจากหลังบ้าน (back-end ) หลายๆครั้งที่มีคนมาทำงานต่อเราจะสงสัยว่าค่าที่รับมา มันมีอะไรบ้าง ? ก็ต้องมานั่งคุยนั่งถามกัน หรือไม่ก็ต้องลองยิง request นั้นๆเพื่อทำการ log ออกมาดูถูกต้องไหมครับ ?

แต่ตัว TS มันบังคับให้เราต้องเขียนไว้เลยว่า สิ่งที่รับค่าจาก api มันมีอะไรบ้าง กี่ field มันอาจจะยุ่งยากในช่วงแรก แต่ใช้ไปสักพักจะเริ่มชินไปเอง ผมจำได้ว่าตอนผมไปเริ่ม project ใหม่จากคนในทีมผมแทบไม่ต้องถามเลยว่า มันส่งค่าอะไรไป มันรับค่าอะไรมา เพราะตัว code มันบอกหมดอยู่แล้ว

ลด common bug ลด 15%

อันนี้คือผมก็อ่านๆมานะจำนวนเปอเซ็นต์ อย่าไปใส่ใจมาก ฮ่าๆ แต่มันช่วยลด bug อันนี้ถือว่าช่วยนะ เพราะบางครั้งเราไปเปลี่ยนแแปลงค่าอะไรบางอย่าง ตัว TS มันจะช่วยเช็คว่า type ที่มีการเรียกข้ามกันไปมามันถูกต้องไหม สมมติว่า function a จะคือค่าเป็น number แล้ว function b นำไปใช้ต่อ แล้วอยู่ดีๆมีคนไปเปลี่ยนแปลงค่าที่ return ของ function a เป็น string หรือว่าตัว TS เองเช็คว่า การเขียนโค้ดของเราไปเปลี่ยนแปลงค่าที่จะ return เป็น string มันจะทำการแจ้ง Error เลยและไม่ยอมให้เรา complie เป็น javascript ด้วยครับ

ดีอย่างนี้ทำไมคนไม่ค่อยใช้กัน ?

ต้องบอกตรงๆเลยว่า การจะปรับเปลี่ยน mindset การเขียนมันต้องใช้ความอดทนในช่วงแรกเยอะ นอกจากข้อดีข้างบนที่กล่าวถึงแล้วคราวนี้เรามาดูข้อเสียกันบ้างว่าทำไมคนไม่ค่อยใช้ เหตุผลตามนี้เลยครับ

set up ยุ่งยาก

คือเอาจริงๆถ้าไม่ได้ set up กับ project ตั้งแต่แรกนั้น การติดต่อก็มียุ่งยากนิดหน่อย ถ้าเป็นพวก javascript แบบ vanilla ( หมายถึงไม่ใช้อะไรเลย เพียวๆ ) ก็จะง่ายหน่อย แต่ถ้าสมมติมี frontend framework ที่ไม่ได้ฮิตๆในปัจจุบันก็อาจจะเหนื่อย หลายๆคนเลยเลือกว่า เอาไว้ project หน้าแล้วกัน ซึ่งไม่มีอยู่จริงเพราะพอเริ่ม project หน้าเราก็จะรีบๆ set up เอาแบบที่เราถนัดซึ่งจะไม่ได้ติดตั้ง แต่แรกอยู่ดี เชื่อเถอะว่าถ้าไม่ฝืนใช้ครั้งแรก ก็จะไม่ใช้อยู่ดี โชคดีของผมตรงที่ project ที่ผมไปจับนั้นมันบังคับ

3. learning curve ต้องใช้เวลาสักพัก

คือต่อให้มันดูเหมือนจะเรียนรู้ง่าย เพราะถ้าเป็นคนมาจากการเขียนภาษา strong type จะเฉยๆมาก แต่สำหรับคนที่เริ่มต้นจากภาษา dynamic. type อาจจะเรียกว่าฝันร้ายได้เลย อย่างผมเองเริ่มเขียน PHP4 ซึ่งปัจจุบัน PHP8 แล้วมัน strong type แล้วเหมือนกันก็ยินดีกับคนเขียน PHP ด้วยนะครับ แต่ผมก็ย้ายมาเขียน javascript ก็ยังเป็น dynamic type อยู่ดี

ผมเริ่มต้นเรียนจากคอร์สเรียนนี้ สำหรับผมถือว่าค่อนข้างดีมีตัวอย่างเยอะผมยังเรียนไม่จบแต่ถือว่าโอเคมากๆสำหรับผม อย่างไรลองไปเรียนดูครับ

https://www.udemy.com/course/understanding-typescript/

เพราะหลายๆอย่างมันจะขัดใจมากๆตอนเราเริ่มเรียน เริ่มใช้งานและมีเรื่องการกำหนด type ต่างๆตอนแรกๆจะขัดใจแต่ทำไปซักพักจะเริ่มชินครับ

เรียนคนเดียวค่อนข้างช้า

อันนี้ผมแชร์จากประสบการณ์ตรงผมเองแล้วกันนะครับ พอดีผมเพิ่งเข้าไปทำงานกับบริษัทที่ให้ความสำคัญกับ Developer อย่าง wisesight ใครยังไม่เคยอ่านผมแนะนำลองอ่านดูครับ ที่นี่ดูแล developer ดีจริงๆ

https://oxygenyoyo.com/2022/07/25/impressive-work-wisesight/

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

สรุป

คุณได้เรียนรู้ว่า typescript คืออะไร แล้วทำไมเราถึงต้องใช้มัน ข้อดี-ข้อเสีย บทความถัดไปเกี่ยวกับเรื่อง typescript ผมจะเขียนเกี่ยวกับการติดตั้งใน project แบบ vanilla และ nextjs นะครับ แล้วก็จะสอนเกี่ยวกับเรื่องการเขียนแบบพื้นฐานนะครับติดตามได้ ขอบคุณครับ

Loading

เป็นโปรแกรมเมอร์ที่ตามหาคุณค่าของชีวิตและความฝันในวัยเด็ก ชอบเล่นเกม เรียนรู้ทุกอย่าง ชอบเจอคนใหม่ๆ งานสังคมทุกชนิด ออกกำลังกายในวันว่าง อ่านหนังสือ มีเว็บรีวิวหนังสือด้วย www.readraide.in.th