TypeScript: भाषा का सार, सख्त टाइपिंग और React Native

TypeScript क्या है?

TypeScript Microsoft (2012) की एक प्रोग्रामिंग भाषा है जिसे Anders Hejlsberg (C# और Turbo Pascal के निर्माता) ने बनाया है। TypeScript JavaScript को एक स्थैतिक प्रकार प्रणाली, इंटरफ़ेस, जेनेरिक, एनम और डेकोरेटर के साथ विस्तारित करता है। TS कोड tsc कंपाइलर या Babel के माध्यम से शुद्ध JavaScript (ट्रांसपाइलेशन) में संकलित होता है — आउटपुट मानक JS है जो किसी भी वातावरण में चलता है।

TypeScript बनाने की प्रेरणा बड़ी परियोजनाओं में JavaScript की सीमाएँ हैं। JS की गतिशील टाइपिंग उन त्रुटियों की ओर ले जाती है जो केवल रनटाइम पर खोजी जाती हैं: undefined is not a function, Cannot read property of null। TypeScript प्रकार की जाँच को संकलन चरण पर स्थानांतरित करता है, कोड निष्पादन से पहले इन त्रुटियों को रोकता है। परियोजना जितनी बड़ी होगी, TS के लाभ उतने ही अधिक होंगे: 100,000+ पंक्तियों के कोडबेस में, TS सैकड़ों संभावित बग को रोकता है।

TypeScript की एक प्रमुख विशेषता tsconfig.json में वैकल्पिक strict: true ध्वज के साथ सख्त टाइपिंग है। सख्त मोड सभी जाँचों को सक्षम करता है: strictNullChecks (null/undefined अन्य प्रकारों के साथ असंगत हैं), noImplicitAny (अंतर्निहित any को प्रतिबंधित करता है), strictFunctionTypes (फ़ंक्शन मापदंडों की कॉन्ट्रावेरिएंस)। डिफ़ॉल्ट रूप से, सभी नई परियोजनाओं के लिए strict: true अनुशंसित है।

TypeScript बनाम JavaScript

TypeScript केवल विकास चरण पर JavaScript से भिन्न होता है। संकलन के बाद, प्रकार मिटा दिए जाते हैं — रनटाइम बिना प्रदर्शन हानि के सामान्य JS निष्पादित करता है। यह एक समझौता है: विकास के लिए एक अतिरिक्त संकलन चरण की आवश्यकता होती है, लेकिन यह IDE में ऑटोकम्प्लीशन, प्रतीकों के नाम बदलने के साथ रिफैक्टरिंग और कोड में सीधे प्रकार दस्तावेज़ीकरण प्रदान करता है।

TypeScript प्रकार प्रणाली

TypeScript की प्रकार प्रणाली संरचनात्मक है, नाममात्र नहीं: दो प्रकार संगत हैं यदि उनकी संरचना मेल खाती है, नाम की परवाह किए बिना। यह Java/C# से भिन्न है जहाँ संगतता क्लास या इंटरफ़ेस नाम से निर्धारित होती है। संरचनात्मक टाइपिंग मौजूदा JS कोड के साथ एकीकरण को सरल बनाती है — प्रत्येक प्रकार के लिए implements घोषित करने की आवश्यकता नहीं है।

बुनियादी और उन्नत प्रकार

TypeScript JS आदिम प्रकारों के साथ-साथ समर्थन करता है: any (जाँच अक्षम करता है), unknown (सुरक्षित any — उपयोग से पहले जाँच की आवश्यकता है), never (कभी वापस नहीं आता), void (कोई वापसी नहीं), tuple (निश्चित लंबाई का ऐरे), enum (गणना), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number)।

// TypeScript की बुनियादी प्रकार प्रणाली
// आदिम प्रकार
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Union और Literal प्रकार
type Platform = 'ios' | 'android' | 'web';
type Status = 'idle' | 'loading' | 'success' | 'error';

function getSDKVersion(platform: Platform): number {
  switch (platform) {
    case 'ios': return 17;
    case 'android': return 34;
    case 'web': return 2025;
  }
}

// Tuple — निश्चित लंबाई का टपल
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — स्वचालित वृद्धि के साथ गणना
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — any का सुरक्षित विकल्प
function parseJSON(json: string): unknown {
  return JSON.parse(json);
}

const data = parseJSON('{"name":"TS"}');
if (typeof data === 'object' && data !== null) {
  console.log((data as Record<string, unknown>).name);
}

Platform प्रकार स्ट्रिंग लिटरल का एक यूनियन है, जो मानों को तीन विकल्पों तक सीमित करता है। यदि आप 'windows' पास करते हैं, तो TypeScript एक त्रुटि फेंकेगा। Coordinate टपल बिल्कुल दो संख्याओं की गारंटी देता है — निर्देशांक या RGB रंगों के लिए उपयोगी। AppState एनम रिवर्स मैपिंग के साथ एक ऑब्जेक्ट में संकलित होता है। Unknown उपयोग से पहले प्रकार की जाँच के लिए बाध्य करता है — any के विपरीत, unknown डिफ़ॉल्ट रूप से सुरक्षित है।

