نصب و راه‌اندازی تایپ اسکریپت: گام به گام تا اولین کد Type-safe شما

مقدمه: گامی به سوی توسعه پایدار و قابل اطمینان با تایپ اسکریپت

در دنیای پرشتاب توسعه نرم‌افزار، اطمینان از صحت، مقیاس‌پذیری و نگهداری‌پذیری کد از اهمیت بالایی برخوردار است. جاوااسکریپت، به عنوان زبان اصلی وب، با وجود انعطاف‌پذیری بی‌نظیر خود، گاهی اوقات می‌تواند منجر به خطاهای غیرمنتظره در زمان اجرا شود؛ خطاهایی که شناسایی و رفع آن‌ها به خصوص در پروژه‌های بزرگ و پیچیده، زمان‌بر و هزینه‌بر است. اینجاست که تایپ اسکریپت (TypeScript) به عنوان یک اَبَر مجموعه (Superset) قدرتمند برای جاوااسکریپت وارد عمل می‌شود. تایپ اسکریپت با افزودن قابلیت‌های نوع‌دهی ایستا (Static Typing) به جاوااسکریپت، به توسعه‌دهندگان این امکان را می‌دهد که خطاهای مرتبط با نوع را در زمان کامپایل (پیش از اجرا) شناسایی کنند. این ویژگی، به طور چشمگیری کیفیت کد را ارتقا داده، خوانایی آن را بهبود می‌بخشد و فرآیند نگهداری را ساده‌تر می‌کند.

نصب و راه‌اندازی تایپ اسکریپت، نخستین گام در مسیر بهره‌برداری از مزایای بی‌شمار آن است. این فرایند شامل چندین مرحله کلیدی است که از آماده‌سازی محیط توسعه تا پیکربندی کامپایلر و اجرای اولین کد تایپ‌سیف (Type-safe) شما را در بر می‌گیرد. هدف از این راهنمای جامع، ارائه یک مسیر گام به گام و کاملاً تخصصی برای نصب و راه‌اندازی تایپ اسکریپت است، به گونه‌ای که حتی توسعه‌دهندگان باتجربه نیز بتوانند از جزئیات فنی و نکات کاربردی آن بهره‌مند شوند. ما در این مقاله به عمق هر مرحله خواهیم رفت، از پیش‌نیازهای اولیه گرفته تا تنظیمات پیشرفته کامپایلر tsconfig.json و ادغام با ابزارهای بیلد مدرن مانند Webpack و Vite. با ما همراه باشید تا نه تنها تایپ اسکریپت را نصب کنید، بلکه درک عمیقی از نحوه کارکرد آن و چگونگی بهینه‌سازی فرآیند توسعه خود با استفاده از آن به دست آورید.

پیش‌نیازها و آماده‌سازی محیط توسعه: بستری مستحکم برای تایپ اسکریپت

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

Node.js و NPM/Yarn: ستون فقرات اکوسیستم جاوااسکریپت

تایپ اسکریپت، به عنوان یک ابزار توسعه، بر روی Node.js اجرا می‌شود. Node.js یک محیط اجرای جاوااسکریپت سمت سرور است که به شما امکان می‌دهد جاوااسکریپت را خارج از مرورگر اجرا کنید. همراه با Node.js، یک مدیر بسته به نام NPM (Node Package Manager) نیز نصب می‌شود که برای مدیریت وابستگی‌ها و بسته‌های جاوااسکریپت استفاده می‌شود. یک جایگزین محبوب برای NPM، Yarn است که توسط فیسبوک توسعه یافته و اغلب به دلیل سرعت و قابلیت‌های کشینگ بهتر مورد استفاده قرار می‌گیرد. توصیه می‌شود یکی از این دو را نصب و به‌روز نگه دارید.

نصب Node.js و NPM:

برای نصب Node.js و NPM، بهترین روش مراجعه به وب‌سایت رسمی Node.js (nodejs.org) است. دو نسخه برای دانلود وجود دارد: LTS (Long Term Support) و Current. برای اکثر پروژه‌ها، نسخه LTS توصیه می‌شود زیرا پایدارتر است و پشتیبانی طولانی‌مدت دریافت می‌کند. پس از دانلود فایل نصب‌کننده (.msi برای ویندوز، .pkg برای macOS یا استفاده از پکیج منیجرها برای لینوکس)، مراحل نصب را دنبال کنید. نصب Node.js به صورت خودکار NPM را نیز نصب می‌کند.

برای تأیید نصب صحیح، ترمینال یا Command Prompt خود را باز کرده و دستورات زیر را اجرا کنید:

node -v
npm -v

خروجی باید شماره نسخه نصب شده Node.js و NPM را نشان دهد. به عنوان مثال، v18.17.1 برای Node.js و 9.6.7 برای NPM.

نصب Yarn (اختیاری اما توصیه می‌شود):

اگر قصد دارید از Yarn به جای NPM استفاده کنید، پس از نصب Node.js و NPM، می‌توانید Yarn را به صورت سراسری نصب کنید:

npm install -g yarn

سپس برای تأیید نصب:

yarn -v

خروجی باید شماره نسخه نصب شده Yarn را نمایش دهد.

VS Code: محیط توسعه یکپارچه ایده‌آل برای تایپ اسکریپت

Visual Studio Code (VS Code) یک ویرایشگر کد رایگان، متن‌باز و بسیار قدرتمند است که توسط مایکروسافت توسعه یافته است. این IDE (Integrated Development Environment) به دلیل پشتیبانی عالی از تایپ اسکریپت (با توجه به اینکه هر دو توسط مایکروسافت توسعه یافته‌اند)، قابلیت‌های دیباگینگ قوی، اکستنشن‌های فراوان و جامعه کاربری بزرگ، به انتخاب اول بسیاری از توسعه‌دهندگان تایپ اسکریپت تبدیل شده است. اگر هنوز از آن استفاده نمی‌کنید، اکیداً توصیه می‌شود آن را نصب کنید.

نصب VS Code:

برای نصب VS Code، به وب‌سایت رسمی آن (code.visualstudio.com) مراجعه کرده و نسخه مناسب برای سیستم عامل خود را دانلود و نصب کنید. مراحل نصب بسیار سرراست هستند.

اکستنشن‌های ضروری VS Code برای تایپ اسکریپت:

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

• ESLint: ابزاری برای تجزیه و تحلیل کد استاتیک که به شناسایی مشکلات و اعمال استانداردهای کدنویسی کمک می‌کند. این اکستنشن به همراه @typescript-eslint/parser و @typescript-eslint/eslint-plugin کار می‌کند.
• Prettier – Code formatter: یک فرمتر کد عالی که کد شما را به طور خودکار فرمت می‌کند تا خوانایی و یکدستی آن حفظ شود.
• Live Server: (برای پروژه‌های فرانت‌اند) یک سرور توسعه سبک راه‌اندازی می‌کند تا تغییرات شما به صورت زنده در مرورگر نمایش داده شوند.
• GitLens — Git supercharged: قابلیت‌های Git را به شدت در VS Code تقویت می‌کند.

دانش پایه Command Line/Terminal: ناوبری و اجرا

بخش عمده‌ای از کار با تایپ اسکریپت، نصب بسته‌ها، اجرای کامپایلر و اجرای اسکریپت‌ها، از طریق خط فرمان (Command Line Interface – CLI) انجام می‌شود. آشنایی با دستورات پایه مانند cd (تغییر دایرکتوری)، ls (لیست کردن محتویات دایرکتوری) یا dir (ویندوز)، mkdir (ساخت دایرکتوری) و اجرای دستورات NPM/Yarn برای پیشبرد کار ضروری است.

اطمینان از نصب صحیح Node.js، NPM/Yarn و VS Code، و همچنین داشتن درک اولیه از کار با ترمینال، شما را برای مراحل بعدی آماده می‌کند.

نصب تایپ اسکریپت به صورت سراسری و محلی: گزینه‌ها و ملاحظات

پس از آماده‌سازی محیط توسعه، نوبت به نصب خود تایپ اسکریپت می‌رسد. دو روش اصلی برای نصب تایپ اسکریپت وجود دارد: نصب سراسری (Global) و نصب محلی (Local). هر کدام مزایا و معایب خاص خود را دارند و انتخاب بین آن‌ها بستگی به نیاز پروژه و ترجیح توسعه‌دهنده دارد.

نصب سراسری (Global Installation):

نصب سراسری به این معنی است که کامپایلر تایپ اسکریپت (tsc) در سطح سیستم عامل شما در دسترس قرار می‌گیرد. این بدان معناست که می‌توانید دستور tsc را از هر دایرکتوری در ترمینال خود اجرا کنید، بدون اینکه تایپ اسکریپت به صورت محلی در آن پروژه نصب شده باشد.

نحوه نصب سراسری:

برای نصب تایپ اسکریپت به صورت سراسری، دستور زیر را در ترمینال خود اجرا کنید:

npm install -g typescript
# یا با Yarn:
# yarn global add typescript

پس از نصب، می‌توانید با اجرای دستور زیر، نسخه تایپ اسکریپت نصب شده را بررسی کنید:

tsc -v

خروجی باید شماره نسخه تایپ اسکریپت را نشان دهد، مثلاً Version 5.2.2.

مزایای نصب سراسری:

