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 enum الٹ میپنگ کے ساتھ ایک آبجیکٹ میں کمپائل ہوتا ہے۔ Unknown استعمال سے پہلے ٹائپ چیکنگ پر مجبور کرتا ہے — any کے برعکس، unknown بطور ڈیفالٹ محفوظ ہے۔

انٹرفیس اور ٹائپ عرفی نام

انٹرفیس اور ٹائپ عرفی نام TypeScript میں آبجیکٹ کی شکلیں بیان کرتے ہیں۔ انٹرفیس اعلامیہ انضمام (دوبارہ اعلان فیلڈز شامل کرتا ہے) اور توسیع (extends) کی حمایت کرتے ہیں۔ ٹائپ عرفی نام اتحاد، تقاطع، ٹپل اور مشروط ٹائپس بیان کر سکتے ہیں، لیکن اعلامیہ انضمام کی حمایت نہیں کرتے۔ قاعدہ: 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 اور state کے لیے سخت ٹائپنگ فراہم کرتا ہے۔ 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 hooks مکمل طور پر ٹائپ شدہ ہیں۔

// ٹائپ شدہ 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 پیدا کرتا ہے)۔