07
مهبستن
پروژه خود را از امروز شروع کنید91307930-021
تایپ بازگشتی در تایپ اسکریپت
- نویسنده : آیسان بهرمند
- ارسال شده در: 2 جولای 2025
- ارسال دیدگاه: 0
فهرست مطالب
تایپ بازگشتی در تایپ اسکریپت یکی از آن قابلیتهای جذاب و عمیق زبان است که به برنامهنویسان کمک میکند تا ساختارهای تایپی پیچیده و داینامیک را بهسادگی مدل کنند. این ویژگی امکان میدهد تا تایپها بتوانند به شکل بازگشتی خودشون را تعریف کنند، مثلاً برای مدلسازی دادههایی مثل درختها، نورسهای تودرتو یا انواع بازگشتی در کد. فهم دقیق این مفهوم شاید در ابتدا کمی گیجکننده باشد، اما وقتی واردش میشویم، تبدیل به یک ابزار عالی برای کشف قدرت تایپ اسکریپت در مدیریت نوعها و ارتقا کیفیت کد و جلوگیری از خطاهای رایج میشود. در این مقاله سعی شده با زبانی راحت و کمی خودمونی، با مثالهای ملموس و گام به گام، دنیای تایپ بازگشتی و تواناییهای خارقالعاده آن را باز کنیم و به شما کمک کنیم تا نه فقط استفادهکننده، بلکه استاد این قابلیت خاص باشید.
تایپ بازگشتی چیه؟
توی typescript ، یه تایپ بازگشتی یه تایپه که تو تعریف خودش، به خودش ارجاع میده. مثلاً فرض کن میخوای یه ساختار دادهای مثل درخت دودویی یا لیست پیوندی رو مدل کنی. این ساختارها معمولاً به صورت بازگشتی تعریف میشن، چون هر گره میتونه به گرههای دیگه از همون جنس اشاره کنه.
یه گشتوگذار کوتاه تو دنیای تایپهای بازگشتی تو تایپاسکریپت
مثلاً یه خط کد رو ببین:
const firstName: string = ‘Maynard’;
اینجا firstName و ‘Maynard’ توی دنیای مقدارها هستن، ولی string مال دنیای تایپهاست.
یا مثلاً عملگر typeof رو داریم که تو هر دو دنیا کار میکنه. تو دنیای مقدارها اینجوریه:
console.log(typeof 42); // number
ولی تو دنیای تایپها، برای استخراج تایپ یه تابع مثل increment استفاده میشه و بعد با یه ابزار به اسم ReturnType کار میکنه:
function increment(n: number) {
return n + 1;
}
type T = ReturnType<typeof increment>; // number
یکی از چیزای باحال دنیای تایپها، تایپهای بازگشتی هستن. اینا تایپهاییان که به خودشون اشاره میکنن، یه چیزی تو مایههای تابعهای بازگشتی که شاید باهاشون آشنا باشی.
مثلاً یه تابع بازگشتی این شکلیه:
function addUpTo(n: number): number {
if (n === 0) {
return n;
}
return n + addUpTo(n – 1);
}
حالا یه تایپ بازگشتی اینجوریه:
type JSONValue =
| string
| number
| boolean
| null
| { [key: string]: JSONValue };
تابع addUpTo خودشو صدا میزنه، هر بار با یه مقدار کمتر برای n تا برسه به حالت پایه (فرض میکنیم n عدد غیرمنفی باشه، وگرنه خطای “Maximum call stack size exceeded” میده).
تایپ JSONValue هم یه تایپ یونیونه که تو یکی از حالتهاش یه شیء با کلیدهای رشتهای داره و مقدارش باز خودش JSONValueه.
برای مثال، فرض کن یه شیء person داریم با ویژگیهای name، age و friends:
const person = {
name: ‘Alice’,
age: 25,
friends: {
0: {
name: ‘Bob’,
age: 23,
friends: {
// …
}
},
1: {
name: ‘Carol’,
age: 28,
friends: {
// …
}
},
// …
}
};
اینجا friends یه شیءه که کلیداش شمارهان و مقادیرش ساختاری مثل خود person دارن. پس میتونیم یه تایپ Person تعریف کنیم که توش friends یه شیءه با مقادیری از جنس خود Person:
type Person = {
name: string;
age: number;
friends: {
[key: number]: Person;
};
};
یه نکته: تو جاوااسکریپت، کلیدهای شیء یا رشتهان یا سمبل. حتی اگه کلید رو عدد تعریف کنی، آخرش به رشته تبدیل میشه.
تو این مقاله، نهتنها نگا میکنیم تایپهای بازگشتی چیان، بلکه میبینیم چطور توی ساختارهای داده بازگشتی استفاده میشن و تو دو تا سناریوی واقعی به چه دردی میخورن. اینا ابزارای خفنیان برای موقعیتهای خاص، مثلاً وقتی بخوای یه ابزار تایپ رو گسترش بدی یا تایپ داخلی یه آرایه چندبعدی رو پیدا کنی.
بریم گشتی بزنیم!
تایپهای بازگشتی برای درختها و لیستهای پیوندی
بهترین راه فهمیدن تایپهای بازگشتی، نگاه کردن به ساختارهای دادهای مثل درخته:
یه مثال ساده بزنیم: یه گره تو یه درخت دودویی (Binary Tree) حداکثر دو تا بچه داره: یکی چپ، یکی راست. اگه خود این بچهها هم بچه داشته باشن، انگار ریشه یه زیر-درختن.
میتونیم یه تایپ TreeNode برای درخت دودویی بسازیم:
type TreeNode<T> = {
value: T;
left: TreeNode<T> | null;
right: TreeNode<T> | null;
};
این یه تایپ جنریکه، یعنی value میتونه هر چیزی که بهش بدیم باشه. بچههای چپ و راست هم یا خودشون TreeNode هستن یا null.
فرض کن یه درخت دودویی داریم این شکلی:
(اینجا چون متن اصلی یه مثال تصویری یا توضیح خاص برای درخت نداره، منم ادامه میدم با فرض یه مثال ساده)
مثلاً یه درخت که گره ریشهش یه عدد داره، مثلاً 5، و بچه چپش گرهای با مقدار 3 و بچه راستش گرهای با مقدار 7ه. خود این گرههای 3 و 7 هم میتونن بچههای دیگه داشته باشن یا نداشته باشن (null باشن). تو تایپ بالا، این ساختار با TreeNode<number> تعریف میشه.
یه مثال ملموس:
const tree: TreeNode<number> = {
value: 5,
left: {
value: 3,
left: null,
right: null
},
right: {
value: 7,
left: null,
right: null
}
};
اینجا TreeNode یه تایپ بازگشتیه، چون left و right میتونن باز خودشون TreeNode باشن. این باعث میشه بتونیم درختهایی با عمق دلخواه بسازیم.
حالا چی؟
تایپهای بازگشتی مثل این برای ساختارهای پیچیدهای مثل درختها یا لیستهای پیوندی (Linked Lists) خیلی بهدرد میخورن. مثلاً برای لیست پیوندی:
type LinkedListNode<T> = {
value: T;
next: LinkedListNode<T> | null;
};
اینجا هر گره یه مقدار داره و یه اشارهگر به گره بعدی، که یا یه گره دیگهست یا null.
بذار با همون مثال درخت دودویی که دادی شروع کنیم. یه درخت دودویی داریم که با تایپ TreeNode تعریفش کردیم:
type TreeNode<T> = {
value: T;
left: TreeNode<T> | null;
right: TreeNode<T> | null;
};
و حالا یه نمونه درخت دودویی با مقادیر عددی (تایپ number) اینجوریه:
const binaryTree: TreeNode<number> = {
value: 8,
left: {
value: 3,
left: {
value: 1,
left: null,
right: null
},
right: {
value: 6,
left: {
value: 4,
left: null,
right: null
},
right: {
value: 7,
left: null,
right: null
}
}
},
right: {
value: 10,
left: null,
right: {
value: 14,
left: {
value: 13,
left: null,
right: null
},
right: null
}
}
};
value: 8,
left: {
value: 3,
left: {
value: 1,
left: null,
right: null
},
right: {
value: 6,
left: {
value: 4,
left: null,
right: null
},
right: {
value: 7,
left: null,
right: null
}
}
},
right: {
value: 10,
left: null,
right: {
value: 14,
left: {
value: 13,
left: null,
right: null
},
right: null
}
}
};
اینجا چون TreeNode یه تایپ جنریکه، گفتیم که value از نوع number باشه. ساختار بازگشتی این تایپ باعث میشه بتونیم یه درخت با هر عمقی بسازیم، چون left و right خودشون میتونن TreeNode باشن یا null.
حالا بریم سراغ لیست پیوندی
برای لیست پیوندی هم یه تایپ مشابه داریم:
type LinkedList<T> = {
value: T;
next: LinkedList<T> | null;
};
اینجا هر گره یه value داره و یه next که یا به یه گره دیگه اشاره میکنه یا nullه. مثلاً اگه یه لیست پیوندی داشته باشیم که به این شکل باشه:
بذار ادامه بدیم و با همون مثال لیست پیوندی که دادی شروع کنیم. لیست پیوندی رو با تایپ LinkedList اینجوری تعریف کردیم:
const linkedList: LinkedList<number> = {
value: 1,
next: {
value: 2,
next: {
value: 3,
next: null
}
}
};
اینجا یه لیست پیوندی داریم: 1 -> 2 -> 3 -> null. تایپ LinkedList هم که قبلاً تعریفش کردیم، یه تایپ بازگشتیه:
type LinkedList<T> = {
value: T;
next: LinkedList<T> | null;
};
یه نکته باحال: به جای type، میتونیم از interface هم استفاده کنیم. مثلاً همون تایپهای TreeNode و LinkedList رو میشه اینجوری نوشت:
interface TreeNode<T> {
value: T;
left: TreeNode<T> | null;
right: TreeNode<T> | null;
}
interface LinkedList<T> {
value: T;
next: LinkedList<T> | null;
}
فرقشون چیه؟ type و interface تو خیلی موارد شبیه همن، ولی interface بیشتر برای تعریف ساختار شیءها استفاده میشه و یه کم انعطافپذیری کمتر داره (مثلاً نمیتونی با interface یونیون تایپ بسازی). ولی برای اینجور ساختارهای بازگشتی، هر دو خوب کار میکنن.
تایپهای نگاشتی و شرطی بازگشتی
استفاده از تایپهای بازگشتی برای ساختارهای دادهای مثل درخت و لیست پیوندی یه کم بدیهیه و شاید خیلی هیجانانگیز نباشه. ولی یه جای باحالتر که میتونیم از بازگشتی بودن استفاده کنیم، تو تایپهای نگاشتی (Mapped Types) و **تایپهای شرطی (Conditional Types)**ه.
تایپهای نگاشتی (Mapped Types)
تایپهای نگاشتی راهیان برای ساختن یه تایپ جدید بر اساس یه تایپ دیگه. مثلاً میتونیم کلیدهای یه شیء رو بگیریم و یه تایپ جدید بسازیم که همون کلیدها رو داره، ولی نوع مقادیرش فرق داره.
فرض کن یه شیء colors داریم که اسم رنگها و کد هگز اونا رو نگه میداره:
const colors = {
aquamarine: ‘#7fffd4’,
black: ‘#000000’,
blueviolet: ‘#8a2be2’,
goldenrod: ‘#daa520’,
indigo: ‘#4b0082’,
lavender: ‘#e6e6fa’,
silver: ‘#c0c0c0’
};
حالا میخوایم یه تایپ بسازیم که همون کلیدها رو داشته باشه، ولی به جای رشته، مقادیرش ازFه بولین باشن:
type ColorsToBoolean<T> = {
[K in keyof T]: boolean;
};
type Result = ColorsToBoolean<typeof colors>;
اینجا ColorsToBoolean یه تایپ نگاشتیه که کلیدهای شیء colors رو میگیره و به هر کدوم یه مقدار boolean نسبت میده. تایپ Result میشه یه چیزی مثل این:
type Result = {
aquamarine: boolean;
black: boolean;
blueviolet: boolean;
goldenrod: boolean;
indigo: boolean;
lavender: boolean;
silver: boolean;
};
یعنی یه تایپ که کلیداش همون رنگها هستن، ولی مقادیرش booleanه.
بذار با زبون خودمونی بریم تو دل تایپهای نگاشتی و شرطی بازگشتی و ببینیم چه اتفاقی میافته. بعدش هم دو تا کاربرد باحال (DeepPartial و UnwrapArray) رو بررسی میکنیم و آخرش یه نتیجهگیری با یه هشدار کوچولو داریم.
برای ساختن یه تایپ نگاشتی بازگشتی، باید یه جوری به خود همون تایپی که داریم تعریف میکنیم اشاره کنیم. مثلاً:
type Recursive<T> = {
[K in keyof T]: Recursive<T[K]>;
};
اینجا یه تایپ Recursive ساختیم که کلیدهای T رو میگیره و برای هر کلید، باز خودشو روی نوع مقدارش (T[K]) صدا میزنه. این یعنی یه جور بازگشتی بودن.
حالا بیایم یه نگا به تایپهای شرطی بندازیم. اینا شبیه عبارات شرطی با عملگر سهتایی (ternary operator) تو جاوااسکریپتن:
AType extends AnotherType ? ResultTypeIfTrue : ResultTypeIfFalse;
مثل اینه که تو جاوااسکریپت بنویسی:
condition ? resultIfTrue : resultIfFalse;
حالا میتونیم تایپ نگاشتی و شرطی رو قاطی کنیم تا یه تایپ نگاشتی شرطی بازگشتی بسازیم:
type Recursive<T> = {
[K in keyof T]: T[K] extends number ? T[K] : Recursive<T[K]>;
};
اینجا داریم میگیم: برای هر کلید تو T، اگه نوع مقدارش (T[K]) عدد بود، همونو برگردون، وگرنه باز خود Recursive رو روش صدا کن. اینجوری یه تایپ بازگشتی ساختیم که فقط برای اعداد متوقف میشه.
کاربردهای تایپهای بازگشتی
کاربرد ۱: DeepPartial
یه سناریوی خفن برای تایپهای بازگشتی، گسترش دادن ابزار Partial تو تایپاسکریپته. فرض کن یه اینترفیس برای یه مقاله داریم:
interface IArticle {
title: string;
description: string;
url: string;
author: {
name: string;
age: number;
};
}
ابزار Partial همه ویژگیهای یه تایپ رو اختیاری (optional) میکنه. مثلاً:
const article: Partial<IArticle> = {
title: ‘Navigating the Mysteries’,
description: ‘As we walk our questions into a troubled future…’,
url: ‘https://emergencemagazine.org/essay/navigating-the-mysteries’,
author: {
name: ‘Martin Shaw’
}
};
ولی یه مشکل داریم! این کد خطا میده چون age تو author اجباریه و ما نذاشتیمش. Partial فقط ویژگیهای سطح اول رو اختیاری میکنه، نه چیزایی که تو عمق (مثل author.age) هستن.
برای حل این مشکل، میتونیم از یه تایپ بازگشتی استفاده کنیم تا همه ویژگیها، حتی تو عمق، اختیاری بشن:
type DeepPartial<T> = {
[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};
اینجا DeepPartial میگه: هر ویژگی تو T اختیاریه (?)، و اگه مقدارش یه شیء بود (T[K] extends object)، باز DeepPartial رو روش صدا کن، وگرنه همون نوع اصلی (T[K]) رو نگه دار.
حالا اگه کد مقاله رو با DeepPartial تست کنیم:
const article: DeepPartial<IArticle> = {
title: ‘Navigating the Mysteries’,
description: ‘As we walk our questions into a troubled future…’,
author: {
name: ‘Martin Shaw’
}
};
دیگه خطا نمیده! چون حالا همه ویژگیها، حتی age تو author، اختیاری شدن.
کاربرد ۲: UnwrapArray
یه کاربرد دیگه وقتیه که بخوایم نوع داخلی یه آرایه چندبعدی رو پیدا کنیم. مثلاً اگه یه آرایه تودرتو داشته باشیم، چطور میتونیم نوع داخلشو دربیاریم؟
اینجاست که تایپ UnwrapArray به کار میاد:
type UnwrapArray<A> = A extends Array<infer T> ? UnwrapArray<T> : A;
اینجا UnwrapArray یه تایپ جنریکه. اگه A یه آرایه باشه (A extends Array<infer T>)، نوع داخلش (T) رو میگیره و دوباره UnwrapArray رو روش صدا میکنه. اگه آرایه نبود، همون A رو برمیگردونه.
کلمه infer اینجا برای استخراج نوع داخل آرایه استفاده میشه و فقط تو تایپهای شرطی با extends کار میکنه.
مثال:
type Result = UnwrapArray<string[][][]>; // string
یا اگه با کلمه Array بنویسیم:
type Result = UnwrapArray<Array<Array<Array<string>>>>; // string
اینجا UnwrapArray لایهلایه آرایه رو باز میکنه تا برسه به نوع اصلی که stringه.
نتیجهگیری (و یه هشدار!)
جهان تایپهای بازگشتی تو تایپاسکریپت خیلی جذابه و پر از قدرته. ولی همونطور که مستندات خود تایپاسکریپت میگه: «با قدرت زیاد، مسئولیت زیاد میاد!»
این تایپها میتونن زمان بررسی تایپ رو طولانی کنن یا اگه زیادی پیچیده باشن، حتی خطای کامپایل بهت بدن. مستندات حتی پیشنهاد میکنه اگه میتونی، اصلاً ازشون استفاده نکن!
پس این همه یادگیری الکی بود؟ نه! بازگشتی بودن یه ابزار قویه و همونطور که تو این مقاله دیدیم، تو موقعیتهای خاص (مثل DeepPartial یا UnwrapArray) خیلی بهدرد میخوره. فقط باید با احتیاط و عاقلانه ازش استفاده کنی.
بیشتر بخوانید: “PocketBase چیست؟“
دیدگاه بگذارید