• راحتی در دسترسی: tsc از هر دایرکتوری در دسترس است، که برای آزمایش‌های سریع یا اسکریپت‌های یک‌بار مصرف مفید است.
• سادگی: برای شروع سریع، تنها یک بار نصب کافی است.

معایب نصب سراسری:

• مشکلات وابستگی نسخه: اگر پروژه‌های مختلفی دارید که هر یک به نسخه‌های متفاوتی از تایپ اسکریپت نیاز دارند، نصب سراسری می‌تواند مشکل‌ساز باشد. تغییر نسخه سراسری ممکن است بر پروژه‌های دیگر تأثیر بگذارد.
• عدم ثبت در پروژه: نسخه تایپ اسکریپت مورد استفاده در یک پروژه، در فایل package.json ثبت نمی‌شود. این امر همکاری با تیم را دشوار می‌کند، زیرا سایر توسعه‌دهندگان نمی‌دانند از چه نسخه‌ای باید استفاده کنند.
• آپدیت‌های دستی: باید به صورت دستی نسخه سراسری را به‌روزرسانی کنید.

نصب محلی (Local Installation):

نصب محلی به این معنی است که تایپ اسکریپت به عنوان یک وابستگی (معمولاً یک وابستگی توسعه – devDependencies) در داخل یک پروژه خاص نصب می‌شود. کامپایلر tsc در دایرکتوری node_modules/.bin/ آن پروژه قرار می‌گیرد.

نحوه نصب محلی:

ابتدا، وارد دایرکتوری پروژه خود شوید. اگر پروژه جدیدی است، ابتدا یک فایل package.json ایجاد کنید:

mkdir my-typescript-project
cd my-typescript-project
npm init -y

سپس، تایپ اسکریپت را به عنوان یک وابستگی توسعه نصب کنید:

npm install --save-dev typescript
# یا با Yarn:
# yarn add --dev typescript

این دستور تایپ اسکریپت را در دایرکتوری node_modules پروژه شما نصب می‌کند و آن را به بخش devDependencies در package.json اضافه می‌کند. به عنوان مثال:

{
  "name": "my-typescript-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.2.2"
  }
}

اجرای کامپایلر محلی:

هنگامی که تایپ اسکریپت به صورت محلی نصب شده است، نمی‌توانید مستقیماً tsc را اجرا کنید، مگر اینکه از اسکریپت‌های NPM/Yarn استفاده کنید. بهترین روش این است که اسکریپت‌های کامپایل را در فایل package.json تعریف کنید:

{
  "name": "my-typescript-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.2.2"
  }
}

حالا می‌توانید با اجرای npm run build (یا yarn build) کامپایلر تایپ اسکریپت محلی را فراخوانی کنید.

مزایای نصب محلی:

• مدیریت نسخه: هر پروژه می‌تواند از نسخه خاص خود از تایپ اسکریپت استفاده کند، بدون تداخل با پروژه‌های دیگر. این امر برای همکاری تیمی بسیار مهم است.
• پایداری پروژه: وابستگی به یک نسخه خاص از تایپ اسکریپت در package.json تضمین می‌کند که همه اعضای تیم و محیط‌های توسعه/استقرار از همان نسخه استفاده می‌کنند، که از “It works on my machine” جلوگیری می‌کند.
• اتوماسیون: به راحتی با اسکریپت‌های package.json و ابزارهای بیلد (مانند Webpack) ادغام می‌شود.

معایب نصب محلی:

• نیاز به نصب در هر پروژه: برای هر پروژه جدید، باید تایپ اسکریپت را به صورت محلی نصب کنید.
• پیچیدگی بیشتر برای اجرا: نمی‌توانید مستقیماً tsc را از خط فرمان اجرا کنید و نیاز به اسکریپت‌های package.json یا استفاده از npx دارید (مثلاً npx tsc).

توصیه نهایی: نصب محلی

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

شروع یک پروژه جدید با تایپ اسکریپت: پیکربندی tsconfig.json

پس از نصب محلی تایپ اسکریپت، گام بعدی ایجاد یک فایل پیکربندی برای کامپایلر تایپ اسکریپت است: tsconfig.json. این فایل قلب پروژه تایپ اسکریپت شماست و به کامپایلر می‌گوید چگونه فایل‌های .ts شما را به جاوااسکریپت کامپایل کند. بدون این فایل، تایپ اسکریپت قادر به درک ساختار پروژه شما و اعمال تنظیمات صحیح نخواهد بود.

ایجاد tsconfig.json:

در دایرکتوری ریشه پروژه خود، دستور زیر را در ترمینال اجرا کنید:

npx tsc --init
# یا اگر از اسکریپت ها استفاده می کنید و tsc در PATH شما نیست:
# npm run tsc -- --init

دستور npx tsc --init یک فایل tsconfig.json با تنظیمات پیش‌فرض و کامنت‌های توضیحی برای هر گزینه ایجاد می‌کند. این تنظیمات پیش‌فرض برای بسیاری از پروژه‌ها یک نقطه شروع خوب هستند، اما درک آن‌ها و سفارشی‌سازی آن‌ها برای نیازهای خاص پروژه شما ضروری است.

کاوش در تنظیمات کلیدی tsconfig.json:

فایل tsconfig.json حاوی یک شیء JSON است که در آن، گزینه‌های مختلف در بخش compilerOptions تعریف می‌شوند. در ادامه به توضیح مهم‌ترین و پرکاربردترین گزینه‌ها می‌پردازیم:

1. target: نسخه خروجی جاوااسکریپت

این گزینه مشخص می‌کند که تایپ اسکریپت کد شما را به کدام نسخه از استاندارد ECMAScript کامپایل کند. انتخاب target مناسب بسیار مهم است زیرا بر سازگاری کد شما با محیط‌های هدف (مرورگرها، Node.js، و غیره) تأثیر می‌گذارد.

• "ES2015" (یا "ES6"): رایج‌ترین گزینه برای پروژه‌های مدرن وب که بسیاری از ویژگی‌های ES6 مانند const، let، arrow functions و classes را پشتیبانی می‌کنند.
• "ES5": برای پشتیبانی از مرورگرهای قدیمی‌تر یا محیط‌هایی که نیاز به سازگاری حداکثری دارند. این گزینه کد را به فرمت قدیمی‌تری کامپایل می‌کند.
• "ESNext": از جدیدترین ویژگی‌های ECMAScript پشتیبانی می‌کند که ممکن است هنوز به طور کامل استاندارد نشده باشند. برای پروژه‌هایی که فقط در محیط‌های بسیار مدرن اجرا می‌شوند.
• "ES2022"، "ES2021" و غیره: نسخه‌های خاص ECMAScript را هدف قرار می‌دهند.

مثال: "target": "ES2018"

انتخاب target معمولاً به پشتیبانی محیط ران‌تایم شما بستگی دارد. برای توسعه وب، ES2018 تا ES2020 انتخاب‌های خوبی هستند زیرا تعادل خوبی بین استفاده از ویژگی‌های مدرن و سازگاری برقرار می‌کنند.

2. module: سیستم ماژول خروجی

این گزینه نحوه تولید ماژول‌های جاوااسکریپت را تعیین می‌کند. سیستم‌های ماژول مختلفی در اکوسیستم جاوااسکریپت وجود دارند و انتخاب صحیح بر نحوه وارد کردن (import) و صادر کردن (export) کد شما تأثیر می‌گذارد.

• "CommonJS": سیستم ماژول پیش‌فرض Node.js (استفاده از require() و module.exports).
• "ESNext" (یا "ES2015"، "ES6"): ماژول‌های ECMAScript (استفاده از import و export). این گزینه برای پروژه‌های مدرن فرانت‌اند و بک‌اند توصیه می‌شود.
• "UMD" (Universal Module Definition): برای کتابخانه‌هایی که نیاز به پشتیبانی هم در محیط‌های CommonJS و هم در مرورگر (AMD) دارند.
• "Node16"، "NodeNext": گزینه‌های جدیدتر برای پروژه‌های Node.js که از ماژول‌های ES (ESM) به صورت بومی پشتیبانی می‌کنند.

مثال: "module": "CommonJS" (برای Node.js) یا "module": "ESNext" (برای پروژه‌های مدرن که از ابزارهای بیلد مانند Webpack یا Vite استفاده می‌کنند).

3. outDir: دایرکتوری خروجی

این گزینه مشخص می‌کند که فایل‌های جاوااسکریپت کامپایل شده (و فایل‌های .map) در کجا ذخیره شوند. معمولاً از نام‌هایی مانند dist یا build استفاده می‌شود.

مثال: "outDir": "./dist"

4. rootDir: دایرکتوری ریشه سورس کد

این گزینه مشخص می‌کند که فایل‌های سورس تایپ اسکریپت پروژه شما در کدام دایرکتوری قرار دارند. کامپایلر از این مسیر برای بازسازی ساختار دایرکتوری در outDir استفاده می‌کند.

مثال: "rootDir": "./src" (اگر سورس کد شما در پوشه src باشد).

5. strict: فعال کردن همه بررسی‌های نوع سخت‌گیرانه

فعال کردن strict یکی از مهم‌ترین گام‌ها برای بهره‌برداری کامل از قدرت تایپ اسکریپت است. این گزینه در واقع یک پرچم ترکیبی است که چندین گزینه بررسی نوع سخت‌گیرانه دیگر را فعال می‌کند، از جمله:

