[React] Basic concept about how to use TypeScript in React
หลังจากที่เราได้ใช้งาน React กันไปสักพักหนึ่งแล้ว เราจะพบกับปัญหา error ใน code อยู่บ่อย ๆ เนื่องจาก JavaScript นั้นเป็นภาษาที่ไม่ได้กำหนดชนิดของตัวแปร ทำให้มีความยืดหยุ่นมาก แต่ก็มาพร้อมกับโอกาสที่จะผิดพลาดมากขึ้นเช่นกัน
ผมจึงขอนำเสนอ “TypeScript” ซึ่งเป็นภาษาที่เป็น superset ของ JavaScript นั่นหมายความว่าทุกอย่างใน JavaScript เราสามารถเขียนใน TypeScript ได้ครับ โดยในบทความนี้ ผมจะขอเน้นที่การใช้ TypeScript ใน React นะครับ
วิธีติดตั้ง TypeScript ใน React app
npx create-react-app react-app --template typescriptเราจะใช้คำสั่งคล้าย ๆ กับตอนสร้าง React app แต่เราจะเพิ่ม --template typescript เข้าไป เพื่อ set up โปรเจกต์สำหรับการใช้ TypeScript ให้กับเรา เมื่อเราเปิดโปรเจกต์ขึ้นมาหลังจากติดตั้งแล้ว ก็จะพบว่านามสกุลไฟล์จะเปลี่ยนจาก .js ที่เราคุ้นเคยเป็น .tsx หรือ TypeScript สำหรับ React นั่นเองครับ
โดยปกติแล้วถ้าเราจะใช้ TypeScript ใน Project จะต้อง compile เป็น JavaScript อีกทีหนึ่ง เพราะ web browser ไม่สามารถเข้าใจ TypeScript ได้ แต่ถ้าเราใช้คำสั่งด้านบนนี้ เราจะไม่ต้องยุ่งกับเรื่อง compile เลยครับ สามารถใช้งาน TypeScript ได้ทันที
Props
Props คือ สิ่งที่เราใช้ส่งข้อมูลจาก component หนึ่งไปอีก component หนึ่ง ซึ่งเราอาจจะเกิดปัญหาที่ว่าเวลาเราอ่าน code แล้ว ไม่รู้ว่า component นี้ต้องใส่ props อะไรบ้าง ใส่กี่ตัว ไม่ใส่บางตัวได้ไหม ซึ่งนี่ก็เป็นปัญหาเวลาที่โปรเจกต์เราใหญ่ TypeScript ก็ให้มอบสิ่งที่เรียกว่า React.FC ให้เราครับ
React.FC
React.FC คือ การบอกให้ React รู้ว่า component นี้เป็น functional component หรือ React component แล้วทำไมถึงต้องกำหนดด้วยล่ะ นั่นเป็นเพราะว่าถ้าเราไม่กำหนด React จะไม่แน่ใจว่าสิ่งนี้คือ React component หรือ function ธรรมดา ซึ่งถ้าเป็น กำหนดเป็น React component จะทำให้เราสามารถใช้ props.children และ key attribute ได้ครับ
นอกจากนั้นเรายังสามารถกำหนด props ว่า component นี้รับ props อะไรได้บ้าง และแต่ละ props จำเป็นต้องใส่หรือไม่ โดยใช้ Interface
จาก code ด้านบน ใน ShoppingCart.tsx นั้น มีการใช้ React.FC เพื่อกำหนดให้เป็น React component และกำหนด props ของ component นี้ โดยใช้ interface เพื่อกำหนด data type ของแต่ละ props ที่ต้องการ เมื่อเรากำหนด props แล้ว App.tsx จะต้องใส่ props ตามที่กำหนดไว้ให้ครบด้วย ถึงจะไม่เกิด error
สัญลักษณ์ <> คืออะไร?
<> เป็นสัญลักษณ์สำหรับกำหนด Generic type หรือชนิดของข้อมูล ซึ่งเป็นเหมือนกับ template ไว้เขียนให้รู้ว่าแต่ละตัวแปรมีชนิดข้อมูลเป็นยังไง
กรณีที่เราอยากให้ props บางตัวไม่จำเป็นต้องใส่มาก็ได้ เราจะใช้เครื่องหมาย ? ใส่ไว้ด้านหน้าของ semicolon (:) อย่างเช่น description?: string; ทีนี่เราก็ไม่จำเป็นต้องใส่ description แล้ว
Data Types
ใน TypeScript เราจำเป็นต้องกำหนดชนิดของข้อมูล ซึ่งชนิดของข้อมูลแบบต่าง ๆ ที่เราสามารถกำหนดได้ ตัวอย่างเช่น
- string — ตัวอักษรและอักขระต่าง ๆ
- number — ตัวเลขทั้งจำนวนเต็มและจำนวนทศนิยม
- array — กำหนดให้เป็น array โดยจะใส่ [] ด้านหลัง data type
- function — กำหนดให้เป็น function โดยใส่ในรูปแบบ
(variable: data type) => data type;โดย data type อันแรกจะเป็นของ argument ที่ function นี้รับเข้ามา ส่วน data type อันที่สอง จะเป็นชนิดของค่าที่ return ถ้าไม่มีก็ใส่ void
- object — กำหนดให้เป็น object โดยจะกำหนดในรูปแบบ
{
variable1: data type;
variable2: data type;
...
}นอกจากนั้นเรายังสามารถใส่ interface ซ้อน interface ได้ เช่น Interface Props ด้านบน สามารถกำหนดให้ person: Person ได้ ซึ่ง Person คือ interface Person ที่มี firstname และ lastname อยู่ หรือจริง ๆ ก็คือ Person เป็น object นั่นเอง
React Hooks
นอกจาก Props แล้ว เราก็สามารถใช้ TypeScript กับ React Hook ได้ด้วย ผมขอยกตัวอย่างเป็น useState นะครับ
const [count, setCount] = useState<number | null | undefined>(2)จากตัวอย่างด้านบน เราสามารถกำหนดชนิดของ count ได้ โดยกำหนดให้สามารถเป็นได้ทั้ง number, null และ undefined ถ้าเราเผลอกำหนดให้ count เป็น string ก็จะเกิด error ขึ้น ทำให้ช่วยลดความผิดพลาดได้เยอะเลยครับ
นอกจากเรื่องลดโอกาสความผิดพลาดลงแล้ว TypeScript ยังทำให้การทำงานของ auto-complete ใน React ดีขึ้นด้วยครับ อย่างเช่น ตอนเราพิมพ์ event.current.value เราอาจจะไม่เห็นมีคำว่า current หรือ value ขึ้นมาให้เรากด tab ทำ auto-complete แต่พอเราใช้ TypeScript แล้ว จะพบว่ามี auto-complete แสดงตัวเลือกที่เป็นไปได้ทั้งหมดมาให้เราเลือก นั่นเป็นเพราะว่าเราได้กำหนดชนิดของข้อมูล ทำให้ React รู้ว่ามีค่าอะไรที่เป็นได้บ้างได้ง่ายขึ้นนั่นเองครับ
ในบทความหน้าเราจะมาลงรายละเอียดในส่วนของการเขียน TypeScript สำหรับ Form และ React Hooks กันนะครับ 👇