इंटरफ़ेस और type-एलियास

इंटरफ़ेस और type-एलियास TypeScript में ऑब्जेक्ट आकृतियों का वर्णन करते हैं। इंटरफ़ेस घोषणा विलय (पुनः घोषणा फ़ील्ड जोड़ती है) और विस्तार (extends) का समर्थन करते हैं। Type-एलियास यूनियन, इंटरसेक्शन, टपल और सशर्त प्रकारों का वर्णन कर सकते हैं, लेकिन घोषणा विलय का समर्थन नहीं करते। नियम: API ऑब्जेक्ट के लिए interface का उपयोग करें, बाकी सबके लिए type का।

// React Native के लिए इंटरफ़ेस और प्रकार
// वैकल्पिक फ़ील्ड के साथ इंटरफ़ेस
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // वैकल्पिक फ़ील्ड
  readonly createdAt: Date; // केवल पढ़ने योग्य
}

// इंटरफ़ेस विस्तार (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// API डेटा के लिए प्रकार
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial सभी फ़ील्ड को वैकल्पिक बनाता है
type PartialUser = Partial<User>;

// Pick — निर्दिष्ट फ़ील्ड चुनता है
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — टाइप की गई कुंजियों के साथ शब्दकोश
type UserMap = Record<string, User>;

User इंटरफ़ेस ? (वैकल्पिक फ़ील्ड) और readonly (केवल पढ़ने योग्य) के साथ। ApiResponse<T> API प्रतिक्रियाओं के लिए एक जेनेरिक इंटरफ़ेस है। Partial<User> एक उपयोगिता प्रकार है जो सभी फ़ील्ड को वैकल्पिक बनाता है (संपादन फ़ॉर्म के लिए उपयोगी)। Pick<User, 'id' | 'name'> केवल निर्दिष्ट फ़ील्ड का चयन करता है — पूर्वावलोकन घटकों के लिए सुविधाजनक। Record<string, User> ID द्वारा उपयोगकर्ता शब्दकोश है।

जेनेरिक और उपयोगिता प्रकार

जेनेरिक TypeScript की एक प्रमुख विशेषता है, जो प्रकार सुरक्षा खोए बिना किसी भी प्रकार के साथ काम करने वाले घटक बनाने की अनुमति देता है। एक जेनेरिक फ़ंक्शन कोण कोष्ठक में एक प्रकार पैरामीटर के साथ परिभाषित किया जाता है: function identity<T>(arg: T): T। प्रकार T तर्क से स्वचालित रूप से अनुमानित होता है या स्पष्ट रूप से निर्दिष्ट किया जाता है: identity<string>('hello')।

उपयोगिता प्रकार प्रकार परिवर्तनों के लिए अंतर्निहित जेनेरिक हैं: Partial<T> (सभी फ़ील्ड वैकल्पिक), Required<T> (सभी फ़ील्ड अनिवार्य), Readonly<T> (सभी फ़ील्ड केवल पढ़ने योग्य), Pick<T, K> (फ़ील्ड चुनें), Omit<T, K> (फ़ील्ड निकालें), Record<K, T> (शब्दकोश), Exclude<T, U> (यूनियन से निकालें), Extract<T, U> (यूनियन से निकालें), NonNullable<T> (null/undefined निकालें)।

// TypeScript में जेनेरिक
// API के साथ काम करने के लिए जेनेरिक फ़ंक्शन
async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return response.json() as Promise<T>;
}

// एक विशिष्ट प्रकार के साथ उपयोग
interface Product {
  id: number;
  title: string;
  price: number;
}

const products = await fetchData<Product[]>('/api/products');

// स्थिति प्रबंधन के लिए जेनेरिक क्लास
class StateManager<S> {
  private state: S;

  constructor(initial: S) {
    this.state = initial;
  }

  getState(): S {
    return this.state;
  }

  updateState(partial: Partial<S>): void {
    this.state = { ...this.state, ...partial };
  }
}

// Redux Reducer के साथ टाइप किया गया काम
type Action<T, P> = {
  type: T;
  payload: P;
};

type UserAction =
  | Action<'SET_USER', User>
  | Action<'CLEAR_USER', undefined>
  | Action<'UPDATE_USER', Partial<User>>;

fetchData<T> फ़ंक्शन fetch के चारों ओर एक टाइप किया गया आवरण है। पैरामीटर T प्रतिक्रिया आकार निर्धारित करता है: fetchData<Product[]> कॉल करते समय, TypeScript जानता है कि लौटाई गई सरणी में Product ऑब्जेक्ट हैं। StateManager<S> क्लास किसी भी प्रकार की स्थिति का प्रबंधन करता है — आंशिक अद्यतन के लिए Partial<S>। Action<T, P> स्विच में स्वचालित प्रकार संकुचन के साथ Redux एक्शन के लिए एक विभेदित यूनियन है।

