نوشته های mojtaba hassanzadeh

تفاوت type , interface

mojtaba hassanzadeh — Sun, 17 Aug 2025 09:34:07 +0330

تفاوت type و interface توی TypeScript(با مثال‌هایی مثل پیتزا و لگو 😅)تصور کن داری یه شهر لگویی می‌سازی:interface مثل اون صفحه‌ی لگوی پایه‌ایه که می‌تونی روش تیکه‌تیکه چیزای جدید اضافه کنی.امروز یه خونه، فردا بالکن، پس‌فردا پنل خورشیدی. هر چی جلوتر بری، می‌تونی بازش کنی و روش چیز جدید بذاری.type مثل یه قطعه‌ی لگوی پرینت سه‌بعدی اختصاصیه. خیلی دقیق و تیز. کاری رو که براش طراحی شده انجام می‌ده، اما دیگه نمی‌تونی تغییرش بدی. اگه بخوای تغییر بدی باید کلش رو از نو بسازی.خب، فرق اصلی چیه؟1. توسعه‌پذیری (Extensibility)interface می‌تونه دوباره باز بشه و چیزای جدید بهش اضافه بشه:interface Cat { meow: () => string; } // یه جای دیگه interface Cat { purr: () => string; } // الان Cat هم meow داره هم purr ولی type اینو قبول نمی‌کنه. اگه دوباره تعریفش کنی خطا می‌گیری:type Dog = { bark: () => string; }; type Dog = { wagTail: () => void; }; // ❌ Error: Cannot redeclare ‘Dog’ 📌 نتیجه: اگه می‌خوای چیزی توی پروژه یا لایبرریت رشد کنه و بعداً قابل گسترش باشه → interface.2. انعطاف در شکل (Flexibility in Shape)type خیلی انعطاف‌پذیره. می‌تونه union، tuple، شرطی و … رو بسازه.interface بیشتر برای object طراحی شده.مثال:type Status = 'loading' | 'success' | 'error'; // حالت‌های مختلف type Coordinates = [number, number]; // tuple type Maybe = T | null | undefined; // generic اینارو با interface نمی‌تونی بسازی.3. ادغام (Merging) در مقابل اشتراک (Intersection)interface خودش خودکار merge می‌شه:interface User { id: number; } interface User { name: string; } // User = { id: number; name: string } ولی type نیاز به & داره (intersection):type Id = { id: number }; type Name = { name: string }; type User = Id & Name; 4. کارایی (Performance & Tooling)توی پروژه‌های بزرگ، interface سریع‌تره (autocomplete بهتر، کمتر هنگ کردن VSCode).type مخصوصاً وقتی union یا شرطی زیاد داری می‌تونه IDE رو سنگین کنه.خب، پس چی استفاده کنیم؟قاعده‌ی کلی:✅ interface:شکل آبجکت‌ها (کاربر، کانفیگ، ریسپانس API)وقتی می‌خوای کلاس یه قرارداد رو implement کنهتوی لایبرری‌ها یا کدی که قراره بقیه extend کنن✅ type:union ('dark' | 'light')tuple ([string, number])فانکشن‌ها و overloadهاmapped types یا conditional typesچند نکته‌ی خاصمی‌تونی یه interface رو از یه type که شکل آبجکت داره extend کنی:type Animal = { sound: string }; interface Dog extends Animal { breed: string; } // ✅ کار می‌کنه ولی اگه type شامل union یا primitive باشه، interface نمی‌تونه ازش extend بشه.نتیجه نهایی؟interface مثل یه کت‌و‌شلوار دوخته‌شده‌ست → شیک، تمیز، آماده‌ی گسترش.type مثل چاقوی سوئیسیه → همه‌کاره، انعطاف‌پذیر، مخصوص وقتی اوضاع عجیب می‌شه.هر دوش لازمن. نباید مذهبی فقط یکی رو انتخاب کنی.اگه همکارت گفت «type همیشه بهتره» ازش بخواه یه union با interface بنویسه… بعدم آروم آروم ازش فاصله بگیر 😏.

mantine hooks 🇮🇷

mojtaba hassanzadeh — Tue, 30 Apr 2024 10:09:47 +0330

