TypeScript का Design System
In this page:
export interface ComponentProps {
variant: "optionA" | "optionB";
onClick: () => void;
}Core Concept
एक typed design system reusable UI component props को TypeScript interfaces के रूप में define करता है, इसलिए एक Button या Card component का हर consumer यह compile-time enforcement पाता है कि exactly कौन से props valid और required हैं।
उदाहरण: Core Concept
interface ButtonProps {
variant: "primary" | "secondary";
onClick: () => void;
}
const props: ButtonProps = { variant: "primary", onClick: () => console.log("clicked") };
console.log(props);Basic Setup
एक basic setup हर component को इसके typed props interface के साथ export करता है (export interface ButtonProps { variant: primary | secondary; onClick: () => void }), एक अपने versioned package के रूप में published।
उदाहरण: Basic Setup
export interface ButtonProps {
variant: "primary" | "secondary";
onClick: () => void;
}
console.log("Component and its typed props interface exported together");Typed Example
एक typed example: variant: primary | secondary | danger जैसा एक string-literal union उपयोग करने का मतलब है कि variant="primry" (एक typo) pass करना एक compile error है, production में एक silently-unstyled button नहीं।
उदाहरण: Typed Example
type Variant = "primary" | "secondary" | "danger";
function applyVariant(variant: Variant) {
return `btn-${variant}`;
}
console.log(applyVariant("danger"));
// applyVariant("primry") would be a compile error, not a silent style bugProject Usage
एक असली project में, एक design system के typed props वह हैं जो दर्जनों feature teams को shared components confidently consume करने देते हैं, क्योंकि compiler — एक style guide document नहीं — correct usage enforce करता है।
उदाहरण: Project Usage
interface CardProps {
title: string;
footer?: string;
}
function renderCard(props: CardProps) {
return `${props.title}${props.footer ? " - " + props.footer : ""}`;
}
console.log(renderCard({ title: "Stats" }));Best Practices
अपने design system की typed API को deliberately version करें और breaking prop changes को एक changelog में document करें, क्योंकि एक prop type change हर consumer के लिए एक breaking change है भले ही runtime behavior similar दिखे।
उदाहरण: Best Practices
// CHANGELOG.md: "v2.0.0: ButtonProps.variant no longer accepts 'default'"
interface ButtonProps {
variant: "primary" | "secondary";
}
console.log("Breaking prop changes documented in a changelog");variantकोstringके रूप में type करना एक literal union के बजाय, इसलिए"primry"accepted हो जाता है।- Props interface export न करना, इसलिए consumers इसे reuse या extend नहीं कर सकते।
- बहुत ज़्यादा props को optional बनाना, इसलिए components ऐसे तरीकों से उपयोग हो सकते हैं जो कभी designed नहीं थे।
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first:
- Todo App with TypeScript
- REST API with Express + TypeScript
- React Dashboard with TypeScript
- CLI Tool with TypeScript
- Library with TypeScript
- Full Stack TypeScript App
- TypeScript Design System
- TypeScript Monorepo Project
- Authentication System
- Real-time App with Socket.io
- GraphQL API with TypeScript
- Microservices with TypeScript
- TypeScript Best Practices Review
- What to Learn Next