شناخت انواع پیشرفته در TypeScript، راهنمای جامع برای توسعه‌دهندگان حرفه‌ای

TypeScript به‌عنوان یک زبان مبتنی بر JavaScript که از نوع‌بندی استاتیک پشتیبانی می‌کند، به توسعه‌دهندگان این فضا را می‌دهد تا بتوانند کدهای بهتری را بنویسند. بسیاری از برنامه‌نویسان تازه‌کار برای ساده‌سازی از نوع any استفاده می‌کنند، اما این کار می‌تواند امنیت کد را تا حد بسیار زیادی کاهش داده و احتمال بروز خطا در زمان اجرا را افزایش دهد. در این مقاله از لیارا، انواع پیشرفته TypeScript شامل Record , Partial , Required , Pick , Omit و اینترفیس‌ها را معرفی خواهیم کرد.

با هوش مصنوعی لیارا، دسترسی سریع و پایدار به API هوش مصنوعی داشته باشید.
✅ ارائه API هوش مصنوعی✅ ادغام آسان با سرویس‌ها و اپلیکیشن‌ها✅ مقیاس‌پذیری و امنیت بالا 
خرید و راه‌اندازی سرویس هوش مصنوعی

آنچه در ادامه خواهید خواند:

• اهمیت استفاده از انواع پیشرفته TypeScript
• نوع Record: ایجاد Map نوع‌بندی شده
• Partial و Required
• Pick و Omit: انتخاب و حذف مشخصه‌ها
• نوع و اینترفیس
• تعریف انواع سفارشی و ترکیبی
• کاربردهای عملی در پروژه‌های React
• بهترین شیوه‌ها و نکات حرفه‌ای
• جمع‌بندی

اهمیت استفاده از انواع پیشرفته TypeScript

استفاده از انواع پیشرفته باعث می‌شود توسعه‌دهندگان:

• داده‌ها را با دقت بیشتری نوع‌بندی کند.
• خطاهای زمان اجرا را کاهش پیدا کند.
• مدیریت props و state در React ساده‌تر شود.
• امنیت و قابلیت نگهداری کد افزایش پیدا کند.

این قابلیت تنها برای اپلیکیشن‌های کوچک کاربردی نخواهد بود و می‌توان از آن در پروژه‌های بزرگ با دیتاهای پیچیده و تعامل با API استفاده کرد.

چگونه در TypeScript نوع‌های سفارشی بسازیم؟
نوع‌های سفارشی در TypeScript

نوع Record: ایجاد Map نوع‌بندی شده

نوع Record امکان ایجاد یک Map یا دیکشنری نوع‌بندی شده را فراهم می‌کند. این نوع برای نگهداری داده‌ها به شکل جفت کلید/مقدار کاربرد دارد و می‌توان آن را برای ثابت‌ها، پیام‌های خطا، داده‌های کاربران و حتی استایل‌ها استفاده کرد.

مثال پایه

const SERVICES: Record<string, string> = {

  doorToDoor: "Delivery at door",

  airDelivery: "Air shipment",

  specialDelivery: "Special delivery",

  inStore: "In-store pickup",

};

کاربرد در React

type Styles = Record<string, React.CSSProperties>;

const styles: Styles = {

  container: { display: "flex", flexDirection: "column" },

  button: { backgroundColor: "blue", color: "white" },

};

مزایای Record:

• خطایابی سریع در ادیتور
  
• تعریف داده‌های تودرتو و Mapهای ایمن
  
• کاهش نیاز به تعریف دستی اینترفیس‌های پیچیده
  

مثال با Enum

enum ErrorMessages {

  NotFound = "Resource not found",

  Unauthorized = "Access denied",

  ServerError = "Internal server error",

}

const errors: Record<ErrorMessages, string> = {

  [ErrorMessages.NotFound]: ,

  [ErrorMessages.Unauthorized]: ,

  [ErrorMessages.ServerError]: ,

};

Partial و Required

در ادامه با Partial و Required آشنا خواهیم شد.

Partial

نوع Partial تمامی مشخصه‌های یک شیء را اختیاری می‌کند. این ویژگی در پروژه‌هایی مفید است که داده‌ها ممکن است ناقص باشند یا برخی props کامپوننت‌ها هنوز بارگذاری نشده باشند.

interface User {

  id: number;

  name: string;

  email: string;

}

const partialUser: Partial<User> = { name: "Narges" };

راهنمای ساخت دستیار هوش مصنوعی چندرسانه‌ای با جاوااسکریپت
ساخت دستیار هوش مصنوعی چندرسانه‌ای با جاوااسکریپت

کاربرد عملی در React

interface ProfileProps {

  user: Partial<User>;

}

const Profile: React.FC<ProfileProps> = ({ user }) => (

  <div>

    <p>: {user.name ??}</p>

    <p>: {user.email ??}</p>

  </div>

);

Required

نوع Required تمامی مشخصه‌ها را الزامی می‌کند و تضمین می‌کند هیچ مقدار undefined وجود نداشته باشد:

