← Back to TypeScript Course | Chapter 28: Real World Projects | Lesson 6 of 14

Full Stack TypeScript App की जानकारी

एक full-stack TypeScript application एक frontend और backend के बीच models share कर सकती है। यह दो sides के बीच duplicated contracts कम करता है।
Syntax
typescript
// 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

typescript
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

typescript
// 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

typescript
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

typescript
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

typescript
// 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");
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. Order जैसा एक interface client और server दोनों में duplicate करना, इसलिए दो copies अलग drift करती हैं।
  2. यह मान लेना कि shared types runtime पर data validate करते हैं, जब एक गलत JSON response अब भी client तक पहुंचती है।
  3. Server-only code (जैसे database modules) को shared package में import करना, जो फिर browser build को तोड़ देता है।

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.