JS ขำๆ

สวัสดีค้าบ ไม่เจอกันนานเลย 🙈

ฝากแก้ bug ด้วยนะครับ

https://jay-man.vercel.app

หลังจากลองเล่นๆ ChatGPT ดู เหมือนจะฉลาดมากเลยครับ https://chat.openai.com/chat

ใครลองๆเล่นแล้ว comment มาคุยกันได้ฮะ

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

โจทย์: Multiply Word in String

- เขียน function modifyMultiply โดยมี parameters ตามนี้

modifyMultiply(str, loc, num)

- str เป็น parameter แรกที่เป็น string ของคำ แต่ละคำคั่นด้วยช่องว่าง
- loc เป็น integer ที่ใช้ค้นหาตำแหน่งของคำนั้นๆ โดยเริ่มต้นที่ 0
- num เป็น integer อีกเช่นกัน ที่ใช้กำหนดจำนวนการทำซ้ำ โดยคำใหม่แต่ละคำ จะถูกเชื่อมด้วย -

ตัวอย่าง

modifyMultiply("สวัสดีครับ สบายดีไหม ครับ ",2,10) //ครับ-ครับ-ครับ-ครับ-ครับ-ครับ-ครับ-ครับ-ครับ-ครับ

modifyMultiply("This is a string", 3, 5) // string-string-string-string-string

เล่นบ้างครับ 😅

ทำความรู้จักกับ 2 Utility Types ที่ถือว่าถูกใช้งานบ่อยมากใน TypeScript อย่าง
Partial และ Required กันครับ

วันนี้มาในเรื่องของ Conditional Types นะครับ

ตามปกติแล้ว เวลาที่เราจะกำหนด Type ให้กับข้อมูล เราต้องคำนึงถึง ประเภทของข้อมูลที่ส่งเข้ามา (Input) และ ผลลัพธ์ของข้อมูลที่เราส่งออกไป (Output) ใช่ไหมครับ แต่ในบางครั้งข้อมูลที่เราได้มา อาจจะอยู่ในรูปแบบของ ตัวอักษร (String) หรือ ตัวเลข (Number) ก็ได้ (ในกรณีที่เรา ไม่ได้ทำการ validate input)

แล้วจะทำยังไงละ ถ้าเราอยากกำหนด Type ของข้อมูลให้ตรงกับประเภทของ input ที่ส่งเข้ามา ซึ่งเราก็ไม่แน่ใจว่าข้อมูลจะอยู่ในรูปแบบของ String หรือ Number ?

ใช้ Any ไง #ผิด

การทำ Conditional types ช่วยท่านได้ครับ

วันนี้มาในหัวข้อ Typescript Generics ครับ

วันนี้ขอพากลับมาที่เรื่องพื้นฐานของ TypeScript ในหัวข้อ Basic Types กันก่อนนะครับ

โดยทั่วไปของการเขียนโปรแกรมแบบ functional programming นั้น เราจะไม่ทำการเปลี่ยนรูปของตัวแปร หรือ Object (Immutable) โดยตรงกันนะครับ เช่นโดยเริ่มต้น Object ตัวนั้น มี properties กี่ตัว และแต่ละตัว value มีค่าเป็นยังไง ก็ควรเป็นแบบนั้นไปตลอด โดยไม่มีการเปลี่ยนแปลง ครับ

ซึ่งแน่นอน เราสามารถใช้ความสามารถของ TypeScript ทำสิ่งนี้ได้ โดยการใช้ Readonly ที่เป็น utility type เข้ามาช่วยครับ เช่น

ตัวอย่างแรก เป็นการประกาศ Type ตามปกติ แบบไม่ได้กำหนด read-only แล้วทำการ assign ค่าใหม่ให้กับตัวแปรเดิม จะเห็นว่า TypeScript จะไม่ได้ช่วยเช็ค error ในส่วนนี้ให้ครับ

ตัวอย่างที่สอง ทำการกำหนด Type ให้เป็น read-only จะเห็นว่า เมื่อเราพยายามกำหนดค่าใหม่ ให้กับ property name ซึ่งเป็นการเปลี่ยนค่าใน Object ดังนั้น TypeScript จึงทำการ throw error ในส่วนนี้ออกมาครับ

เทคนิคเล็กๆ น้อยๆ
สำหรับใครที่มีไฟล์ Javascript แล้วอยากใช้ความสามารถในการเช็คเรื่อง type ของ TypeScript เราสามารถเขียน // -check ไว้ด้านบนสุดของไฟล์ JS จากนั้น IDE ก็จะช่วยตรวจสอบความถูกต้องตามที่ TypeScirpt ทั่วๆ ไปทำ (แต่เราจะมาประกาศ type ในไฟล์ JS ไม่ได้นะ) ตรงนี้ก็จะช่วยลดข้อผิดพลาดของเราได้เหมือนกัน ตัวอย่างตามภาพครับ

หลังจากห่างหายไปอย่างยาวนาน พวกเรากลับมาแล้วครับ
การกลับมาครั้งนี้ มาด้วย concept TS ขำๆ จะเน้นเนื้อหาที่เกี่ยวข้องกับ TypeScript เป็นหลัก

สำหรับใครที่ไม่รู้ว่า TypeScript คืออะไร เดี๋ยวโพสนี้จะพาทำความรู้จักคร่าวๆ กันครับ

TypeScript เป็น SuperSet ของ JavaScript พูดง่ายๆก็คือ TypeScript สามารถใช้ความสามารถ ที่มีของ JavaScript ได้ทั้งหมด พร้อมทั้งยังเพิ่มความสามารถให้กับ JavaScript ได้อีกด้วย โดยสิ่งที่เพิ่มเข้ามาหลักๆเลยคือ Type System ที่จะเข้ามาช่วยในการจัดการเรื่อง Type นั่นเองครับ

ช่วยจัดการเรื่อง type ยังไงเดี๋ยวขอยกตัวอย่างง่ายๆ ให้ดูครับ
อย่างที่รู้กัน Javascirpt เมื่อเราประกาศตัวแปรขึ้นมาด้วย let หรือ var เราจะสามารถกำหนดค่าให้กับตัวแปรหลังจากการประกาศครั้งแรกได้ ซึ่งค่าใหม่ที่เรากำหนดจะเป็นอะไรก็ได้ ทำให้บ่อยครั้งเราเผลอกำหนดค่าใหม่ที่ไม่ใช่ type เดิมแต่ยังคงเรียกใช้ method ของ type แรกที่เราประกาศ ซึ่งจะทำให้เกิด runtime error แต่ถ้าเป็น TypeScript เราจะถูกเตือนจาก IDE และ complie ไม่ผ่านซึ่งจะช่วยลดปัญหาข้างต้นได้ และบัคในส่วนนี้ก็จะน้อยลงไปด้วย

หมายเหตุ ตัวอย่างจากโพสนี้เป็นเพียง 1 ในหลายๆ ข้อดีของ TypeScript เท่านั้น ส่วนข้อดีอื่นๆ จะมาในโพสต่อๆ ไปครับ

2022 JS ขำๆ -> TS ขำๆ Stay tuned!