PropTypes से Props की Type-Checking
import PropTypes from "prop-types";
ComponentName.propTypes = {
propName: PropTypes.string.isRequired,
other: PropTypes.number,
};PropTypes Declare करना
prop-types package से PropTypes import करने के बाद, आप अपने component पर एक propTypes object attach करते हैं जो हर prop की expected type list करता है।
Development के दौरान, React incoming props को इसके against check करता है और अगर कुछ match न हो तो एक warning log करता है।
.isRequired से mark करें, जैसे PropTypes.string.isRequired।उदाहरण: Declaring PropTypes
// Run in your local React project (npm install required)
import PropTypes from 'prop-types';
function Greeting({ name, age }) {
return <p>{name} is {age} years old.</p>;
}
Greeting.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
};⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Common PropTypes Validators
prop-types library सभी common JavaScript types के लिए validators provide करती है -- string, number, bool, array, object, func -- साथ ही कुछ ज़्यादा advanced वाले जैसे allowed values के एक fixed set के लिए PropTypes.oneOf।
यह आपको precise होने देता है कि exactly किस shape का data एक component expect करता है।
PropTypes.oneOf([...]) use करें जो सिर्फ specific list of strings में से एक होने चाहिए, जैसे एक size prop।उदाहरण: Common PropTypes Validators
// Run in your local React project (npm install required)
import PropTypes from 'prop-types';
function StatusBadge({ status }) {
return <span className={`badge-${status}`}>{status}</span>;
}
StatusBadge.propTypes = {
status: PropTypes.oneOf(['active', 'inactive', 'pending']).isRequired,
};⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
PropTypes vs TypeScript
PropTypes browser में app running होने के दौरान prop types check करता है, जबकि TypeScript code लिखते समय types check करता है, इसके run होने से पहले ही।
TypeScript ज़्यादा mistakes को earlier catch करता है, यही कारण है कि कई modern React projects इसे PropTypes से ज़्यादा prefer करते हैं।
उदाहरण: PropTypes vs TypeScript
// Run in your local React project (npm install required)
// PropTypes (runtime check):
Greeting.propTypes = { name: PropTypes.string };
// TypeScript (compile-time check) equivalent:
type GreetingProps = { name: string };
function Greeting({ name }: GreetingProps) {
return <p>Hello, {name}</p>;
}- अलग
prop-typespackage install और import करना भूल जाना -- यह React में built-in नहीं है। - PropTypes use करना और यह उम्मीद करना कि वे app को चलने से रोकेंगी -- वे सिर्फ warnings log करती हैं, वे कुछ भी block नहीं करती।
- PropTypes (runtime checking) को TypeScript (compile-time checking) के साथ confuse करना -- वे एक similar problem को अलग तरीके से solve करते हैं।
- PropTypes आपको एक component को receive होने वाले हर prop की expected type declare करने देते हैं।
- वे अलग
prop-typesnpm package से आते हैं, React core से नहीं। - Mismatched prop types development में एक console warning produce करती हैं, error नहीं।
- कई modern projects stronger type safety के लिए PropTypes के बजाय TypeScript use करते हैं।
कोई browser-specific restrictions नहीं -- prop-types किसी भी React version में काम करता है लेकिन इसे एक अलग npm package के रूप में install किया जाना चाहिए।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: