بهینه سازی عملکرد با TypeScript – انجمن DEV

Summarize this content to 400 words in Persian Lang
در قلمرو TypeScript، بهینه‌سازی عملکرد فقط به اجرای سریع‌تر کد نیست، بلکه نوشتن راه‌حل‌های قوی، مقیاس‌پذیر و قابل نگهداری است که در آزمون زمان مقاومت می‌کنند. این مقاله به جنبه‌های مختلف بهینه‌سازی عملکرد TypeScript با نکات، تکنیک‌ها و مثال‌هایی می‌پردازد تا اطمینان حاصل شود که برنامه‌های شما هم کارآمد و مؤثر هستند.

1. بهینه سازی کامپایل TypeScript

تالیف افزایشیTypeScript از کامپایل افزایشی پشتیبانی می کند، جایی که فقط فایل های تغییر یافته دوباره کامپایل می شوند. این به طور چشمگیری زمان ساخت پروژه های بزرگ را کاهش می دهد.

نحوه فعال کردن:اضافه کنید “incremental”: true در شما tsconfig.json:

{
“compilerOptions”: {
“incremental”: true
}
}

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

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

فایده: سرعت ساخت را به خصوص در خطوط لوله CI/CD افزایش می دهد.

با استفاده از –skipLibCheckاگر کتابخانه‌های خارجی را تغییر نمی‌دهید، از بررسی نوع آن‌ها صرفنظر کنید:

{
“compilerOptions”: {
“skipLibCheck”: true
}
}

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

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

چرا: با اجتناب از بررسی های اضافی نوع بسته های خارجی، زمان کامپایل را کاهش می دهد.

2. استنتاج نوع پیشرفته

استنتاج نوع TypeScript می تواند هم یک امتیاز و هم یک فاجعه باشد. استفاده بیش از حد از انواع صریح می تواند سرعت کامپایلر را کاهش دهد و کد شما را به هم بریزد.

مثال

const numbers = [1, 2, 3, 4]; // TypeScript infers `number[]`
const sum = numbers.reduce((acc, curr) => acc + curr, 0); // Infers `number`

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

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

نکته: برای استنتاج انواع به کامپایلر اعتماد کنید، مگر اینکه مشخص شود.

از انواع بیش از حد پیچیده اجتناب کنیدتا جایی که ممکن است برای کاهش بار شناختی و بهبود عملکرد تدوین، انواع را ساده کنید:

// Overly complex
type NestedArray<T> = T | NestedArray<T>[];

// Simplified for specific cases
type NestedNumberArray = number | NestedNumberArray[];

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

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

3. استفاده از انواع ابزار

TypeScript انواع ابزارهای داخلی مانند Pick، Omit، Partial، و Required. اینها می توانند کد شما را ساده کرده و قابلیت نگهداری را بهبود بخشند.

مثال: با استفاده از Omitبه جای حذف دستی خواص:

type User = {
id: number;
name: string;
email: string;
};
type UserWithoutEmail = Omit<User, ’email’>;

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

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

افزایش عملکرد: کدهای اضافی را کاهش می دهد و از ابزارهای بهینه شده TypeScript استفاده می کند.

4. لرزش درخت با TypeScript

تکان دادن درخت کدهای استفاده نشده را در طول فرآیند بسته بندی حذف می کند. از خروجی ماژول ES TypeScript استفاده کنید (“module”: “ESNext”) برای اطمینان از سازگاری با باندلرهایی مانند Webpack یا Rollup.

پیکربندی:

{
“compilerOptions”: {
“module”: “ESNext”
}
}

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

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

چرا: اطمینان حاصل می کند که باندلرها می توانند کدهای مرده را شناسایی و حذف کنند و اندازه بسته را کاهش دهند.

5. بهینه سازی برای عملکرد زمان اجرا

در حالی که TypeScript یک ابزار زمان کامپایل است، ویژگی های آن می تواند به طور غیر مستقیم بر عملکرد زمان اجرا تأثیر بگذارد.