const completeUser: Required<User> = {

  id: 1,

  name: "Narges",

  email: "[email protected]",

};

مزیت ترکیب Partial و Required: کنترل دقیق داده‌ها و جلوگیری از خطاهای زمان اجرا در پروژه‌های بزرگ.

Pick و Omit، انتخاب و حذف مشخصه‌ها

برای آنکه بتوان مشخصه‌ها را انتخاب و حذف کرد بایستی از Pick و Omit استفاده کرد که در ادامه آن را بررسی خواهیم کرد.

Pick

نوع Pick امکان استخراج مشخصه‌های مورد نیاز از یک اینترفیس را فراهم می‌کند:

interface Product {

  id: number;

  name: string;

  description: string;

  price: number;

}

type ProductSummary = Pick<Product, "id" | "name">;

Omit

نوع Omit مشخصه‌های غیرضروری را حذف می‌کند:

type ProductWithoutDescription = Omit<Product, "description">;

کاربرد عملی در پروژه‌های بزرگ

در پروژه‌های React، Omit و Pick برای مدیریت فرم‌های پیچیده یا پاسخ APIهای بزرگ بسیار مفید هستند. این ابزارها به شما کمک می‌کنند props اضافی را به کامپوننت‌های فرزند منتقل نکنید و ساختار داده‌ها را ایمن مدیریت کنید.

12 پروژه متن‌ باز فول‌ استک جاوا اسکریپت که نباید از دست بدهید!
پروژه متن‌ باز فول‌ استک جاوا اسکریپت

نوع و اینترفیس

اینترفیس به شما امکان می‌دهد چندین اینترفیس را ترکیب کرده و یک نوع جدید بسازید که شامل همه مشخصه‌های قبلی باشد:

interface Timestamps {

  createdAt: Date;

  updatedAt: Date;

}

interface UserProfile extends User, Timestamps {}

مزایای بسط اینترفیس:

• کاهش تکرار کد
• ایجاد مدل داده منسجم و قابل نگهداری
• افزودن مشخصه‌های جدید بدون ایجاد خطا

تعریف انواع سفارشی و ترکیبی

TypeScript امکان تعریف انواع سفارشی و ترکیبی را فراهم می‌کند. این نوع‌ها برای مدیریت پاسخ API، داده‌های تو در تو و مدل‌های پیچیده کاربردی هستند.

type APIResponse<T> = {

  status: "success" | "error";

  data?: T;

  error?: string;

};

const response: APIResponse<User> = {

  status: "success",

  data: { id: 1, name: "Narges", email: "[email protected]" },

};

کاربردهای عملی در پروژه‌های React

1. Record برای استایل‌ها و کلاس‌ها: جلوگیری از خطاهای زمان کامپایل و مدیریت CSS-in-JS
2. Partial برای props اختیاری: رندر امن کامپوننت‌ها قبل از بارگذاری داده
3. Required برای props ضروری: تضمین تعریف مشخصه‌های کلیدی
4. Pick و Omit برای مدیریت داده‌های پیچیده: کاهش وابستگی‌ها و تفکیک مشخصه‌ها
5. بسط اینترفیس‌ها: ایجاد مدل داده منسجم و قابل نگهداری

نحوه استفاده از TypeSpec برای مستند سازی و مدل‌ سازی API‌ ها
TypeSpec برای مستند سازی و مدل‌ سازی API‌ ها

مثال عملی با فرم‌ها و API

interface FormValues {

  name: string;

  email: string;

  password: string;

  confirmPassword: string;

}

type RegistrationForm = Omit<FormValues, "confirmPassword">;

const registerUser = (values: RegistrationForm) => {

  console.log("API", values);

};

بهترین شیوه‌ها و نکات حرفه‌ای

• استفاده از انواع داخلی قبل از تعریف انواع سفارشی
• ترکیب انواع پیشرفته برای ساختاردهی دقیق داده‌ها
• اجتناب از استفاده مکرر از any
• استفاده از Record برای Mapهای کلید/مقدار و Partial برای داده‌های اختیاری
• تست و بررسی انواع در زمان توسعه برای اطمینان از صحت داده‌ها
• مستندسازی انواع سفارشی برای تیم‌های بزرگ

جمع‌بندی

یادگیری انواع پیشرفته TypeScript باعث می‌شود کدهایی ایمن، قابل نگهداری و مقاوم در برابر خطا تولید کنید. انواع Record، Partial، Required، Pick، Omit و بسط اینترفیس‌ها ابزارهای قدرتمندی برای مدیریت داده‌ها، props کامپوننت‌ها و پاسخ API هستند. استفاده درست از این ابزارها، توسعه‌دهندگان را قادر می‌سازد پروژه‌های بزرگ React یا TypeScript را با اطمینان مدیریت کنند، خطاهای زمان اجرا را کاهش دهند و ساختاری قابل توسعه و مقیاس‌پذیر ایجاد نمایند.