index.ts
ที่ทำการ Render หน้าเว็บให้แบบโล่งๆ โค้ดที่มีอยู่แล้วให้ทำการลบไปได้เลย เราจะมาลองเขียน TypeScript และเรียนรู้ไปด้วยว่า มันต่างกับ JavaScript ยังไงบ้างfetch
ในการเรียกfetch(
ลงใป ตัว Editor จะแนะนำเราแบบคร่าวๆ ว่าต้องการอากิวเมนต์กี่ตัว และแต่ละตัวมี Type อะไรบ้าง (Feature นี้เรียกว่า Intellisense)fetch
จะรับ Argument ตัวแรกเรียกว่า input
ที่มีชนิดเป็น RequestInfo
และตัวที่สองเรียกว่า init
เป็น RequestInit
หรือ undefined
(แปลว่าตัวที่สองเราจะไม่ใส่ก็ได้) และมีการคืนค่าเป็น Promise<Response>
input
ให้เป็น URL ของ API ที่เราต้องการใช้ คือ https://randomuser.me/api
fetch
นั้นคืนค่าเป็น Promise<Response>
เราต้องทำการรับด้วย .then
แล้วภายในจะเป็นค่าที่มีชนิดเป็น Response
หรือจะใช้ Syntax แบบ async/await
ก็ได้Response
ที่ได้มาเป็น Object ด้วย .json()
เนื่องจาก API ที่เราทำการยิงไปนั้นคืนค่าเป็น JSON ต่อจากนั้นเราจะ Chain ด้วย .then()
อีกครั้งเพื่อทดลอง Log ข้อมูลออกมาconsole.log(res)
เป็น Object ที่มีรูปร่างแบบนี้res
ตัวล่างกลับพบว่า มันมี Type เป็น any
เฉยเลย.json()
นั้นมีแค่หน้าที่แปลงข้อมูลเท่านั้น ไม่ได้รู้ล่วงหน้าว่าเราจะ Fetch ข้อมูลแบบไหนมา จึงทำให้มันกลายเป็น any
ในท้ายที่สุด แปลว่าหลังจากนี้เราจะเรียกฟังก์ชั่นหรือทำอะไรกับ res
ก็จะไม่ขึ้น Type Error เลยres
กลับมามี Type อีกครั้ง ทำได้ด้วยการแปลงค่า โดยเรารู้อยู่แล้วว่าหน้าตาของข้อมูลจะเป็นประมาณไหน ให้สร้าง Interface หรือ Type ขึ้นมาจากข้อมูลนั้นได้เลยres
มี Type ถูกต้องแล้ว Intellisense ก็จะกลับใช้งานได้อีกครั้ง เพราะไม่ได้เป็น any
แล้วconsole.log
เพื่อดีบั๊กค่าตัวแปรอยู่เรื่อยๆRes
หน้าตาแบบนี้null
" ก็ได้ เช่นกรณีนี้เราจะหา HTML Element ที่มีไอดีเป็น app เช่น <div id="app">
แต่ถ้าเราไม่มี Element นี้บนหน้าเว็บเลย ฟังก์ชั่นนี้จะคืนค่า null
แทน และโค้ดนี้จะพังเพราะว่าไม่สามารถใช้ innerHTML
ได้HTMLElement | null
null
หรือไม่ แต่จะทำให้โค้ดดูยาวขึ้นโดยไม่จำเป็นapp
อยู่แน่นอน และจะทำการ "บังคับ" ให้ไม่มี Error โดยการใช้ Non-null operator หรือเครื่องหมาย !
เป็นการบอกกับ TypeScript ว่าเรามั่นใจว่าโค้ดไม่ Return null
แน่ๆapp
อยู่จริง แอปก็จะพังอยู่ดีนะ ฉะนั้นไม่ควรใช้ Non-null operator พรำ่เพรื่อ)