• noImplicitAny: خطا می‌دهد اگر متغیرها، پارامترها یا اعضای شیء دارای نوع any ضمنی باشند.
• strictNullChecks: خطا می‌دهد اگر سعی کنید از متغیری که می‌تواند null یا undefined باشد، بدون بررسی استفاده کنید.
• strictFunctionTypes: قواعد سخت‌گیرانه‌تری را برای انتساب توابع به یکدیگر اعمال می‌کند.
• strictPropertyInitialization: تضمین می‌کند که ویژگی‌های کلاس در سازنده مقداردهی اولیه شده‌اند.
• noImplicitThis: خطا می‌دهد اگر this ضمنی نوع any داشته باشد.
• useUnknownInCatchVariables: به صورت پیش‌فرض نوع متغیرهای catch را به unknown تغییر می‌دهد.

توصیه: همیشه "strict": true را فعال کنید. این کار به شما کمک می‌کند تا از بسیاری از خطاهای رایج جاوااسکریپت جلوگیری کنید و کد قابل اطمینان‌تری بنویسید.

مثال: "strict": true

6. esModuleInterop: سازگاری با ماژول‌های ES

این گزینه سازگاری بهتری بین ماژول‌های CommonJS (مانند آن‌هایی که در Node.js استفاده می‌شوند) و ماژول‌های ES (import/export) فراهم می‌کند. این کار با تولید کدهای کمکی برای مدیریت تفاوت‌های بین سیستم‌های ماژول انجام می‌شود. اکیداً توصیه می‌شود این گزینه را روی true تنظیم کنید.

مثال: "esModuleInterop": true

7. skipLibCheck: نادیده گرفتن بررسی نوع فایل‌های Declaration

این گزینه به کامپایلر می‌گوید که بررسی نوع فایل‌های .d.ts (فایل‌های اعلان نوع) موجود در node_modules را نادیده بگیرد. این کار می‌تواند زمان کامپایل را کاهش دهد، به خصوص در پروژه‌های بزرگ با وابستگی‌های زیاد. همچنین، از بروز خطاهای مربوط به تایپ‌های نادرست در کتابخانه‌های شخص ثالث جلوگیری می‌کند.

مثال: "skipLibCheck": true

8. sourceMap: تولید فایل‌های Source Map

این گزینه به کامپایلر دستور می‌دهد تا فایل‌های Source Map (نقشه سورس) تولید کند. فایل‌های Source Map (با پسوند .map) به دیباگرها اجازه می‌دهند تا کد کامپایل شده جاوااسکریپت را به سورس کد اصلی تایپ اسکریپت نگاشت کنند. این امر برای دیباگینگ بسیار حیاتی است، زیرا به شما امکان می‌دهد خطاهای زمان اجرا را مستقیماً در کد تایپ اسکریپت خود مشاهده کنید.

مثال: "sourceMap": true

9. include و exclude: فایل‌های مورد نظر برای کامپایل

این گزینه‌ها به کامپایلر می‌گویند کدام فایل‌ها را شامل (include) و کدام فایل‌ها را از (exclude) فرآیند کامپایل خارج کند. این کار به مدیریت بهینه پروژه و جلوگیری از کامپایل فایل‌های غیرضروری کمک می‌کند.

• include: یک آرایه از الگوهای glob که فایل‌ها و دایرکتوری‌هایی را مشخص می‌کند که باید در پروژه تایپ اسکریپت شامل شوند.

  مثال: "include": ["src/**/*.ts"] (همه فایل‌های .ts در دایرکتوری src و زیردایرکتوری‌های آن)

• exclude: یک آرایه از الگوهای glob که فایل‌ها و دایرکتوری‌هایی را مشخص می‌کند که باید از پروژه تایپ اسکریپت حذف شوند. node_modules به صورت پیش‌فرض حذف می‌شود.

  مثال: "exclude": ["node_modules", "dist"]

یک tsconfig.json پایه و مناسب:

با در نظر گرفتن گزینه‌های بالا، یک فایل tsconfig.json پایه و کاربردی برای اکثر پروژه‌های مدرن به شکل زیر خواهد بود:

{
  "compilerOptions": {
    "target": "ES2020",                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', 'ES2022', 'ESNext'. */
    "module": "ESNext",                /* Specify module code generation: 'none', 'CommonJS', 'AMD', 'System', 'UMD', 'ES6', 'ES2015', 'ES2020', 'ES2022', 'ESNext', 'Node16', 'NodeNext'. */
    "outDir": "./dist",                /* Redirect output structure to the directory. */
    "rootDir": "./src",                /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    "strict": true,                    /* Enable all strict type-checking options. */
    "esModuleInterop": true,           /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "skipLibCheck": true,              /* Skip type checking all .d.ts files. */
    "forceConsistentCasingInFileNames": true, /* Ensure that casing is consistent everywhere. This prevents issues with different file systems. */
    "sourceMap": true,                 /* Generates corresponding '.map' file. */
    "declaration": true,               /* Generates corresponding '.d.ts' file. */
    "declarationMap": true,            /* Generates a sourcemap for declaration files. */
    "noEmitOnError": true,             /* Do not emit outputs if any errors were reported. */
    "moduleResolution": "node"         /* Specify how modules are resolved. 'node' for Node.js projects, 'bundler' for newer bundlers. */
  },
  "include": [
    "src/**/*.ts"                      /* Include all .ts files in the src directory and its subdirectories. */
  ],
  "exclude": [
    "node_modules",                    /* Exclude node_modules directory. */
    "**/*.spec.ts"                     /* Exclude test files. */
  ]
}

پیکربندی دقیق tsconfig.json از اهمیت بالایی برخوردار است، زیرا مستقیماً بر کیفیت کد کامپایل شده، تجربه توسعه‌دهنده و کارایی پروژه شما تأثیر می‌گذارد.

اولین کد Type-Safe شما: Hello TypeScript!

اکنون که محیط توسعه خود را آماده کرده‌اید و tsconfig.json را پیکربندی نموده‌اید، زمان آن رسیده است که اولین کد تایپ‌سیف (Type-Safe) خود را بنویسید و آن را کامپایل کنید. این مثال ساده، نحوه عملکرد پایه‌ای تایپ اسکریپت را به نمایش می‌گذارد و به شما کمک می‌کند تا با چرخه توسعه آن آشنا شوید.

ساخت فایل سورس کد

با توجه به تنظیمات tsconfig.json که "rootDir": "./src" را مشخص کردیم، ابتدا یک دایرکتوری به نام src در ریشه پروژه خود ایجاد کنید. سپس، یک فایل جدید به نام index.ts در داخل دایرکتوری src بسازید:

mkdir src
touch src/index.ts

حال، فایل src/index.ts را در ویرایشگر کد خود باز کرده و کد زیر را در آن قرار دهید:

// src/index.ts

/**
 * تابعی برای تولید یک پیام تبریک تایپ‌سیف.
 * @param name نام شخص.
 * @param age سن شخص (اختیاری).
 * @returns یک رشته پیام تبریک.
 */
function greet(name: string, age?: number): string {
    if (typeof name !== 'string') {
        console.error("خطا: ورودی 'name' باید از نوع string باشد.");
        // در یک برنامه واقعی، در اینجا می‌توانستیم یک خطا پرتاب کنیم یا مقدار پیش‌فرض برگردانیم.
        // برای سادگی، فعلاً یک رشته خالی برمی‌گردانیم.
        return "";
    }

    let greetingMessage: string = `سلام، ${name}!`;

    if (age !== undefined) {
        if (typeof age !== 'number' || isNaN(age)) {
            console.warn(`هشدار: ورودی 'age' نامعتبر است. سن معتبر: ${age}`);
            // می‌توانستیم منطق خطا یا مقدار پیش‌فرض بیشتری در اینجا اضافه کنیم.
        } else {
            greetingMessage += ` شما ${age} سال دارید.`;
        }
    }

    return greetingMessage;
}

// استفاده صحیح:
const user1Name: string = "علی";
const user1Age: number = 30;
const message1: string = greet(user1Name, user1Age);
console.log(message1); // خروجی: سلام، علی! شما 30 سال دارید.

// استفاده با پارامتر اختیاری:
const user2Name = "فاطمه"; // تایپ اسکریپت به صورت خودکار 'string' را استنتاج می کند
const message2 = greet(user2Name);
console.log(message2); // خروجی: سلام، فاطمه!

// مثال از خطای نوع (که توسط کامپایلر تشخیص داده می شود):
// اگر این خطوط را از کامنت خارج کنید، تایپ اسکریپت خطای نوع را نشان می دهد
// const invalidName: number = 123;
// const message3 = greet(invalidName); // خطای کامپایل: Argument of type 'number' is not assignable to parameter of type 'string'.

// مثال دیگر از خطای نوع:
// const message4 = greet("رضا", "سی سال"); // خطای کامپایل: Argument of type 'string' is not assignable to parameter of type 'number | undefined'.

// مثال از تایپ‌سیفتی برای متغیرها:
let counter: number = 0;
counter = 10;
// counter = "بیست"; // خطای کامپایل: Type '"بیست"' is not assignable to type 'number'.

// استفاده از Union Types
type Status = "active" | "inactive" | "pending";
let currentStatus: Status = "active";
// currentStatus = "blocked"; // خطای کامپایل: Type '"blocked"' is not assignable to type 'Status'.

// استفاده از Interface
interface User {
    id: number;
    username: string;
    email: string;
    isActive: boolean;
}