از اظهارات بیش از حد نوع خودداری کنیدتایپ اظهارات (as یا ) در صورت استفاده بیش از حد یا سوء استفاده می تواند منجر به خطاهای زمان اجرا شود:

// Risky
const someValue: any = “hello”;
const stringLength = (someValue as string).length; // Unsafe

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

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

نکته: برای اطمینان از ایمنی از محافظ های نوع استفاده کنید:

function isString(value: unknown): value is string {
return typeof value === “string”;
}

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

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

ترجیح دادن Readonly برای تغییرناپذیریاستفاده کنید Readonly برای اعمال تغییر ناپذیری، که می تواند به جلوگیری از عوارض جانبی ناخواسته کمک کند:

const config: Readonly<{ port: number; debug: boolean }> = {
port: 3000,
debug: true,
};

// config.port = 4000; // Error

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

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

6. بهینه سازی حافظه

پروژه های بزرگ TypeScript ممکن است از مصرف حافظه زیاد رنج ببرند. با این اقدامات این مشکل را کاهش دهید:

محدوده نوع محدود: از انواع بیش از حد گسترده یا عمومی که نیاز به استنتاج عمیق دارند اجتناب کنید.

مدولار کردن: فایل های بزرگ را به ماژول های کوچکتر و متمرکز تقسیم کنید.

7. اشکال زدایی و پروفایل

اشکال زدایی کارآمد می تواند ساعت ها در زمان توسعه صرفه جویی کند:

از TypeScript استفاده کنید sourceMap گزینه ای برای نگاشت واضح بین TS و JS در حین اشکال زدایی:

{
“compilerOptions”: {
“sourceMap”: true
}
}

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

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

8. ویژگی های پیشرفته TypeScript

انواع مشروطبهینه سازی منطق بر اساس شرایط:

type Result<T> = T extends string ? string[] : number[];
const example: Result<string> = [“a”, “b”]; // Inferred as string[]

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

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

انواع تحت اللفظی الگوافزایش ایمنی نوع با الگوهای رشته پویا:

type EventName = `on${Capitalize<string>}`;

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

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

9. نکات و ترفندها

ترجیح دادن رابط ها به انواع برای تعاریف شیء در صورت امکان، زیرا رابط ها عملکرد بیشتری دارند و قابل گسترش هستند.

استفاده از Lazy Loading: انواع را به فایل های جداگانه تقسیم کنید و فقط در صورت نیاز بارگیری کنید.

ابزار سازی: از ابزارهای خاص TypeScript مانند ts-prune برای شناسایی صادرات بلااستفاده و تمیز نگه داشتن کد خود.

ادامه مطلب

وب سایت من: https://shafayeat.zya.me

کلونوپین ندارید؟ آماتورها…😀😀

{
  "compilerOptions": {
    "incremental": true
  }
}

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

const numbers = [1, 2, 3, 4]; // TypeScript infers `number[]`
const sum = numbers.reduce((acc, curr) => acc + curr, 0); // Infers `number`

// Overly complex
type NestedArray<T> = T | NestedArray<T>[];

// Simplified for specific cases
type NestedNumberArray = number | NestedNumberArray[];

type User = {
  id: number;
  name: string;
  email: string;
};
type UserWithoutEmail = Omit<User, 'email'>;

{
  "compilerOptions": {
    "module": "ESNext"
  }
}

// Risky
const someValue: any = "hello";
const stringLength = (someValue as string).length; // Unsafe

function isString(value: unknown): value is string {
  return typeof value === "string";
}

const config: Readonly<{ port: number; debug: boolean }> = {
  port: 3000,
  debug: true,
};

// config.port = 4000; // Error

{
  "compilerOptions": {
    "sourceMap": true
  }
}

type Result<T> = T extends string ? string[] : number[];
const example: Result<string> = ["a", "b"]; // Inferred as string[]

type EventName = `on${Capitalize<string>}`;