ยินดีต้อนรับสู่ การเรียนรู้ TypeScript ใน ซีรีส์5 นาที ชุดนี้จะแนะนำความรู้หลักและเทคนิคของ TypeScript มาเรียนรู้กัน!

วันนี้เราจะลงลึกใน 5 เคล็ดลับง่ายๆ ที่จะทำให้คุณเป็นผู้เชี่ยวชาญในGenerics และคุณจะมั่นใจในการใช้สิ่งเหล่านี้ในโค้ดของคุณ

Generics ช่วยคุณได้อย่างมากในการทำให้โค้ดของคุณแห้ง (อย่าพูดซ้ำ)

Generics สามารถใส่ได้ทุกวิถีทางเพื่อทำให้โค้ดของคุณเป็นนามธรรม

1). ส่งผ่านประเภทไปยังประเภท

ในตัวอย่างข้างต้น คุณจะเห็นว่า คุณสมบัติมีข้อ ผิดdataพลาด เป็นเพราะdataได้รับมอบหมายโดยปริยายany

ในโลกของ TypeScript anyถือเป็นความผิดพลาดครั้งใหญ่ เราจะแก้ไขได้อย่างไร .

วิธีหนึ่งที่จะได้รับคือกำหนดประเภทให้กับdataคุณสมบัติ แต่ถ้าคุณต้องการนำสิ่งนี้MyGenericTypeกลับมาใช้ใหม่อีกครั้ง คุณอาจต้องสร้างประเภทใหม่อีกครั้ง ซึ่งขัดกับหลักการDRY

Generics มาเพื่อช่วยเหลือ

ในกรณีนี้ ตอนนี้คุณสามารถผ่านประเภทใดก็ได้และเราสามารถนำกลับมาใช้ใหม่ได้อย่างมีประสิทธิภาพ

2). ส่งผ่านประเภทไปยังฟังก์ชันของคุณเอง

เราสามารถสร้างฟังก์ชั่นการทำงานด้วยประเภททั่วไป พิจารณาฟังก์ชันที่มีการเรียกใช้ API ซึ่งresponseเป็นประเภทใดในปัจจุบัน และเราต้องแปลงฟังก์ชันที่เรียกใช้ API เป็นฟังก์ชันทั่วไป

ขณะนี้เราเห็นmakeFetchฟังก์ชันที่รับurlเป็นพารามิเตอร์ เราจะเห็นresว่าเป็นประเภทใดก็ได้ แต่เราสามารถแปลงฟังก์ชันนี้ให้ยอมรับเป็นประเภททั่วไปซึ่งเราสามารถส่งผ่านได้ในขณะที่เรียกใช้ฟังก์ชัน

เราจะเห็นว่าตอนนี้makeFetchเป็นฟังก์ชันทั่วไปที่มีตัวช่วยประเภทแนบมาด้วย

3). ส่งผ่านประเภทไปยังset

นักพัฒนาหลายคนไม่ทราบว่าเราสามารถส่งประเภททั่วไปไปยังคลาส TypeScript ในตัวจำนวนมาก

เราสามารถเห็น Set Class ที่เริ่มต้นด้วยunknownประเภทโดยค่าเริ่มต้น ตอนนี้ยังสามารถเปลี่ยนแปลงสิ่งนี้ได้ด้วยการส่งผ่านประเภททั่วไป หากคุณต้องการบังคับใช้เฉพาะตัวเลข ควรเพิ่มในไฟล์Set.

ดังที่เราเห็นข้อผิดพลาดในการเพิ่มstringในSet.

4). ประเภท การอนุมาน

สมมติว่าเราไม่ส่งประเภท แต่ TypeScript สามารถอนุมานประเภทได้ด้วยตัวของมันเอง และนี่คือคุณลักษณะที่ยอดเยี่ยม

เราสามารถเห็นฟังก์ชันที่กำหนดidให้กับอ็อบเจกต์ที่ส่งผ่านไปยังฟังก์ชัน และเราสามารถเห็นประเภทการส่งคืนที่กำหนดให้กับฟังก์ชัน แต่เพื่อให้ง่าย เราสามารถลบT & { id: string }ประเภทการส่งคืนออกจากaddToObjectโดยที่ TypeScript จะอนุมานประเภทการส่งคืน

เราไม่ผ่านประเภทในขณะที่เรียกใช้addIdToObjectฟังก์ชันและเราไม่ได้กำหนดประเภทการส่งคืน แต่เรายังคงเห็น TypeScript สรุปประเภทได้

5). ข้อจำกัดในยาสามัญ

พิจารณาตัวอย่างต่อไปนี้:

เราจะเห็นว่าปัจจุบันฟังก์ชันการผสานสามารถยอมรับประเภทที่ไม่ใช่วัตถุและ TypeScript ได้

หากต้องการลบสิ่งนี้ เราจำเป็นต้องเพิ่มข้อจำกัดซึ่งจะเป็นข้อจำกัดเพิ่มเติมในการยอมรับประเภท

Type Constraint ยังหมายถึงรหัสที่น้อยกว่าภายในฟังก์ชันของคุณสำหรับตรรกะการตรวจสอบประเภท

บทสรุป

โดยสรุป ยาชื่อสามัญเป็นหนทางในการขจัดตรรกะประเภทที่ซับซ้อนออกไป และทำให้ง่ายต่อการเขียนโค้ดที่มีประสิทธิภาพ บำรุงรักษา และพิมพ์ดี เครื่องมือเหล่านี้เป็นเครื่องมือที่ต้องมีในชุดเครื่องมือของนักพัฒนา TypeScript และจำเป็นต่อการใช้ประโยชน์สูงสุดจากระบบการพิมพ์ใน TypeScript

เรียนรู้ TypeScript ใน 5 นาทีเป็นซีรีส์ที่น่าทึ่งที่สามารถแนะนำคุณได้มากมาย

ขอบคุณพวกคุณที่อ่าน ฉันหวังว่าคุณจะสนุกกับมันและได้เรียนรู้สิ่งใหม่ๆ ที่เกี่ยวข้องกับ TypeScript

คอยติดตามบทความเพิ่มเติมเช่นนี้และติดตามฉันบนสื่อกลาง , LinkedinและTwitterเพื่อติดตามบทความที่น่าสนใจเกี่ยวกับ TypeScript