const newUser: User = {
    id: 1,
    username: "amin_m",
    email: "amin@example.com",
    isActive: true
};

console.log(`کاربر جدید: ${newUser.username}, وضعیت: ${newUser.isActive ? 'فعال' : 'غیرفعال'}`);

// مثالی از خطای نوع در Interface
// const incompleteUser: User = {
//     id: 2,
//     username: "sara_k"
//     // خطای کامپایل: Property 'email' is missing in type '{ id: number; username: string; }'
//     // but required in type 'User'.
// };

در این کد، ما چندین مفهوم اساسی تایپ اسکریپت را به کار برده‌ایم:

• name: string: پارامتر name صریحاً به عنوان یک رشته (string) تعریف شده است. تایپ اسکریپت تضمین می‌کند که شما فقط می‌توانید یک رشته به این پارامتر ارسال کنید.
• age?: number: پارامتر age به عنوان یک عدد (number) تعریف شده و علامت سوال (?) نشان می‌دهد که این پارامتر اختیاری است. یعنی می‌توان آن را ارسال نکرد.
• (): string: بعد از پرانتزهای تابع، : string نشان می‌دهد که این تابع همیشه یک مقدار از نوع رشته برمی‌گرداند.
• const user1Name: string = "علی";: تعریف صریح نوع برای یک متغیر. هرچند تایپ اسکریپت می‌تواند بسیاری از انواع را استنتاج کند، اما تعریف صریح گاهی به خوانایی و وضوح کد کمک می‌کند.
• کامنت‌های خطایابی: خطوطی که با کامنت شروع شده‌اند (// const invalidName: number = 123;) مثال‌هایی از خطاهای نوع هستند که تایپ اسکریپت آن‌ها را تشخیص می‌دهد و از کامپایل کد جلوگیری می‌کند. اگر این خطوط را از حالت کامنت خارج کنید، در زمان کامپایل با خطا مواجه خواهید شد.
• Union Types: استفاده از type Status = "active" | "inactive" | "pending"; که نشان می‌دهد متغیر currentStatus فقط می‌تواند یکی از این سه مقدار رشته‌ای را بپذیرد.
• Interface: تعریف ساختار یک شیء با استفاده از interface User { ... } که به تایپ اسکریپت اجازه می‌دهد تا مطمئن شود اشیائی که به عنوان User تعریف می‌شوند، تمام ویژگی‌های لازم را دارا هستند.

کامپایل کردن کد

حالا که کد تایپ اسکریپت خود را نوشته‌اید، باید آن را به جاوااسکریپت کامپایل کنید تا قابل اجرا باشد. به دایرکتوری ریشه پروژه خود (جایی که package.json و tsconfig.json قرار دارند) برگردید و دستور زیر را اجرا کنید:

npm run build
# یا با Yarn:
# yarn build

این دستور اسکریپت build تعریف شده در package.json را اجرا می‌کند که به نوبه خود tsc (کامپایلر تایپ اسکریپت) را فراخوانی می‌کند. tsc فایل src/index.ts را می‌خواند، بررسی‌های نوع را انجام می‌دهد و در صورت عدم وجود خطا، فایل جاوااسکریپت کامپایل شده را در دایرکتوری dist (طبق تنظیم outDir در tsconfig.json) ایجاد می‌کند. همچنین، با توجه به تنظیم sourceMap: true، یک فایل .map نیز برای دیباگینگ تولید می‌شود.

پس از موفقیت‌آمیز بودن کامپایل، باید ساختار دایرکتوری زیر را داشته باشید:

my-typescript-project/
├── node_modules/
├── src/
│   └── index.ts
├── dist/
│   ├── index.js
│   └── index.js.map
├── package.json
├── tsconfig.json
└── ...

فایل dist/index.js حاوی کد جاوااسکریپت کامپایل شده شما خواهد بود که شبیه به این است:

// dist/index.js

/**
 * تابعی برای تولید یک پیام تبریک تایپ‌سیف.
 * @param name نام شخص.
 * @param age سن شخص (اختیاری).
 * @returns یک رشته پیام تبریک.
 */
function greet(name, age) {
    if (typeof name !== 'string') {
        console.error("خطا: ورودی 'name' باید از نوع string باشد.");
        // در یک برنامه واقعی، در اینجا می‌توانستیم یک خطا پرتاب کنیم یا مقدار پیش‌فرض برگردانیم.
        // برای سادگی، فعلاً یک رشته خالی برمی‌گردانیم.
        return "";
    }
    let greetingMessage = `سلام، ${name}!`;
    if (age !== undefined) {
        if (typeof age !== 'number' || isNaN(age)) {
            console.warn(`هشدار: ورودی 'age' نامعتبر است. سن معتبر: ${age}`);
            // می‌توانستیم منطق خطا یا مقدار پیش‌فرض بیشتری در اینجا اضافه کنیم.
        }
        else {
            greetingMessage += ` شما ${age} سال دارید.`;
        }
    }
    return greetingMessage;
}
// استفاده صحیح:
const user1Name = "علی";
const user1Age = 30;
const message1 = greet(user1Name, user1Age);
console.log(message1);
// استفاده با پارامتر اختیاری:
const user2Name = "فاطمه"; // تایپ اسکریپت به صورت خودکار 'string' را استنتاج می کند
const message2 = greet(user2Name);
console.log(message2);
// مثال از خطای نوع (که توسط کامپایلر تشخیص داده می شود):
// اگر این خطوط را از کامنت خارج کنید، تایپ اسکریپت خطای نوع را نشان می دهد
// const invalidName: number = 123;
// const message3 = greet(invalidName); // خطای کامپایل: Argument of type 'number' is not assignable to parameter of type 'string'.
// مثال دیگر از خطای نوع:
// const message4 = greet("رضا", "سی سال"); // خطای کامپایل: Argument of type 'string' is not assignable to parameter of type 'number | undefined'.
// مثال از تایپ‌سیفتی برای متغیرها:
let counter = 0;
counter = 10;
// counter = "بیست"; // خطای کامpایل: Type '"بیست"' is not assignable to type 'number'.
// استفاده از Union Types
let currentStatus = "active";
// currentStatus = "blocked"; // خطای کامپایل: Type '"blocked"' is not assignable to type 'Status'.
const newUser = {
    id: 1,
    username: "amin_m",
    email: "amin@example.com",
    isActive: true
};
console.log(`کاربر جدید: ${newUser.username}, وضعیت: ${newUser.isActive ? 'فعال' : 'غیرفعال'}`);
// مثالی از خطای نوع در Interface
// const incompleteUser: User = {
//     id: 2,
//     username: "sara_k"
//     // خطای کامپایل: Property 'email' is missing in type '{ id: number; username: string; }'
//     // but required in type 'User'.
// };
//# sourceMappingURL=index.js.map

همانطور که مشاهده می‌کنید، تایپ‌های اضافه شده در تایپ اسکریپت از کد جاوااسکریپت کامپایل شده حذف شده‌اند، زیرا جاوااسکریپت از نوع‌دهی ایستا پشتیبانی نمی‌کند. این یک جنبه کلیدی تایپ اسکریپت است: بررسی نوع فقط در زمان توسعه و کامپایل اتفاق می‌افتد و در زمان اجرا اثری از آن‌ها نیست.

اجرای کد کامپایل شده

برای اجرای فایل جاوااسکریپت کامپایل شده، از دستور node استفاده کنید:

node dist/index.js

شما باید خروجی‌های console.log را در ترمینال مشاهده کنید:

سلام، علی! شما 30 سال دارید.
سلام، فاطمه!
کاربر جدید: amin_m, وضعیت: فعال

تبریک می‌گوییم! شما با موفقیت اولین کد تایپ‌سیف خود را نوشتید، آن را کامپایل کردید و اجرا نمودید. این مراحل، هسته اصلی هر پروژه تایپ اسکریپت را تشکیل می‌دهند.

پیکربندی پیشرفته کامپایلر TypeScript: فراتر از تنظیمات پایه

فایل tsconfig.json قدرت باورنکردنی در کنترل رفتار کامپایلر تایپ اسکریپت ارائه می‌دهد. در بخش‌های قبلی به مهم‌ترین گزینه‌ها پرداختیم، اما تایپ اسکریپت ده‌ها گزینه پیکربندی دیگر دارد که می‌توانند برای سناریوهای خاص توسعه، بهینه‌سازی‌ها و کنترل‌های بیشتری را فراهم کنند. درک این گزینه‌ها برای پروژه‌های بزرگ‌تر، کتابخانه‌ها و محیط‌های توسعه پیچیده‌تر ضروری است.

برخی از گزینه‌های پیشرفته compilerOptions:

1. lib: کتابخانه‌های استاندارد

این گزینه مشخص می‌کند که کدام مجموعه از فایل‌های تعریف نوع (typings) استاندارد در دامنه پروژه شما قرار گیرند. این فایل‌ها شامل تعاریف API‌های مرورگر (DOM)، Node.js، ECMAScript و غیره می‌شوند. تایپ اسکریپت به صورت پیش‌فرض بر اساس مقدار target شما، مجموعه‌ای از lib را اضافه می‌کند، اما می‌توانید آن را به صورت دستی کنترل کنید.

• "ES2020": شامل تایپ‌های مربوط به ویژگی‌های ES2020.
• "DOM": شامل تایپ‌های مربوط به Document Object Model مرورگر.
• "WebWorker": شامل تایپ‌های مربوط به Web Workers.
• "DOM.Iterable": برای متدهای Symbol.iterator روی اشیای DOM.

مثال: "lib": ["ES2020", "DOM"] (برای یک پروژه فرانت‌اند مدرن)

2. jsx و jsxFactory: پشتیبانی از JSX/TSX

اگر با فریمورک‌هایی مانند React یا Preact کار می‌کنید که از JSX (یا TSX در تایپ اسکریپت) استفاده می‌کنند، این گزینه ضروری است.

• "react": کامپایل JSX به React.createElement.
• "preserve": JSX را بدون تغییر حفظ می‌کند (برای اینکه یک ابزار بیلد دیگر آن را پردازش کند).
• "react-jsx" و "react-jsxdev": گزینه‌های جدیدتر برای JSX Runtime در React 17+.

مثال: "jsx": "react-jsx"

jsxFactory: اگر از یک فریمورک جایگزین React استفاده می‌کنید (مثلاً Preact)، می‌توانید نام تابع سازنده JSX را در اینجا مشخص کنید، مثلاً "jsxFactory": "h" برای Preact.

3. allowJs و checkJs: ادغام جاوااسکریپت

این گزینه‌ها به شما اجازه می‌دهند که فایل‌های جاوااسکریپت را در یک پروژه تایپ اسکریپت ادغام کنید:

• "allowJs": true: به کامپایلر اجازه می‌دهد فایل‌های .js را در کنار فایل‌های .ts پردازش کند و آن‌ها را در خروجی قرار دهد.
• "checkJs": true: فعال کردن بررسی‌های نوع برای فایل‌های .js در پروژه شما. این قابلیت به شما امکان می‌دهد از مزایای بررسی نوع تایپ اسکریپت حتی در فایل‌های جاوااسکریپت خود با استفاده از JSDoc بهره‌مند شوید.

مثال: "allowJs": true, "checkJs": true

4. declaration و declarationMap: تولید فایل‌های اعلان (.d.ts)

هنگامی که شما یک کتابخانه یا ماژول تایپ اسکریپت می‌نویسید، سایر پروژه‌های تایپ اسکریپت برای استفاده از کد شما نیاز به فایل‌های تعریف نوع (.d.ts) دارند. این فایل‌ها صرفاً حاوی اطلاعات نوع هستند و هیچ کد اجرایی ندارند.

• "declaration": true: به کامپایلر می‌گوید که فایل‌های .d.ts را برای هر فایل تایپ اسکریپت کامپایل شده تولید کند.
• "declarationMap": true: یک Source Map برای فایل‌های .d.ts تولید می‌کند که به ابزارهای دیباگینگ کمک می‌کند تا به سورس کد اصلی نگاشت کنند.

مثال: "declaration": true, "declarationMap": true

5. noEmitOnError: جلوگیری از انتشار در صورت خطا

این گزینه مشخص می‌کند که اگر خطاهای نوعی در پروژه وجود داشته باشد، کامپایلر هیچ فایلی را (نه JavaScript، نه Source Map، نه Declaration) در دایرکتوری خروجی منتشر نکند. این امر به جلوگیری از انتشار کدهای دارای خطا کمک می‌کند و یک شیوه خوب برای پایپ‌لاین‌های CI/CD است.

مثال: "noEmitOnError": true

6. moduleResolution: استراتژی حل ماژول

این گزینه به کامپایلر می‌گوید که چگونه ماژول‌ها را پیدا کند. دو استراتژی اصلی وجود دارد:

• "node": شبیه‌سازی مکانیزم حل ماژول Node.js. این برای پروژه‌های Node.js یا پروژه‌های فرانت‌اند که از ابزارهای بیلد مبتنی بر Node.js (مانند Webpack) استفاده می‌کنند، مناسب است.
• "bundler": برای ابزارهای باندلر مدرن مانند Vite یا Rollup که روش حل ماژول مخصوص به خود را دارند. این گزینه معمولاً عملکرد بهتری دارد و در تایپ اسکریپت 5.x و بالاتر توصیه می‌شود.

مثال: "moduleResolution": "node" یا "moduleResolution": "bundler"

7. baseUrl و paths: مسیرهای مطلق و میانبر

این گزینه‌ها به شما امکان می‌دهند مسیرهای مطلق (absolute paths) را برای وارد کردن ماژول‌ها تعریف کنید که می‌تواند مدیریت واردات را ساده‌تر کند و از “callback hell” جلوگیری کند.

• "baseUrl": دایرکتوری ریشه‌ای که از آنجا مسیرهای ماژول غیرمطلق باید حل شوند.

  مثال: "baseUrl": "./src"

• "paths": نقشه‌نگاری از مسیرهای ماژول به مسیرهای واقعی در سیستم فایل. این قابلیت برای ایجاد میانبر (aliases) برای مسیرهای طولانی مفید است.

  مثال:

  "paths": {
            "@utils/*": ["./src/utils/*"],
            "@models/*": ["./src/models/*"]
          }
          

  اکنون می‌توانید به جای import { SomeUtil } from '../../utils/someUtil'; بنویسید: import { SomeUtil } from '@utils/someUtil';.

گزینه‌های Root tsconfig.json:

1. extends: وراثت پیکربندی

این گزینه به شما امکان می‌دهد یک فایل tsconfig.json دیگر را گسترش دهید. این قابلیت برای پروژه‌های بزرگ با چندین پکیج (monorepos) یا برای به اشتراک گذاشتن پیکربندی‌های استاندارد در سراسر سازمان بسیار مفید است. شما می‌توانید یک پیکربندی پایه ایجاد کنید و سپس پیکربندی‌های خاص پروژه را بر اساس آن بسازید.

مثال: "extends": "../../tsconfig.base.json"

2. references: ارجاع به پروژه‌ها

این گزینه به شما امکان می‌دهد چندین پروژه تایپ اسکریپت را به هم مرتبط کنید. این قابلیت برای ساختن پروژه‌های بزرگ به صورت گام به گام (incremental builds) و مدیریت وابستگی‌های بین زیرپروژه‌ها بهینه شده است. هر پروژه می‌تواند کامپایل و نوع‌دهی مستقل خود را داشته باشد، اما تایپ اسکریپت از وابستگی‌های بین آن‌ها آگاه است.

مثال:

"references": [
    { "path": "../common" },
    { "path": "../core" }
]

حالت Watch (پایش تغییرات):

برای توسعه سریع، می‌توانید کامپایلر تایپ اسکریپت را در حالت “watch” اجرا کنید. در این حالت، tsc به طور مداوم فایل‌های سورس شما را برای تغییرات پایش می‌کند و در صورت بروز تغییر، به صورت خودکار آن‌ها را کامپایل مجدد می‌کند. این کار نیاز به اجرای دستی npm run build پس از هر تغییر را از بین می‌برد.

برای فعال کردن watch mode، می‌توانید یک اسکریپت جدید در package.json اضافه کنید:

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js",
    "dev": "tsc --watch"
  }
}

