با نام مستعار tsconfig با Long Relative Paths خداحافظی کنید

Summarize this content to 400 words in Persian Lang
بیایید واقعی باشیم – کار با مسیرهای نسبی طولانی می تواند دردناک باشد. چه کسی تا به حال مجبور به مقابله با چنین چیزی نبوده است؟

import { AuthService } from ‘../../../services/auth.service’;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

زمانی که برنامه شما رشد می کند، نامرتب، خواندن آن سخت است و مدیریت آن حتی سخت تر است. اما خبر خوب اینجاست: راهی برای رها کردن این مسیرهای طولانی و تمیز نگه داشتن کد خود و خوانایی وجود دارد. وارد کنید نام مستعار tsconfig! 🎉

نام مستعار چیست و چرا باید به آن اهمیت دهید؟

با نام مستعار tsconfig، می توانید آن مسیرهای نسبی نابسامان را با مسیرهای کوتاه و تمیزی که شبیه زیر هستند جایگزین کنید:

import { AuthService } from ‘@services/auth.service’;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

دیگر شمارش نیست ../ یا گم شدن در دایرکتوری های تو در تو. نام مستعار واردات شما را انجام می دهد:

خواندنی: خواندن و درک مسیرهای کوتاه آسان تر است.

قابل نگهداری: فایل ها را بدون شکستن نیمی از واردات خود جابه جا کنید.

مقیاس پذیر: همانطور که پروژه شما رشد می کند، اظهارات واردات شما تمیز باقی می مانند.

راه اندازی نام مستعار در Angular

افزودن نام مستعار سریع و آسان است.

مرحله 1: به روز رسانی tsconfig.json

در شما tsconfig.json، رفتن به compilerOptions و a را تنظیم کنید baseUrl برای اشاره به شما src دایرکتوری سپس، a را اضافه کنید paths بخش برای تعریف نام مستعار شما:

{
“compilerOptions”: {
“baseUrl”: “./src”,
“paths”: {
“@users/*”: [“app/users/*”],
“@products/*”: [“app/products/*”] }
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این تنظیمات:

@auth/* نقشه ها به src/app/auth/*.

@users/* نقشه ها به src/app/users/*.

@products/* نقشه ها به src/app/products/*.

مرحله 2: واردات خود را به روز کنید

حالا به جای این:

import { AuthService } from ‘../../../auth/auth.service’;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

می توانید از این استفاده کنید:

import { AuthService } from ‘@services/auth.service’;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خیلی تمیزتر، درسته؟

مرحله 3: Refactor Existing Imports (اختیاری)

اگر قبلاً تعداد زیادی مسیر طولانی در برنامه خود دارید، از ویرایشگر خود استفاده کنید پیدا کنید و جایگزین کنید ابزارهای ویژگی یا بازسازی برای به روز رسانی آنها. بیشتر IDE های مدرن، مانند VS Code یا WebStorm، می توانند به شما در خودکارسازی این کار کمک کنند.

امتیاز: بارگیری تنبل تمیزتر

حتی می توانید از نام مستعار برای مثال بارگذاری تنبل ماژول های Angular استفاده کنید:

const routes: Routes = [
{
path: ‘users’,
loadChildren: () => import(‘@users/user.routes’).then(r => r.userRoutes)
}
];

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این باعث می شود مسیرهای شما خواناتر باشد و همه چیز ثابت بماند.

چرا این مهم است

تغییر به نام مستعار tsconfig فقط برای زیباتر جلوه دادن کد شما نیست (اگرچه این یک مزیت بزرگ است!). همچنین:

در زمان بازسازي صرفه جويي مي كند – جابجايي فايل ها به معني اصلاحات بي پايان براي وارد كردن مسيرها نيست.

ورود اعضای تیم جدید را آسان‌تر می‌کند—آنها فوراً متوجه می‌شوند که واردات از کجا می‌آید.
ردیابی محل استفاده از نهادها را آسان‌تر می‌کند و به شما کمک می‌کند تا مشکلات احتمالی وابستگی دایره‌ای را شناسایی کرده و از آن جلوگیری کنید.
به مقیاس پروژه شما بدون ایجاد یک شبکه درهم از مسیرهای نسبی کمک می کند.

در هر پروژه TypeScript کار می کند

نام مستعار به هیچ چارچوبی محدود نمی شود – آنها در هر جایی که از TypeScript استفاده می کنید کار می کنند. از React، Angular، Vue تا Node، NestJS و غیره، می‌توانید از واردات تمیز و خوانا در تمام پروژه‌های خود لذت ببرید.

برای تمیز کردن چیزها آماده اید؟

چند دقیقه برای تنظیم نام مستعار در برنامه Angular خود وقت بگذارید و دیگر هرگز نمی خواهید به آن مسیرهای نسبی طولانی بازگردید. به من اعتماد کنید، آینده شما از شما تشکر خواهد کرد. 🙌

import { AuthService } from '../../../services/auth.service';  

import { AuthService } from '@services/auth.service';  

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@users/*": ["app/users/*"],
      "@products/*": ["app/products/*"]
    }
  }
}

import { AuthService } from '../../../auth/auth.service';  

import { AuthService } from '@services/auth.service';  

const routes: Routes = [  
  {  
    path: 'users',  
    loadChildren: () => import('@users/user.routes').then(r => r.userRoutes)
  }  
];