React Native में TypeScript

React Native में TypeScript घटक props और स्थिति के लिए सख्त टाइपिंग प्रदान करता है। React Native CLI .tsx एक्सटेंशन और tsconfig.json के साथ एक टेम्पलेट बनाता है। PropTypes (JS) को TypeScript इंटरफ़ेस से बदल दिया जाता है — जाँच रनटाइम पर नहीं, बल्कि संकलन चरण पर की जाती है। styled-components और React Navigation के पास पूर्ण प्रकार समर्थन है।

घटक टाइपिंग

React.FC<Props> props के साथ एक कार्यात्मक घटक का प्रकार है। चिल्ड्रन स्वचालित रूप से टाइप किए जाते हैं। useRef<T> — मूल घटक का संदर्भ। useState<S> — प्रकार अनुमान के साथ स्थिति। useNavigation<T> — टाइप किया गया नेविगेशन। useCallback, useMemo — स्वचालित प्रकार अनुमान के साथ। सभी React हुक पूरी तरह से टाइप किए गए हैं।

// टाइप किया गया React Native घटक
import React, { useState, useCallback } from 'react';
import {
  View, Text, FlatList, TouchableOpacity,
  StyleSheet
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

// नेविगेशन और डेटा के लिए प्रकार
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

type NavigationProp =
  NativeStackNavigationProp<RootStackParamList, 'Home'>;

// props के लिए इंटरफ़ेस
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// टाइप किया गया कार्यात्मक घटक
const ProductList: React.FC<ProductListProps> = ({
  products,
  onSelect
}) => {
  const navigation = useNavigation<NavigationProp>();
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const handlePress = useCallback((id: number) => {
    setSelectedId(id);
    onSelect(id);
    navigation.navigate('Profile', { userId: String(id) });
  }, [onSelect, navigation]);

  const renderItem = useCallback(({ item }: { item: Product }) => (
    <TouchableOpacity onPress={() => handlePress(item.id)}>
      <Text>{item.title}</Text>
      <Text>${item.price.toFixed(2)}</Text>
    </TouchableOpacity>
  ), [handlePress]);

  return (
    <FlatList
      data={products}
      renderItem={renderItem}
      keyExtractor={(item) => String(item.id)}
    />
  );
};

RootStackParamList प्रकार उनके मापदंडों के साथ मार्गों का एक शब्दकोश है। NavigationProp टाइप किया गया नेविगेशन प्रदान करता है: navigation.navigate('Profile', { userId }) सत्यापित करता है कि Profile userId स्वीकार करता है। टाइप किए गए मापदंडों के साथ useCallback अनावश्यक री-रेंडर को रोकता है। FlatList जेनेरिक के माध्यम से टाइप किया जाता है: — data और renderItem स्वचालित रूप से प्रकार प्राप्त करते हैं।

TypeScript डेवलपर उपकरण

TypeScript उपकरणों में tsc कंपाइलर, tsconfig.json, VS Code में IDE समर्थन, @typescript-eslint के साथ ESLint, Prettier और DefinitelyTyped (@types/*) शामिल हैं। tsc कंपाइलर है जो .ts को .js में परिवर्तित करता है। tsconfig.json कॉन्फ़िगर करता है: target (ES2020), module (ESNext), strict: true, outDir (आउटपुट फ़ोल्डर)। sourceMap — कोड मैप के माध्यम से ब्राउज़र में TS डिबगिंग।

DefinitelyTyped अंतर्निहित प्रकारों के बिना पुस्तकालयों के लिए प्रकार परिभाषाओं का एक भंडार है। स्थापना: npm install @types/react @types/react-native --save-dev। .d.ts फ़ाइलें प्रकार घोषणाएँ हैं। आधुनिक पुस्तकालय (React, React Native, Angular) अंतर्निहित प्रकार शामिल करते हैं और @types/ की आवश्यकता नहीं होती। पुरानी JS लाइब्रेरी के लिए, DefinitelyTyped प्रकारों का एकमात्र स्रोत है।

// tsconfig.json — न्यूनतम कॉन्फ़िगरेशन
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // केवल जाँच, JS उत्पादन नहीं
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

strict: true विकल्प सभी प्रकार की जाँचों को सक्षम करता है — सभी परियोजनाओं के लिए अनुशंसित। jsx: 'react-native' बिना परिवर्तन के JSX को संरक्षित करता है (React Native Babel के माध्यम से JSX को संभालता है)। moduleResolution: 'node' — Node.js की तरह मॉड्यूल रिज़ॉल्यूशन। esModuleInterop — CommonJS मॉड्यूल के साथ संगतता। noEmit: true — JS फ़ाइलें उत्पन्न किए बिना केवल जाँच (Babel या Metro JS उत्पन्न करता है)।