🇮🇷 دنیای جذاب Hookهای Mantıne: رفقای صمیمی توسعه رابط کاربری 🇮🇷امروز میخوایم یه گپ دوستانه باهاتون داشته باشیم راجع به Hookهای Mantıne، یه سری ابزار فوقالعاده برای ساخت رابطهای کاربری جذاب و پویا توی React.هوک ها یه سری تابع هستن که به شما امکان میدن بدون نیاز به نوشتن کد زیاد، از قابلیتهای مختلف کتابخانهها استفاده کنید. Mantıne هم یه سری Hook کاربردی داره که میتونن کار شما رو توی ساخت رابطهای کاربری خیلی راحتتر و سریعتر کنن.در این مقاله به معرفی چند تا از مهمترین Hookهای Mantıne میپردازیم:1. useMantineTheme:این Hook به شما امکان دسترسی به تم فعلی Mantıne رو میده.پراپها:defaultValue: تم پیشفرض (در صورتی که تم فعلی وجود نداشته باشه)مثال:JavaScriptimport { useMantineTheme } from '@mantine/core'; const MyComponent = () => { const { colors } = useMantineTheme(); return (

{/* ... */}

); };2. useDisclosure:این Hook یه ابزار قدرتمند برای مدیریت نمایش و پنهان کردن عناصر رابط کاربری هستش.پراپها:isOpen: وضعیت فعلی نمایش (باز یا بسته)onOpen: تابعی که هنگام باز شدن عنصر اجرا میشهonClose: تابعی که هنگام بسته شدن عنصر اجرا میشهمثال:JavaScriptimport { useDisclosure } from '@mantine/core'; const MyComponent = () => { const { isOpen, onOpen, } = useDisclosure(); return ( <> {isOpen && (

{/* ... محتوای مورد نظر شما */}

)} ); };3. useModals:این Hook یه ابزار کاربردی برای مدیریت Modalها (پنجرههای مجزا) در رابط کاربری شما هستش.پراپها:opened: وضعیت فعلی Modal (باز یا بسته)onClose: تابعی که هنگام بسته شدن Modal اجرا میشهمثال:JavaScriptimport { useModals } from '@mantine/core'; const MyComponent = () => { const { opened, } = useModals(); return ( <> ); }; const MyModal = ({ opened, }) => ( {/* ... محتوای مورد نظر شما */} );4. useHover:این Hook به شما امکان میده که تشخیص بدید که آیا اشاره گر ماوس روی یه عنصر خاص قرار گرفته یا نه.پراپها:isHovered: وضعیت فعلی Hover (روی عنصر یا نه)onHover: تابعی که هنگام Hover کردن روی عنصر اجرا میشهonLeave: تابعی که هنگام خارج شدن اشاره گر از روی عنصر اجرا میشهمثال:JavaScriptimport { useHover } from '@mantine/core'; const MyComponent = () => { const { isHovered, onHover, onLeave } = useHover(); return (

{/* ... محتوای مورد نظر شما */}

); };5. useMediaQuery:این Hook به شما امکان میده که بر اساس اندازه صفحه نمایش، کدهای مختلفی رو اجرا کنید.پراپها:query: یه عبارت CSS Media Querymatches: وضعیت فعلی Media Query (مطابقت داره یا نه)onChange: تابعی که هر بار وضعیت Media Query تغییر میکنه اجرا میشهمثال:JavaScriptimport { useMediaQuery } from '@mantine/core'; const MyComponent = () => { const { matches } = useMediaQuery('(max-width: 768px)'); return ( <> {matches ? (

{/* محتوای برای نمایش در صفحات کوچک */}

) : (

{/* محتوای برای نمایش در صفحات بزرگ */}

)} ); };6. useTransition:این Hook یه ابزار قدرتمند برای ایجاد انیمیشنهای روان و جذاب در رابط کاربری شما هستش.پراپها:mounted: وضعیت فعلی نمایش (نمایش داده شده یا نه)children: محتوایی که میخواید انیمیشن بشهtransition: یه شیء که نوع و زمان انیمیشن رو مشخص میکنهمثال:JavaScriptimport { useTransition } from '@mantine/core'; const MyComponent = () => { const { mounted, children } = useTransition({ duration: 500 }); return ( <> {mounted && children} ); };7. useClipboard:این Hook به شما امکان میده که متن رو به حافظه موقت (Clipboard) کپی کنید.پراپها:isCopied: وضعیت فعلی کپی شدن متن (کپی شده یا نه)value: متنی که میخواید کپی بشهonCopy: تابعی که هنگام کپی شدن متن اجرا میشهمثال:JavaScriptimport { useClipboard } from '@mantine/core'; const MyComponent = () => { const { isCopied, value, } = useClipboard('متن مورد نظر برای کپی'); return ( <> {isCopied &&

متن با موفقیت کپی شد!

} ); }; 8. useHotkey:این Hook به شما امکان میده که میانبرهای صفحه کلید رو برای انجام کارهای مختلف در رابط کاربری خودتون تعریف کنید.پراپها:hotkey: میانبر صفحه کلید (مثل "Ctrl+Shift+C")handler: تابعی که هنگام فشردن میانبر صفحه کلید اجرا میشهمثال:JavaScriptimport { useHotkey } from '@mantine/core'; const MyComponent = () => { const handleHotkey = () => { // ... کاری که میخواید انجام بشه }; useHotkey('Ctrl+Shift+C', handleHotkey); return (

{/* ... محتوای مورد نظر شما */}

); };9. useBreakpoint:این Hook به شما امکان میده که بر اساس نقطه شکست (Breakpoint) فعلی صفحه نمایش، کدهای مختلفی رو اجرا کنید.پراپها:breakpoint: نقطه شکست مورد نظر (مثل "sm" یا "md")children: محتوایی که میخواید بر اساس نقطه شکست نمایش داده بشهrender: تابعی که محتوای مورد نظر رو بر اساس نقطه شکست برمیگردونهمثال:JavaScriptimport { useBreakpoint } from '@mantine/core'; const MyComponent = () => { const { breakpoint } = useBreakpoint(); return ( <> {breakpoint === 'sm' ? (

{/* محتوای برای نمایش در صفحات کوچک */}

) : (

{/* محتوای برای نمایش در صفحات بزرگ */}

)} ); };10. useScroll:این Hook به شما امکان میده که موقعیت اسکرول فعلی یه عنصر رو ردیابی کنید.پراپها:scrollPosition: موقعیت اسکرول فعلی (در پیکسل)onScroll: تابعی کهمثال:JavaScriptimport { useScroll } from '@mantine/core'; const MyComponent = () => { const { scrollPosition, } = useScroll(); return (

{/* ... محتوای مورد نظر شما */}

); };نکته:برای استفاده از Hookهای Mantıne، باید کتابخانه @mantine/core رو نصب کنید.میتونید از سایر Hookهای Mantıne برای انجام کارهای مختلف در رابطهای کاربری خودتون استفاده کنید.امیدواریم این مقاله برای شما مفید بوده باشه.#Mantıne #React #Hook #برنامهنویسی

