PropTypes ในแอปพลิเคชันการตอบสนอง TypeScript

การใช้React.PropTypesแอปพลิเคชัน TypeScript React มีความหมายหรือไม่หรือเป็นเพียงกรณีของ "เข็มขัดและสายรัด"

เนื่องจากคลาสคอมโพเนนต์ถูกประกาศด้วยPropsพารามิเตอร์ type:

interface Props {
    // ...
}
export class MyComponent extends React.Component<Props, any> { ... }

มีประโยชน์ที่แท้จริงในการเพิ่ม

static propTypes {
    myProp: React.PropTypes.string
}

นิยามคลาส?

โดยปกติจะไม่มีคุณค่ามากนักในการดูแลทั้งอุปกรณ์ประกอบฉากของคุณเป็นประเภท TypeScript และReact.PropTypesในเวลาเดียวกัน

ต่อไปนี้เป็นบางกรณีที่เป็นประโยชน์:

• การเผยแพร่แพ็คเกจเช่นไลบรารีคอมโพเนนต์ที่จะใช้โดย JavaScript ธรรมดา
• การยอมรับและส่งผ่านอินพุตภายนอกเช่นผลลัพธ์จากการเรียก API
• การใช้ข้อมูลจากไลบรารีที่อาจมีการพิมพ์ไม่เพียงพอหรือถูกต้องถ้ามี

ดังนั้นโดยปกติจะเป็นคำถามว่าคุณสามารถเชื่อถือการตรวจสอบเวลาคอมไพล์ของคุณได้มากเพียงใด

TypeScript เวอร์ชันใหม่กว่าสามารถอนุมานประเภทตามReact.PropTypes( PropTypes.InferProps) ของคุณได้แล้ว แต่ประเภทผลลัพธ์อาจใช้งานยากหรืออ้างถึงที่อื่นในโค้ดของคุณ

typescript และ PropTypes ตอบสนองวัตถุประสงค์ที่แตกต่างกัน typescript ตรวจสอบชนิดที่รวบรวมเวลาขณะ PropTypes มีการตรวจสอบที่รันไทม์

typescript มีประโยชน์เมื่อคุณเขียนโค้ด: มันจะเตือนคุณหากคุณส่งอาร์กิวเมนต์ผิดประเภทไปยังส่วนประกอบ React ของคุณให้คุณเติมข้อความอัตโนมัติสำหรับการเรียกใช้ฟังก์ชัน ฯลฯ

PropTypes มีประโยชน์เมื่อคุณทดสอบว่าส่วนประกอบโต้ตอบกับข้อมูลภายนอกอย่างไรเช่นเมื่อคุณโหลด JSON จาก API PropTypes จะช่วยคุณแก้จุดบกพร่อง (เมื่ออยู่ในโหมดการพัฒนาของ React) สาเหตุที่คอมโพเนนต์ของคุณล้มเหลวโดยการพิมพ์ข้อความที่เป็นประโยชน์เช่น:

Warning: Failed prop type: Invalid prop `id` of type `number` supplied to `Table`, expected `string`

แม้ว่าจะดูเหมือนว่า typescript และ PropTypes ทำสิ่งเดียวกัน แต่ก็ไม่ได้ทับซ้อนกันเลย แต่เป็นไปได้ที่จะสร้าง PropTypes จาก typescript โดยอัตโนมัติเพื่อที่คุณจะได้ไม่ต้องระบุประเภทสองครั้งดูตัวอย่าง:

• https://github.com/milesj/babel-plugin-typescript-to-proptypes
• https://github.com/grncdr/ts-react-loader#what-it-does
• https://github.com/gcanti/prop-types-ts

ฉันเดาว่าในสถานการณ์ที่ยุ่งเหยิงซึ่งไม่สามารถอนุมานประเภทของอุปกรณ์ประกอบฉากได้ในเวลาคอมไพล์ดังนั้นการดูคำเตือนที่เกิดจากการใช้งานpropTypesในขณะทำงานจะเป็นประโยชน์

สถานการณ์ดังกล่าวจะเกิดขึ้นเมื่อประมวลผลข้อมูลจากแหล่งภายนอกที่ไม่มีข้อกำหนดประเภทเช่น API ภายนอกที่อยู่นอกเหนือการควบคุมของคุณ สำหรับ API ภายในฉันคิดว่ามันคุ้มค่ากับความพยายามที่จะเขียน (หรือดีกว่าสร้าง) คำจำกัดความประเภทหากยังไม่พร้อมใช้งาน

นอกเหนือจากนั้นฉันไม่เห็นประโยชน์ใด ๆ (ซึ่งฉันทำไมฉันไม่เคยใช้มันเป็นการส่วนตัว)