Full Stack TypeScript App की जानकारी
In this page:
// shared/types.ts
export interface TypeName {
property: type;
}
// imported by both client and server
import { TypeName } from "../shared/types";
Core Concept
एक full-stack TypeScript app अपने frontend और backend के बीच type definitions share करती है, इसलिए एक बार defined request/response shape उस client पर भी identically enforce होती है जो इसे भेजता है और उस server पर भी जो इसे receive करता है।
उदाहरण: Core Concept
interface Order {
id: string;
total: number;
}
// Shared between an Express route and a React component.
const order: Order = { id: "1", total: 99.99 };
console.log(order);
Basic Setup
एक basic setup आम तौर पर एक monorepo है जिसमें packages/client, packages/server, और packages/shared (common interfaces रखते हुए), workspace references से साथ जोड़े हुए इसलिए सभी तीन एक project के रूप में type-check होती हैं।
उदाहरण: Basic Setup
// packages/client, packages/server, packages/shared
// wired together with workspace references
console.log("A monorepo with a shared package ties client and server together");
Typed Example
एक typed example: एक shared interface Order { id: string; items: OrderItem[]; total: number } को एक Express route द्वारा import किया जाता है जो इसे return करता है और एक React component द्वारा जो इसे render करता है, guarantee करते हुए कि दोनों sides इसकी shape पर agree करें।
उदाहरण: Typed Example
interface OrderItem { name: string; price: number; }
interface Order {
id: string;
items: OrderItem[];
total: number;
}
const order: Order = { id: "1", items: [{ name: "Book", price: 20 }], total: 20 };
console.log(order);
Project Usage
एक असली project में, यह shared-types pattern वह है जो एक backend field rename को frontend में एक immediate compile error के रूप में surface करता है, एक silent runtime bug के बजाय जो दिनों बाद एक user द्वारा discover हो।
उदाहरण: Project Usage
interface Order { id: string; total: number; }
// A backend field rename to Order breaks the frontend at compile time,
// not silently at runtime days later.
function renderOrder(order: Order) {
return `Order ${order.id}: $${order.total}`;
}
console.log(renderOrder({ id: "1", total: 50 }));
Best Practices
Shared package को framework-specific code से मुक्त रखें (इसमें कोई Express types leak न हों, कोई React imports न हों) इसलिए यह Node backend और browser frontend दोनों से irrelevant dependencies खींचे बिना usable रहे।
उदाहरण: Best Practices
// shared/order.ts -- no Express or React imports here
export interface Order {
id: string;
total: number;
}
console.log("Shared package stays framework-free, usable by both sides");
Orderजैसा एक interface client और server दोनों में duplicate करना, इसलिए दो copies अलग drift करती हैं।- यह मान लेना कि shared types runtime पर data validate करते हैं, जब एक गलत JSON response अब भी client तक पहुंचती है।
- Server-only code (जैसे database modules) को shared package में import करना, जो फिर browser build को तोड़ देता है।
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