TypeScript के साथ React Dashboard

React और TypeScript साथ मिलकर component props, state, events, और reusable UI models को type करते हैं। एक dashboard इन patterns का एक useful example है।

In this page:

Core Concept
Basic Setup
Typed Example
Project Usage
Best Practices

Syntax

typescript

interface ComponentProps {
  propName: type;
}

function ComponentName({ propName }: ComponentProps): React.JSX.Element {
  return <div>{propName}</div>;
}

Core Concept

एक typed React dashboard में typically कई data-driven widgets होते हैं (charts, tables, stat cards), हर एक का अपना typed props interface जो exactly describe करता है कि यह अपने parent से क्या data और callbacks expect करता है।

उदाहरण: Core Concept

typescript

import React from "react";

interface StatCardProps {
	label: string;
	value: number;
}
function StatCard({ label, value }: StatCardProps): React.JSX.Element {
	return <div>{label}: {value}</div>;
}
export default StatCard;

Basic Setup

एक basic setup create-vite@latest -- --template react-ts या similar से scaffold करता है, typed .tsx components और एक tsconfig.json देते हुए जो JSX के लिए already configured है।

उदाहरण: Basic Setup

typescript

// npm create vite@latest dashboard -- --template react-ts
console.log("Scaffolds typed .tsx components with tsconfig.json ready for JSX");

Typed Example

एक typed example: interface ChartWidgetProps { data: DataPoint[]; onPointClick?: (point: DataPoint) => void } ensure करता है कि widget जहां भी उपयोग हो वहां correctly-shaped data और, अगर दिया जाए, एक correctly-typed click handler pass हो।

उदाहरण: Typed Example

typescript

import React from "react";

interface DataPoint {
	x: number;
	y: number;
}
interface ChartWidgetProps {
	data: DataPoint[];
	onPointClick?: (point: DataPoint) => void;
}
function ChartWidget({ data, onPointClick }: ChartWidgetProps): React.JSX.Element {
	return <div>{data.length} points</div>;
}
export default ChartWidget;

Project Usage

एक असली project में, हर widget को feed करने वाले API responses को type करना (एक shared interface DashboardStats के ज़रिए) का मतलब है कि एक backend field rename तुरंत dashboard में एक compile error के रूप में दिखता है, silently undefined render होने के बजाय।

उदाहरण: Project Usage

typescript

interface DashboardStats {
	activeUsers: number;
	revenue: number;
}
const stats: DashboardStats = { activeUsers: 120, revenue: 4500 };
console.log(stats);

Best Practices

अपने custom hooks के return values को explicitly type करें (जैसे useDashboardData(): { stats: DashboardStats | null; loading: boolean }) इसलिए हर consuming component को उस data पर full autocomplete और null-safety मिले जिस पर यह depend करता है।

उदाहरण: Best Practices

typescript

interface DashboardStats {
	activeUsers: number;
}
function useDashboardData(): { stats: DashboardStats | null; loading: boolean } {
	return { stats: null, loading: true };
}
console.log(useDashboardData());

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson REST API with Express + TypeScript Next Lesson → CLI Tool with TypeScript

TypeScript के साथ React Dashboard

Core Concept

Basic Setup

Typed Example

Project Usage

Best Practices

Chapter Quiz — Complete all 14 topics to unlock

Login to run this code