سپس، با اجرای npm run dev، کامپایلر در پس‌زمینه اجرا شده و به تغییرات واکنش نشان می‌دهد.

پیکربندی پیشرفته tsconfig.json به شما امکان می‌دهد تا کامپایلر تایپ اسکریپت را به طور دقیق برای نیازهای پروژه خود تنظیم کنید، که منجر به فرآیند توسعه کارآمدتر و نتایج کد با کیفیت بالاتر می‌شود.

ادغام تایپ اسکریپت با ابزارهای بیلد: بهینه‌سازی فرآیند توسعه

در پروژه‌های جاوااسکریپت و تایپ اسکریپت مدرن، استفاده از ابزارهای بیلد (Bundlers) تقریباً اجتناب‌ناپذیر است. این ابزارها وظایف متعددی را بر عهده دارند، از جمله ترکیب ماژول‌ها، تبدیل کد (Transpilation)، بهینه‌سازی‌ها (مانند Minification) و مدیریت Assetها. ادغام تایپ اسکریپت با این ابزارها، یک فرآیند بیلد قدرتمند و انعطاف‌پذیر را ایجاد می‌کند.

Webpack: ابزار بیلد قدرتمند و محبوب

Webpack یکی از پرکاربردترین ابزارهای بیلد برای برنامه‌های جاوااسکریپت، به خصوص در توسعه فرانت‌اند است. برای ادغام تایپ اسکریپت با Webpack، از ts-loader استفاده می‌شود. ts-loader به Webpack اجازه می‌دهد تا فایل‌های .ts و .tsx را پردازش کند.

مراحل ادغام Webpack با TypeScript:

1. نصب وابستگی‌ها:

   ابتدا، Webpack و ts-loader را به عنوان وابستگی‌های توسعه نصب کنید:

   npm install --save-dev webpack webpack-cli ts-loader typescript
           # یا با Yarn:
           # yarn add --dev webpack webpack-cli ts-loader typescript
           