Mantine ui (Menu, Drawer, Modal)

mojtaba hassanzadeh — Sun, 28 Apr 2024 14:31:43 +0330

عناصر رابط کاربری جذاب در Mantini: راهنمای جامعسلام رفیق! آمادهای تا با سه عنصر قدرتمند Mantini برای ساخت رابطهای کاربری جذاب آشنا بشی؟در این مقاله، به دنیای Menu، Drawer و Modal در Mantini سفر خواهیم کرد و به طور کامل با پراپها، نحوه استفاده و استایلدهی آنها آشنا میشویم.1. Menu: منوی کشویی دوستداشتنیپراپها:children: محتوای منوی شما را در خود جای میدهد.variant: نوع منوی کشویی را مشخص میکند (مانند popover, dropdown, context).trigger: نحوه نمایش منو را تعیین میکند (مانند click, hover).placement: جهت نمایش منو را مشخص میکند (مانند top, bottom, left, right).items: لیستی از آیتمهای منو را شامل میشود.defaultActiveItem: آیتم پیشفرض فعال را مشخص میکند.onClose: تابعی که هنگام بسته شدن منو اجرا میشود.مثال:JavaScriptimport { Menu } from '@mantine/core'; const items = [ { label: 'خانه', icon: 'Home' }, { label: 'درباره ما', icon: 'Info' }, { label: 'تماس با ما', icon: 'At' }, ]; const MyMenu = () => { return ( {items.map((item) => ( {item.label} ))} ); };تغییر استایل:میتوانید با استفاده از theme Mantini، ظاهر منوی خود را به طور کامل شخصیسازی کنید. به عنوان مثال، برای تغییر رنگ پسزمینه منو، میتوانید از کد زیر استفاده کنید:JavaScriptconst theme = { colors: { menu: { background: '#f0f0f0', }, }, };2. Drawer: کشوی جانبی جادوییپراپها:children: محتوای کشوی شما را در خود جای میدهد.opened: وضعیت کشو را مشخص میکند (باز یا بسته).onClose: تابعی که هنگام بسته شدن کشو اجرا میشود.size: عرض کشو را تعیین میکند.position: موقعیت کشو را مشخص میکند (مانند left, right).variant: نوع کشو را مشخص میکند (مانند permanent, temporary).shadow: سایه کشو را فعال یا غیرفعال میکند.مثال:JavaScriptimport { Drawer } from '@mantine/core'; const MyDrawer = () => { const [opened, setOpen] = useState(false); return ( <> setOpen(false)} size={300} position="left" variant="temporary" shadow > عنوان کشو

محتوای کشو

); };تغییر استایل:مانند Menu، میتوانید از theme Mantini برای استایلدهی کشوی خود استفاده کنید. به عنوان مثال، برای تغییر رنگ عنوان کشو، میتوانید از کد زیر استفاده کنید:JavaScriptconst theme = { colors: { drawer: { header: { background: '#e0e0e0', color: '#333', }, }, }, };3. Modal: پنجرههای پاپآپ جذابپراپها:children: محتوای پنجره پاپآپ شما را در خود جای میدهد.opened: وضعیت پنجره پاپآپ را مشخص میکند (باز یا بسته).onClose: تابعی که هنگام بسته شدن پنجره پاپآپ اجرا میشود.title: عنوان پنجره پاپآپ را نمایش میدهد.overlay: نوع پوشش روی صفحه را مشخص میکند (مانند dimmed, transparent).withOverlay: پوشش روی صفحه را فعال یا غیرفعال میکند.size: اندازه پنجره پاپآپ را تعیین میکند (مانند xs, sm, md, lg, xl).centered: پنجره پاپآپ را در مرکز صفحه قرار میدهد.مثال:JavaScriptimport { Modal } from '@mantine/core'; const MyModal = () => { const [opened, setOpen] = useState(false); return ( <> setOpen(false)} title="عنوان Modal" overlay="dimmed" size="md" centered >

محتوای Modal

); };تغییر استایل:مانند Menu و Drawer، میتوانید از theme Mantini برای استایلدهی پنجره پاپآپ خود استفاده کنید. به عنوان مثال، برای تغییر رنگ عنوان Modal، میتوانید از کد زیر استفاده کنید:JavaScriptconst theme = { colors: { modal: { title: { background: '#f5f5f5', color: '#666', }, }, }, };نکات تکمیلی:برای مشاهده لیست کامل پراپها و نمونههای کد هر عنصر، به مستندات رسمی Mantini مراجعه کنید: از قدرت theme Mantini برای شخصیسازی کامل ظاهر عناصر خود استفاده کنید.خلاق باشید و از این عناصر قدرتمند برای ساخت رابطهای کاربری جذاب و کاربرپسند استفاده کنید!امیدوارم این مقاله برای شما مفید بوده باشد!اگر سوالی دارید، در بخش نظرات مطرح کنید.

