TypeScript: ماهیت زبان، تایپ‌سازی دقیق و React Native

TypeScript چیست؟

TypeScript — یک زبان برنامه‌نویسی از Microsoft (2012)، توسعه‌یافته توسط Anders Hejlsberg (سازنده C# و Turbo Pascal). TypeScript JavaScript را با یک سیستم تایپ ایستا، رابط‌ها، جنریک‌ها، شمارش‌ها و دکوراتورها گسترش می‌دهد. کد TS با استفاده از کامپایلر tsc یا Babel به JavaScript خالص کامپایل می‌شود (transpilation) — خروجی JS استانداردی است که در هر محیطی کار می‌کند.

انگیزه ایجاد TypeScript — محدودیت‌های JavaScript در پروژه‌های بزرگ است. تایپ‌سازی پویای JS منجر به خطاهایی می‌شود که فقط در زمان اجرا کشف می‌شوند: undefined is not a function, Cannot read property of null. TypeScript بررسی تایپ‌ها را به مرحله کامپایل منتقل می‌کند و از این خطاها قبل از اجرای کد جلوگیری می‌کند. هرچه پروژه بزرگ‌تر باشد، مزایای TS قابل‌توجه‌تر است: در یک پایگاه کد با 100,000+ خط، TS از صدها باگ بالقوه جلوگیری می‌کند.

ویژگی کلیدی TypeScript — تایپ‌سازی دقیق با پرچم اختیاری strict: true در tsconfig.json است. در حالت سختگیرانه، تمام بررسی‌ها فعال می‌شوند: strictNullChecks (null/undefined با سایر تایپ‌ها ناسازگار هستند)، noImplicitAny (any ضمنی را ممنوع می‌کند)، strictFunctionTypes (کنتراوریانس پارامترهای تابع). به‌طور پیش‌فرض، strict: true برای تمام پروژه‌های جدید توصیه می‌شود.

TypeScript در مقابل JavaScript

TypeScript فقط در مرحله توسعه با JavaScript تفاوت دارد. پس از کامپایل، تایپ‌ها پاک می‌شوند — زمان اجرا JS معمولی را بدون کاهش عملکرد اجرا می‌کند. این یک مصالحه است: توسعه نیاز به یک مرحله کامپایل اضافی دارد، اما تکمیل خودکار در IDE، بازآفرینی با تغییر نام نمادها و مستندسازی تایپ‌ها را مستقیماً در کد فراهم می‌کند.

سیستم تایپ TypeScript

سیستم تایپ TypeScript — ساختاری (structural typing) است، نه اسمی: دو تایپ اگر ساختارشان منطبق باشد، بدون توجه به نام، سازگار هستند. این با 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 — union از literalهای رشته‌ای است که مقادیر را به سه گزینه محدود می‌کند. اگر 'windows' ارسال شود، TypeScript خطا می‌دهد. Tuple Coordinate دقیقاً دو عدد را تضمین می‌کند — این برای مختصات یا رنگ‌های RGB مفید است. Enum AppState به یک شیء با نگاشت معکوس کامپایل می‌شود. Unknown بررسی تایپ را قبل از استفاده الزامی می‌کند — برخلاف any، unknown به‌طور پیش‌فرض امن است.

رابط‌ها و type-aliases

رابط‌ها (interface) و type-aliases (type) در TypeScript شکل اشیاء را توصیف می‌کنند. رابط‌ها می‌توانند合并 شوند (declaration merging — اعلام مجدد فیلدها را اضافه می‌کند) و گسترش یابند (extends). Type-aliases می‌توانند union، intersection، tuple و تایپ‌های شرطی را توصیف کنند، اما از declaration merging پشتیبانی نمی‌کنند. قانون: برای اشیاء 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.

جنریک‌ها و تایپ‌های کاربردی

جنریک‌ها (Generics) — یکی از ویژگی‌های کلیدی 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> (حذف union), Extract<T, U> (استخراج union), 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> — union تفکیک‌شده برای اکشن‌های Redux با باریک‌سازی خودکار تایپ در switch.

TypeScript در React Native

TypeScript در React Native تایپ‌سازی دقیق props و state کامپوننت‌ها را فراهم می‌کند. React Native CLI یک قالب با پسوند .tsx و tsconfig.json ایجاد می‌کند. PropTypes (JS) با رابط‌های TypeScript جایگزین می‌شوند — بررسی در مرحله کامپایل انجام می‌شود، نه در زمان اجرا. styled-components و React Navigation تایپ‌های کاملی دارند.

تایپ‌سازی کامپوننت

React.FC<Props> — تایپ کامپوننت تابعی با props. فرزندان (children) به‌طور خودکار تایپ‌سازی می‌شوند. 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، پشتیبانی IDE در VS Code، ESLint با @typescript-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 JSX را از طریق Babel پردازش می‌کند). moduleResolution: 'node' — جستجوی ماژول‌ها مانند Node.js. esModuleInterop — سازگاری با ماژول‌های CommonJS. noEmit: true — فقط بررسی بدون تولید فایل‌های JS (Babel یا Metro JS را تولید می‌کنند).