2. ایجاد webpack.config.js:

   در دایرکتوری ریشه پروژه خود، یک فایل به نام webpack.config.js ایجاد کنید و پیکربندی زیر را در آن قرار دهید:

   // webpack.config.js
   
   const path = require('path');
   
   module.exports = {
     mode: 'development', // یا 'production'
     entry: './src/index.ts', // نقطه ورودی برنامه تایپ اسکریپت
     output: {
       filename: 'bundle.js', // نام فایل خروجی باندل شده
       path: path.resolve(__dirname, 'dist'), // دایرکتوری خروجی
       clean: true, // هر بار که بیلد می کنید، دایرکتوری خروجی را پاک می کند
     },
     resolve: {
       extensions: ['.ts', '.js'], // پسوندهای فایل هایی که Webpack باید حل کند
     },
     module: {
       rules: [
         {
           test: /\.ts$/, // تمام فایل های با پسوند .ts را هدف قرار می دهد
           use: 'ts-loader', // از ts-loader برای پردازش این فایل ها استفاده می کند
           exclude: /node_modules/, // node_modules را از پردازش مستثنی می کند
         },
       ],
     },
     devtool: 'inline-source-map', // برای تولید Source Map ها (اختیاری)
   };
           

   توضیح پیکربندی:

   • entry: './src/index.ts': مشخص می‌کند که فایل index.ts در src نقطه شروع بیلد است.
   • output: تعیین می‌کند که فایل باندل شده (bundle.js) در دایرکتوری dist ذخیره شود.
   • resolve.extensions: به Webpack می‌گوید که هنگام حل ماژول‌ها، پسوندهای .ts و .js را نیز در نظر بگیرد. این به شما اجازه می‌دهد که از import './myModule' به جای import './myModule.ts' استفاده کنید.
   • module.rules: حاوی قوانین لودرها است. در اینجا، یک قانون برای فایل‌های .ts تعریف شده که از ts-loader برای پردازش آن‌ها استفاده می‌کند.
   • devtool: 'inline-source-map': برای تولید Source Mapها در حالت توسعه مفید است که به دیباگینگ کد اصلی تایپ اسکریپت در مرورگر کمک می‌کند.
3. تنظیم tsconfig.json برای Webpack:

   برای اینکه ts-loader و Webpack به درستی کار کنند، باید تنظیم module در tsconfig.json را به یک گزینه سازگار با باندلرها مانند "ESNext" یا "CommonJS" تغییر دهید.

   {
             "compilerOptions": {
               // ... سایر تنظیمات
               "module": "ESNext", // مهم: Webpack خودش ماژول ها را باندل می کند
               "noEmit": true, // مهم: به tsc بگویید فایل های js تولید نکند، Webpack این کار را می کند
               // ...
             }
             // ...
           }
           

   نکته مهم: "noEmit": true در tsconfig.json به کامپایلر تایپ اسکریپت می‌گوید که فایل‌های جاوااسکریپت را تولید نکند. این کار را Webpack (یا هر باندلر دیگری) از طریق لودر خود انجام می‌دهد. وظیفه tsc در اینجا فقط بررسی نوع و تولید فایل‌های اعلان (.d.ts) است.

4. اضافه کردن اسکریپت بیلد به package.json:

   در نهایت، یک اسکریپت برای اجرای Webpack در package.json اضافه کنید:

   {
             "scripts": {
               "build": "webpack",
               "start": "node dist/bundle.js"
             },
             // ...
           }
           

   حالا با اجرای npm run build (یا yarn build)، Webpack فایل‌های تایپ اسکریپت شما را از طریق ts-loader پردازش کرده و یک فایل bundle.js کامپایل شده در dist ایجاد می‌کند.

Vite: ابزار بیلد سریع و مدرن

Vite یک ابزار بیلد نسل جدید است که بر روی ESM (ES Modules) بومی مرورگر در زمان توسعه و Rollup برای بیلد تولید (production build) متمرکز است. Vite به دلیل سرعت بسیار بالا در زمان توسعه (به دلیل عدم نیاز به باندل کردن در زمان توسعه) به شدت محبوب شده است.

نحوه استفاده از Vite با TypeScript:

Vite به صورت بومی از تایپ اسکریپت پشتیبانی می‌کند، بنابراین راه‌اندازی آن بسیار ساده‌تر از Webpack است.

1. ایجاد پروژه Vite:

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

   npm create vite@latest my-vite-ts-app -- --template vanilla-ts
           # یا برای React با TypeScript:
           # npm create vite@latest my-vite-react-ts-app -- --template react-ts
           # یا برای Vue با TypeScript:
           # npm create vite@latest my-vite-vue-ts-app -- --template vue-ts
           

   این دستور یک پروژه Vite با پیکربندی اولیه تایپ اسکریپت و یک فایل tsconfig.json از پیش تنظیم شده ایجاد می‌کند.

2. تنظیم tsconfig.json (اختیاری):

   فایل tsconfig.json تولید شده توسط Vite معمولاً شامل تنظیماتی مانند "target": "ESNext" و "module": "ESNext" است که برای ESM بومی مرورگر مناسب است. نیازی به تنظیم "noEmit": true نیست، زیرا Vite از esbuild برای Transpilation استفاده می‌کند که بسیار سریع است و به صورت خودکار فایل‌های .js را تولید نمی‌کند.

   شما همچنان می‌توانید گزینه‌های strict و paths و سایر گزینه‌های مورد نظر خود را در این فایل تنظیم کنید.

3. اسکریپت‌های package.json:

   Vite به صورت خودکار اسکریپت‌های زیر را در package.json ایجاد می‌کند:

   {
             "scripts": {
               "dev": "vite",        // برای شروع سرور توسعه
               "build": "tsc && vite build", // برای بیلد تولید (ابتدا بررسی نوع tsc، سپس بیلد vite)
               "preview": "vite preview" // برای پیش نمایش بیلد تولید
             },
             // ...
           }
           

   با اجرای npm run dev، Vite سرور توسعه را شروع می‌کند و شما می‌توانید تغییرات کد تایپ اسکریپت خود را به صورت زنده مشاهده کنید. برای بیلد تولید، npm run build را اجرا کنید که ابتدا tsc را برای بررسی نوع اجرا می‌کند و سپس Vite (با استفاده از Rollup) کد شما را برای تولید باندل می‌کند.

استفاده از ابزارهای بیلد مانند Webpack و Vite فرآیند توسعه با تایپ اسکریپت را به میزان قابل توجهی بهبود می‌بخشد، به خصوص در پروژه‌های بزرگ و برنامه‌های تک‌صفحه‌ای (SPA).

استفاده از ابزارهای کمکی و اکستنشن‌ها: افزایش بهره‌وری

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

ESLint با تایپ اسکریپت: کیفیت و یکپارچگی کد

ESLint یک ابزار تجزیه و تحلیل کد استاتیک (Static Code Analysis) است که به شما کمک می‌کند مشکلات را در کد خود شناسایی کنید، از جمله خطاهای برنامه‌نویسی، مشکلات سبک (style issues) و نقض استانداردها. ادغام ESLint با تایپ اسکریپت برای حفظ کیفیت و یکپارچگی کد در پروژه‌های بزرگ ضروری است.

مراحل راه‌اندازی ESLint با تایپ اسکریپت:

1. نصب وابستگی‌ها:

   برای استفاده از ESLint با تایپ اسکریپت، به بسته‌های زیر نیاز دارید:

   • eslint: هسته ESLint.
   • @typescript-eslint/parser: پارسر ESLint برای کدهای تایپ اسکریپت.
   • @typescript-eslint/eslint-plugin: پلاگین ESLint با قوانین خاص تایپ اسکریپت.

   npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
           # یا با Yarn:
           # yarn add --dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
           

2. پیکربندی ESLint (.eslintrc.js):

   در ریشه پروژه خود، یک فایل .eslintrc.js (یا .eslintrc.json) ایجاد کنید و آن را به صورت زیر پیکربندی کنید:

   // .eslintrc.js
   
   module.exports = {
     root: true, // این پیکربندی را به ریشه پروژه محدود می کند
     parser: '@typescript-eslint/parser', // استفاده از پارسر TypeScript برای ESLint
     plugins: [
       '@typescript-eslint', // فعال کردن پلاگین TypeScript
     ],
     extends: [
       'eslint:recommended', // مجموعه قوانین پیشنهادی ESLint
       'plugin:@typescript-eslint/recommended', // مجموعه قوانین پیشنهادی TypeScript ESLint
       // اگر از React استفاده می کنید:
       // 'plugin:react/recommended',
       // 'plugin:react-hooks/recommended',
       // اگر از Prettier استفاده می کنید (باید آخرین مورد باشد):
       // 'prettier',
       // 'plugin:prettier/recommended'
     ],
     rules: {
       // قوانین سفارشی شما
       // مثال:
       // '@typescript-eslint/explicit-module-boundary-types': 'off', // برای خاموش کردن قانون اجبار به تعریف صریح نوع برای توابع Export شده
       // '@typescript-eslint/no-explicit-any': 'warn', // اجازه دادن به 'any' اما با هشدار
       // 'no-console': 'warn' // هشدار برای console.log
     },
     settings: {
       // اگر از React استفاده می کنید و نسخه React را مشخص کنید:
       // react: {
       //   version: 'detect',
       // },
     },
   };
           

   توضیح پیکربندی:

   • parser: مشخص می‌کند که ESLint از کدام پارسر برای تجزیه کد شما استفاده کند (در اینجا پارسر تایپ اسکریپت).
   • plugins: پلاگین‌های ESLint را فعال می‌کند.
   • extends: مجموعه‌ای از قوانین از پیش تعریف شده را بارگذاری می‌کند. plugin:@typescript-eslint/recommended شامل بهترین روش‌های پیشنهادی برای کدهای تایپ اسکریپت است.
   • rules: به شما امکان می‌دهد قوانین پیش‌فرض را لغو کنید یا قوانین سفارشی خود را تعریف کنید.
