[React] TypeScript with React — Form submission and Hooks
หลังจากที่เราได้รู้จักกับการใช้ TypeScript เบื้องต้นใน React แล้ว เราก็มาลงรายละเอียดกับการใช้ TypeScript ใน Form และ React Hooks กันเลยครับ
Form Submission
สำหรับ Form ใน React เราสามารถกำหนด type ของ event ที่เรารับจาก form ได้ โดยเราจะใช้เป็นชนิด React.FormEvent เพื่อบอกว่า function นี้รับ event จากการ submit ของ <form>
React Hooks
1. useState
เราสามารถกำหนด data type ของ state ที่เรากำหนดขึ้นมาได้
const [count, setCount] = useState<number | null | undefined>(0)จากตัวอย่างด้านบน เราสามารถกำหนดชนิดของ count ได้ โดยกำหนดให้สามารถเป็นได้ทั้ง number, null และ undefined ถ้าเราเผลอกำหนดให้ count เป็น string ก็จะเกิด error ขึ้น ทำให้ช่วยลดความผิดพลาดได้เยอะเลยครับ
2. useEffect
TypeScript จะตรวจสอบให้เองว่าเราใช้งาน useEffect ถูกต้องไหม ทำให้เราไม่ต้องเขียน code เพิ่ม และสามารถใช้งานเหมือนกับ JavaScript ได้เลยครับ ตัวอย่างเช่น การตั้ง timer เพื่อนับเลขเพิ่มขึ้น 1 ทุก ๆ หนึ่งวินาที
ส่วน useLayoutEffect ก็เหมือนกันครับ ใช้งานได้เหมือนกับ JavaScript
3. useRef
เมื่อเราสร้าง ref เพื่ออ้างถึง HTML element ใน TypeScript เราจำเป็นต้องบอก type ของ HTML element ที่เราอ้างถึง เช่น ถ้าเราอ้างถึง <input> เราก็ต้องบอกว่า ref ตัวนี้เป็นชนิด HTMLInputElement โดยต้องมีค่าเริ่มต้นหรือ initial value ของ ref เป็น null
ในส่วนของ submitHandler function
const enteredText = ShoppingListInputRef.current!.value;เราจะเห็นว่ามีเครื่องหมาย ! อยู่ด้านด้าน .value ด้วย ซึ่งหมายถึงค่าของ enteredText จะเป็นได้แค่ string เท่านั้น ไม่สามารถเป็นค่าว่างอย่าง undefined หรือ null ได้ ถ้าเราต้องการให้ enteredText สามารถเป็น undefined ได้ เราจะใช้เครื่องหมาย ? แทน แต่แนะนำว่าให้ใช้เป็น ! อยู่ตลอดครับ
4. useContext
สำหรับ useContext ก็จะเป็นการกำหนด data type สำหรับ context โดยจะกำหนด data type ในส่วนของ value ที่จะให้ customer components ใช้งาน และตัว component ที่ใช้ create context โดยจะต้องมี data type ที่ตรงกัน
5. useMemo
จุดประสงค์ของ useMemo คือ ต้องการให้ function นั้นทำงานเมื่อ props มีการเปลี่ยนแปลง ถ้า props ไม่เปลี่ยนก็จะแสดงว่าผลลัพธ์ก็เป็นเหมือนเดิม จึงไม่มีความจำเป็นต้อง run ข้างใน function นั้น ซึ่ง TypeScript ก็จะตรวจสอบให้เหมือนเดิมว่า data type ที่รับเข้าไปใน function ถูกต้องหรือไม่ ซึ่งก็ใช้งานเหมือน JavaScript เลยครับ เพียงแต่มีการตรวจสอบ data type เพิ่มขึ้นมาเท่านั้นเอง
useCallback ก็เหมือนกันครับ เพียงแต่เปลี่ยนจากการ return value เป็น function
6. useReducer
สำหรับการเขียน useReducer นั้น สิ่งที่เราต้องเขียนเพิ่มก็คือ data type ของ action และ state ของ reducer function อย่างตัวอย่างด้านบนนี้ ผมกำหนดให้ action มี type ได้ 3 ประเภท ได้แก่ reset, increment และ decrement ซึ่งเป็น string ได้แค่ 3 ตัวนี้เท่านั้น ถ้าเป็น string ตัวอื่นหรือ data type อื่น ก็จะเกิด error ขึ้น ส่วน state ก็ให้เรากำหนด data type เช่นกัน ในที่นี้มีแค่ counter ตัวเดียว จึงกำหนดให้ counter เป็นชนิด number
