Props की Typing

Props वे values हैं जो एक parent component से एक child component को pass की जाती हैं। TypeScript interfaces या type aliases बिल्कुल बता सकते हैं कि एक component कौन से props expect करता है।

In this page:

Basic Props
Optional Props
Function Props
Children Props
Union Types वाले Props

Syntax

typescript

interface Props {
  prop: type;
  optional?: type;
}
function Component({ prop }: Props) {
  return <div>{prop}</div>;
}

Basic Props

Basic props को हर prop name और इसके type को list करने वाले एक interface के साथ typed किया जाता है, जिसे component फिर एक single typed parameter से destructure करता है, callers को immediate feedback देते हुए अगर वे गलत type या एक missing prop pass करें।

उदाहरण: Basic Props

typescript

import React from "react";

interface GreetingProps {
	name: string;
}

function Greeting({ name }: GreetingProps): React.JSX.Element {
	return <p>Hello, {name}</p>;
}

export default Greeting;

Optional Props

एक optional prop को इसके interface में एक ? के साथ मार्क किया जाता है, यानी callers इसे पूरी तरह omit कर सकते हैं, और component के अंदर उस prop के type में undefined शामिल होता है जब तक आप इसके लिए एक default value supply न करें।

उदाहरण: Optional Props

typescript

import React from "react";

interface ButtonProps {
	label: string;
	disabled?: boolean;
}

function Button({ label, disabled }: ButtonProps): React.JSX.Element {
	return <button disabled={disabled}>{label}</button>;
}

export default Button;

Function Props

एक function prop को एक specific call signature के साथ typed किया जाता है — जैसे onClick: () => void — इसलिए गलत parameter count या return type वाली कोई चीज़ pass करना call site पर flag हो जाता है, runtime पर नहीं जब function असल में fire होता है।

उदाहरण: Function Props

typescript

import React from "react";

interface ClickableProps {
	onClick: () => void;
}

function Clickable({ onClick }: ClickableProps): React.JSX.Element {
	return <button onClick={onClick}>Click</button>;
}

export default Clickable;

Children Props

Children props को React के ReactNode type के साथ typed किया जाता है (JSX, strings, numbers, और ज़्यादा को cover करते हुए), जो यह है कि एक component अपने opening और closing tags के बीच nested JSX को type-safe तरीके से accept कैसे कर पाता है।

उदाहरण: Children Props

typescript

import React, { ReactNode } from "react";

interface CardProps {
	children: ReactNode;
}

function Card({ children }: CardProps): React.JSX.Element {
	return <div className="card">{children}</div>;
}

export default Card;

Union Types वाले Props

एक union के रूप में typed prop — जैसे variant: primary | secondary — callers को किसी भी arbitrary string के बजाय एक fixed, known set of string values तक restrict करता है, primry जैसे typo को call site पर immediately पकड़ते हुए।

उदाहरण: Props with Union Types

typescript

import React from "react";

interface AlertProps {
	variant: "primary" | "secondary";
}

function Alert({ variant }: AlertProps): React.JSX.Element {
	return <div className={variant}>Alert</div>;
}

export default Alert;

Chapter Quiz — Complete all 8 topics to unlock

0/8 topics done

Complete these topics first:

← Previous Lesson Setting Up React TypeScript Project Next Lesson → Typing State

Props की Typing

Basic Props

Optional Props

Function Props

Children Props

Union Types वाले Props

Chapter Quiz — Complete all 8 topics to unlock

Login to run this code