3. اضافه کردن اسکریپت Lint به package.json:

   یک اسکریپت برای اجرای ESLint در package.json اضافه کنید:

   {
             "scripts": {
               "lint": "eslint \"{src,apps,libs}/**/*.ts\" --fix"
             },
             // ...
           }
           

   با اجرای npm run lint (یا yarn lint)، ESLint کد شما را بررسی می‌کند. گزینه --fix سعی می‌کند مشکلات قابل رفع را به صورت خودکار اصلاح کند.

Prettier: فرمت‌بندی خودکار کد

Prettier یک ابزار فرمت‌بندی کد است که به طور خودکار کد شما را بر اساس مجموعه‌ای از قوانین ثابت فرمت می‌کند. استفاده از Prettier در کنار ESLint (که در آن Prettier به عنوان یک قانون ESLint اجرا می‌شود یا با یک پلاگین ESLint-Prettier) به حفظ یکپارچگی استایل کد در یک تیم کمک می‌کند و درگیری‌های مربوط به فرمت‌بندی را از بین می‌برد.

مراحل راه‌اندازی Prettier با تایپ اسکریپت:

1. نصب وابستگی‌ها:

   npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
           # یا با Yarn:
           # yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier
           

   • prettier: هسته Prettier.
   • eslint-config-prettier: پیکربندی ESLint که قوانین Prettier را غیرفعال می‌کند تا با ESLint تداخل نداشته باشند.
   • eslint-plugin-prettier: پلاگین ESLint که Prettier را به عنوان یک قانون ESLint اجرا می‌کند.
2. پیکربندی .eslintrc.js برای Prettier:

   بخش extends در .eslintrc.js خود را به‌روز کنید تا prettier و plugin:prettier/recommended را در انتهای لیست اضافه کنید (این بسیار مهم است که آن‌ها آخرین ورودی باشند تا قوانین Prettier بر سایر قوانین غالب شوند):

   // .eslintrc.js (بخشی از فایل)
   
     extends: [
       'eslint:recommended',
       'plugin:@typescript-eslint/recommended',
       'prettier', // باید قبل از plugin:prettier/recommended باشد
       'plugin:prettier/recommended' // باید آخرین مورد باشد
     ],
   

3. ایجاد فایل پیکربندی Prettier (اختیاری):

   می‌توانید یک فایل .prettierrc.json (یا .prettierrc.js) در ریشه پروژه خود ایجاد کنید تا قوانین فرمت‌بندی Prettier را سفارشی کنید:

   // .prettierrc.json
   
   {
     "semi": true,          // پایان خطوط با ;
     "trailingComma": "all", // کامای اضافی در انتهای آرایه ها و آبجکت ها
     "singleQuote": true,   // استفاده از ' به جای "
     "printWidth": 100,     // حداکثر طول خط
     "tabWidth": 2,         // تعداد فضاها برای یک تب
     "arrowParens": "avoid" // حذف پرانتز در Arrow function تک پارامتر
   }
           

4. ادغام با VS Code:

   اکستنشن Prettier برای VS Code را نصب کنید و آن را برای فرمت‌بندی خودکار هنگام ذخیره فایل تنظیم کنید ("editor.formatOnSave": true در تنظیمات VS Code).

اکستنشن‌های VS Code (تکمیل):

علاوه بر ESLint و Prettier، برخی اکستنشن‌های دیگر VS Code می‌توانند به شما در توسعه با تایپ اسکریپت کمک کنند:

• Debugger for Chrome/Edge: برای دیباگ کردن کد تایپ اسکریپت در مرورگرها (با استفاده از Source Mapها).
• GitLens: برای مشاهده اطلاعات Git در کنار کد.
• Path Intellisense: تکمیل خودکار مسیر فایل‌ها.
• Auto Rename Tag: تغییر نام خودکار تگ‌های HTML/JSX/TSX.

استفاده از این ابزارها و اکستنشن‌ها، به خصوص ESLint و Prettier، به شدت توصیه می‌شود تا فرآیند توسعه شما را بهینه‌تر، کمتر مستعد خطا و یکپارچه‌تر سازد.

نکات و بهترین روش‌ها برای توسعه با تایپ اسکریپت: فراتر از پایه

نصب و راه‌اندازی تایپ اسکریپت تنها قدم اول است. برای بهره‌برداری کامل از پتانسیل آن و نوشتن کدهای قوی، مقیاس‌پذیر و قابل نگهداری، رعایت بهترین روش‌ها و درک عمیق‌تر از مفاهیم آن ضروری است. در اینجا به برخی از نکات کلیدی و بهترین روش‌ها می‌پردازیم.

1. استفاده هوشمندانه از Type Inference در مقابل Explicit Types

تایپ اسکریپت دارای قابلیت قدرتمند Type Inference (استنتاج نوع) است. این یعنی در بسیاری از موارد، کامپایلر می‌تواند نوع یک متغیر، پارامتر یا بازگشتی تابع را به صورت خودکار تشخیص دهد. این ویژگی، نیاز به تعریف صریح نوع را کاهش می‌دهد و کد شما را کوتاه‌تر و خواناتر می‌کند.

مثال:

let count = 0; // TypeScript infers 'number'
const name = "John Doe"; // TypeScript infers 'string'

function add(a: number, b: number) { // Type inference for return type: number
    return a + b;
}

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

• مرزهای API: برای پارامترها و مقادیر بازگشتی توابع در API‌های عمومی (توابعی که از خارج از ماژول فراخوانی می‌شوند) برای وضوح بیشتر و مستندسازی ضمنی.
• مقداردهی اولیه به متغیرها با نوع پیچیده: اگر متغیری با مقدار null یا undefined مقداردهی اولیه می‌شود اما قرار است بعداً نوع دیگری بگیرد.
• پشتیبانی از IntelliSense: در مواردی که IntelliSense به نوع درستی نمی‌رسد (به ندرت اتفاق می‌افتد).

2. پرهیز از any در صورت امکان

نوع any در تایپ اسکریپت به شما اجازه می‌دهد تا هر نوعی را به یک متغیر اختصاص دهید و هر عملیاتی را روی آن انجام دهید، بدون اینکه تایپ اسکریپت بررسی نوعی انجام دهد. این کار عملاً مزایای نوع‌دهی ایستا را از بین می‌برد و تایپ اسکریپت را به جاوااسکریپت ساده تبدیل می‌کند.

بهترین روش:

• از any تنها در مواقعی استفاده کنید که به هیچ وجه نوع داده را نمی‌دانید یا نمی‌توانید آن را با دقت بالا تعریف کنید (مثلاً داده‌های دریافتی از APIهای شخص ثالث با ساختار نامشخص).
• در عوض any، از unknown یا Union Types استفاده کنید. unknown یک نوع امن‌تر از any است؛ برای استفاده از یک متغیر با نوع unknown، باید ابتدا نوع آن را بررسی کنید (Type Narrowing).
• برای اشیائی که قسمتی از ساختار آن‌ها را می‌دانید و قسمتی را نه، از Interfaceها یا Type Aliasها با ویژگی‌های اختیاری (?) استفاده کنید.

// از این اجتناب کنید
let data: any = JSON.parse(someString);

// به جای آن، از unknown استفاده کنید
let unknownData: unknown = JSON.parse(someString);
if (typeof unknownData === 'object' && unknownData !== null && 'propertyName' in unknownData) {
    console.log((unknownData as { propertyName: string }).propertyName); // نیاز به Type Assertion یا Type Guard
}

// یا یک Interface برای داده ها تعریف کنید
interface ApiResponse {
    status: string;
    data: {
        id: number;
        name: string;
    };
}
const response: ApiResponse = JSON.parse(apiResponseString);
console.log(response.data.name);

3. استفاده مؤثر از Union Types و Intersection Types

Union Types (انواع اجتماع) به شما اجازه می‌دهند یک متغیر را به چندین نوع ممکن اختصاص دهید (OR). Intersection Types (انواع تقاطع) به شما اجازه می‌دهند چندین نوع را با هم ترکیب کنید (AND)، به این معنی که یک شیء باید تمام ویژگی‌های تمام انواع ترکیب شده را داشته باشد.

بهترین روش:

• از Union Types برای مدل‌سازی داده‌هایی که می‌توانند یکی از چندین شکل باشند (مثلاً یک ID که می‌تواند string یا number باشد).
• از Intersection Types برای ترکیب ویژگی‌های چندین نوع بدون نیاز به تکرار کد (مثلاً یک شیء که هم ویژگی‌های User و هم ویژگی‌های Admin را داشته باشد).

type ID = number | string; // Union Type
let userId: ID = 123;
userId = "abc-123";

interface User {
    name: string;
    email: string;
}

interface Admin {
    role: string;
    permissions: string[];
}

type AdminUser = User & Admin; // Intersection Type

const superAdmin: AdminUser = {
    name: "Jane Doe",
    email: "jane@example.com",
    role: "SuperAdmin",
    permissions: ["manageUsers", "manageSettings"]
};

4. سازماندهی ساختار پروژه و فایل‌های .d.ts