mantine (TextInput , Select, Checkbox, Radio Group)

mojtaba hassanzadeh — Sat, 27 Apr 2024 15:07:45 +0330

🇮🇷 دنیای جذاب کامپوننتهای Mantıne: گشت و گذار در میان ابزارهای کاربردی 🇮🇷سلام به رفقای برنامهنویس فارسیزبان!امروز میخوایم یه گپ دوستانه باهاتون داشته باشیم راجع به کامپوننتهای Mantıne، یه سری ابزار فوقالعاده برای ساخت رابطهای کاربری جذاب و کارآمد.ما توی این مقاله به 4 تا از محبوبترین کامپوننتهای Mantıne میپردازیم:1. TextInput:TextInput یه ابزار قدرتمند برای ساخت فیلدهای ورودی متن هستش.ویژگیهای اصلی TextInput:پراپها:value: مقدار فعلی فیلد ورودیonChange: تابعی که هر بار مقدار فیلد ورودی تغییر میکنه اجرا میشهplaceholder: متنی که داخل فیلد ورودی به صورت پیشفرض نمایش داده میشهlabel: برچسب فیلد ورودیsize: اندازه فیلد ورودی (کوچک، متوسط، بزرگ)variant: نوع فیلد ورودی (پیشفرض، مخفی، شبحوار)error: نمایش خطای اعتبارسنجیrequired: الزامی بودن فیلد ورودیمثال:JavaScriptimport { TextInput } from '@mantine/core'; const MyTextInput = () => ( console.log(e.target.value)} placeholder="متن مورد نظر خود را وارد کنید" label="نام شما" size="md" variant="default" error="مقدار نامعتبر" required /> );تغییر استایل TextInput:Theme: میتونید با استفاده از تم Mantıne، ظاهر TextInput رو به طور کلی تغییر بدید.CSS: میتونید با استفاده از CSS، ظاهر TextInput رو به طور خاص تغییر بدید.2. Select:Select یه ابزار کاربردی برای ساخت منوی انتخابی هستش.ویژگیهای اصلی Select:پراپها:value: مقدار فعلی منوی انتخابیonChange: تابعی که هر بار مقدار منوی انتخابی تغییر میکنه اجرا میشهoptions: لیستی از گزینههای موجود در منوlabel: برچسب منوی انتخابیsize: اندازه منوی انتخابی (کوچک، متوسط، بزرگ)variant: نوع منوی انتخابی (پیشفرض، مخفی، شبحوار)multiple: امکان انتخاب چند گزینه به طور همزمانمثال:JavaScriptimport { Select } from '@mantine/core'; const MySelect = () => (