با رشد پروژه، سازماندهی صحیح فایل‌ها و دایرکتوری‌ها حیاتی می‌شود. تایپ اسکریپت به شما امکان می‌دهد تا فایل‌های تعریف نوع (Declaration Files – .d.ts) را برای کتابخانه‌های جاوااسکریپت بدون نوع یا برای کدهای تایپ اسکریپت خودتان ایجاد کنید.

بهترین روش:

• ساختار دایرکتوری منطقی: فایل‌های سورس (.ts) را در دایرکتوری src نگه دارید. فایل‌های بیلد شده (.js و .map) در dist.
• فایل‌های .d.ts برای کتابخانه‌ها: اگر از یک کتابخانه جاوااسکریپت استفاده می‌کنید که فاقد تایپ اسکریپت است، سعی کنید تایپ‌های آن را از @types/ (مثلاً npm install --save-dev @types/lodash) نصب کنید.
• فایل‌های .d.ts سفارشی: برای تعریف نوع برای ماژول‌های جاوااسکریپت داخلی خود یا برای تعریف انواع سراسری (Global Types)، می‌توانید فایل‌های .d.ts سفارشی ایجاد کنید. اطمینان حاصل کنید که این فایل‌ها توسط tsconfig.json شما در include یا files گنجانده شده‌اند.
• استفاده از /// <reference path="..." /> (اختیاری): برای ارجاع به فایل‌های .d.ts در فایل‌های تایپ اسکریپت خود.

5. فعال کردن Strict Mode

همانطور که قبلاً ذکر شد، تنظیم "strict": true در tsconfig.json تمامی پرچم‌های بررسی نوع سخت‌گیرانه را فعال می‌کند. این کار به جلوگیری از بسیاری از خطاهای رایج جاوااسکریپت در زمان کامپایل کمک می‌کند. اگرچه ممکن است در ابتدا کمی چالش‌برانگیز به نظر برسد، اما در بلندمدت منجر به کد بسیار قوی‌تر و پایدارتری می‌شود.

6. استفاده از Type Guards و Type Assertions با احتیاط

Type Guards (محافظ‌های نوع) توابعی هستند که به تایپ اسکریپت کمک می‌کنند تا نوع یک متغیر را در یک بلوک کد خاص محدود کند. Type Assertions (اظهار نوع) (استفاده از as Type یا <Type>value) به کامپایلر می‌گوید که شما از نوع یک متغیر مطمئن هستید و مسئولیت صحت آن را بر عهده می‌گیرید.

بهترین روش:

• اولویت با Type Guards: همیشه سعی کنید از Type Guards (مانند typeof، instanceof یا توابع Type Predicate) برای محدود کردن انواع استفاده کنید، زیرا این روش امن‌تر است و در زمان اجرا بررسی واقعی انجام می‌دهد.
• Type Assertions با احتیاط: از Type Assertions زمانی استفاده کنید که واقعاً از نوع داده مطمئن هستید و کامپایلر قادر به استنتاج آن نیست (مثلاً پس از خواندن داده از یک API خارجی که ساختار آن را دقیقاً می‌دانید). استفاده بی‌رویه از Type Assertions می‌تواند مزایای نوع‌دهی تایپ اسکریپت را از بین ببرد.

function isNumber(value: any): value is number { // Type Guard function
    return typeof value === 'number';
}

let input: unknown = "Hello";

if (isNumber(input)) {
    console.log(input * 2); // TypeScript now knows 'input' is a number
}

// Type Assertion (با احتیاط استفاده شود)
const someValue: any = "this is a string";
const strLength: number = (someValue as string).length;

7. استفاده از Enums و Const Enums

Enums به شما اجازه می‌دهند مجموعه‌ای از ثابت‌های نام‌گذاری شده را تعریف کنید که خوانایی کد را افزایش می‌دهد. Const Enums گزینه‌ای برای Enums هستند که در زمان کامپایل کاملاً حذف می‌شوند و هیچ کد جاوااسکریپتی برای آن‌ها تولید نمی‌شود، که منجر به باندل‌های کوچک‌تر می‌شود.

بهترین روش:

• برای مجموعه‌ای از مقادیر ثابت و مرتبط (مثلاً وضعیت‌ها، روزهای هفته)، از Enum استفاده کنید.
• اگر به بهینه‌سازی اندازه باندل اهمیت می‌دهید و به ویژگی‌های زمان اجرای Enum نیاز ندارید (مثل دسترسی به نام کلید Enum از مقدار آن)، از const enum استفاده کنید.

enum Direction {
    Up,
    Down,
    Left,
    Right,
}

const enum HttpStatus { // Const Enum
    OK = 200,
    NotFound = 404,
    InternalServerError = 500
}

let move: Direction = Direction.Up;
console.log(HttpStatus.OK); // در زمان کامپایل به 200 تبدیل می شود

8. مستندسازی کد با JSDoc

تایپ اسکریپت به خوبی با JSDoc (یک فرمت برای کامنت‌گذاری کد) ادغام می‌شود. با استفاده از تگ‌های JSDoc مانند @param، @returns، @template و غیره، می‌توانید اطلاعات نوع اضافی و توضیحات را در کامنت‌های خود بگنجانید. این مستندات سپس توسط IDE‌ها برای ارائه IntelliSense و کمک به درک کد استفاده می‌شوند.

بهترین روش:

• برای توابع، کلاس‌ها، و متدهای مهم، از JSDoc برای توضیح هدف، پارامترها و مقادیر بازگشتی استفاده کنید.
• با استفاده از checkJs در tsconfig.json و JSDoc، می‌توانید حتی فایل‌های جاوااسکریپت خود را نیز با استفاده از تایپ اسکریپت بررسی نوع کنید.

/**
 * این تابع دو عدد را جمع می کند.
 * @param a - اولین عدد.
 * @param b - دومین عدد.
 * @returns حاصل جمع دو عدد.
 */
function sum(a: number, b: number): number {
    return a + b;
}

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

نتیجه‌گیری: گامی بلند در مسیر توسعه پیشرفته با تایپ اسکریپت

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

از نصب Node.js و NPM/Yarn به عنوان پایه‌های اکوسیستم جاوااسکریپت آغاز کردیم و با معرفی Visual Studio Code به عنوان یک IDE ایده‌آل برای توسعه تایپ اسکریپت، محیط کاری شما را آماده ساختیم. سپس، تفاوت‌ها و مزایای نصب سراسری و محلی تایپ اسکریپت را بررسی کرده و بر اهمیت نصب محلی برای پروژه‌های واقعی تأکید نمودیم. قلب هر پروژه تایپ اسکریپت، فایل tsconfig.json است که به دقت گزینه‌های کلیدی آن مانند target، module، outDir، strict و esModuleInterop را تشریح کردیم. این تنظیمات، پایه و اساس کنترل کامپایلر تایپ اسکریپت را تشکیل می‌دهند.

با نوشتن و کامپایل کردن اولین کد “Hello TypeScript”، به صورت عملی مشاهده کردیم که چگونه تایپ اسکریپت خطاهای نوع را در زمان توسعه شناسایی می‌کند و کدی قابل اطمینان‌تر تولید می‌نماید. در ادامه، با ورود به مبحث پیکربندی پیشرفته کامپایلر TypeScript، گزینه‌هایی مانند lib، jsx، declaration، noEmitOnError و moduleResolution را بررسی کردیم که برای سناریوهای پیچیده‌تر و توسعه کتابخانه‌ها حیاتی هستند. همچنین، قابلیت‌های قدرتمند extends و references برای مدیریت پروژه‌های بزرگ (Monorepos) را معرفی کردیم.

در بخش ادغام تایپ اسکریپت با ابزارهای بیلد، نحوه کار با Webpack (با استفاده از ts-loader) و Vite را نشان دادیم، که هر دو ابزارهایی کلیدی برای بهینه‌سازی فرآیند توسعه و تولید باندل‌های بهینه برای محیط‌های تولید هستند. در نهایت، با معرفی ابزارهای کمکی و اکستنشن‌ها مانند ESLint و Prettier، اهمیت linting و فرمت‌بندی کد برای حفظ یکپارچگی و کیفیت در پروژه‌های تیمی را برجسته ساختیم. همچنین، به نکات و بهترین روش‌هایی پرداختیم که فراتر از دانش پایه، شما را در مسیر تبدیل شدن به یک توسعه‌دهنده ماهر تایپ اسکریپت یاری خواهند کرد، از جمله استفاده هوشمندانه از Type Inference، پرهیز از any، بهره‌گیری از Union و Intersection Types، و اهمیت Strict Mode.

تایپ اسکریپت بیش از یک زبان برنامه‌نویسی، یک ابزار قدرتمند برای بهبود تجربه توسعه‌دهنده، کاهش خطاهای زمان اجرا و ساخت نرم‌افزارهایی با قابلیت نگهداری بالا است. با تسلط بر مفاهیم و روش‌هایی که در این مقاله پوشش داده شد، شما نه تنها می‌توانید پروژه‌های تایپ اسکریپت را با اطمینان نصب و راه‌اندازی کنید، بلکه می‌توانید از پتانسیل کامل آن برای ارتقاء کیفیت و بهره‌وری در تیم توسعه خود بهره‌مند شوید. این تازه آغاز راه است؛ با ادامه کاوش و تمرین، به زودی مهارت‌های شما در تایپ اسکریپت به سطح بالایی خواهد رسید.