نحوهی اعمال تنظیمات کامپایلر TypeScript
روشهای متفاوتی جهت اعمال تنظیمات کامپایلر TypeScript وجود دارند:
الف) ذکر پارامترها و سوئیچهای کامپایلر خط فرمان tsc به صورت مستقیم.
ب) بعضی از ادیتورها و IDEها این پارامترها را به صورت گزینهها و دیالوگهایی ارائه میدهند.
ج) استفاده از یک Build task، همانند روشی که در تنظیمات VSCode در مطلب «چرا TypeScript» مشاهده کردید.
د) ذکر تنظیمات کامپایلر، در فایل مخصوصی به نام tsconfig.json.
گزینههای متداول کامپایلر TypeScript
گزینههای کامپایلر TypeScript نسبتا قابل توجه هستند و لیست کامل و به روز آنها را در هندبوک تایپاسکریپت میتوانید مشاهده کنید. در اینجا تعدادی از مهمترینها را بررسی خواهیم کرد:
- سوئیچ module-- جهت مشخص سازی فرمت خروجی ماژولهای TypeScript بکار میرود. در مطلب بررسی ماژولها عنوان شد که TypeScript قادر است ماژولهای تعریف شده را با سایر فرمتهای متداول جاوا اسکریپت مانند common.js و amd نیز تولید کند. سوئیچ module-- جهت تنظیم این گزینه درنظر گرفته شدهاست. خلاصهای این سوئیچ نیز m-- است. این سوئیچ یکی از مقادیر commonjs, amd, system, es2015 را میپذیرد. اگر es2015 را مشخص کردید، نیاز است target را نیز به ES6 تنظیم کنید.
- سوئیچ moduleResolution-- نحوهی یافتن ارجاعات به ماژولها را مشخص میکند. در اینجا روشهای node.js و کلاسیک را میتوان قید کرد.
- سوئیچ target-- برای تعیین نگارش خروجی جاوا اسکریپت تولیدی بکار میرود. حالت پیش فرض آن ES3 است و ES5 و ES6 را نیز پشتیبانی میکند.
- گزینهی watch-- کامپایلر را در حالت watch نگه میدارد. در این حالت تغییرات آخرین تاریخ نوشته شدن در فایلهای ts بررسی شده و در صورت یافتن تغییری، بلافاصله خروجی js آنها تهیه میشود.
- سوئیچ outDir-- برای مشخص کردن پوشهی فایلهای تولیدی نهایی بکار میرود.
- گزینهی noImplicitAny-- برای ممنوع کردن نوعهای Any متغیرها به صورت پیش فرض است و در این حالت خطای کامپایلری را مشاهده خواهید کرد. استفاده از این گزینه به این معنا نیست که دیگر نمیتوان از نوع Any استفاده کرد؛ بلکه به این معنا است که در صورت نیاز باید آنرا به صورت صریح قید کنید.
یک مثال:
در VSCode و در پوشهی vscode. آن، در تنظیمات فایل tasks.json، چنین گزینههایی را میتوان برای کامپایلر tsc، ذکر کرد:
"args": ["--target", "ES5", "--outDir", "js", "--module", "commonjs", "--sourceMap", "--watch", "app.ts"],
بررسی کاربرد فایل tsconfig.json
فایل ویژهی tsconfig.json در نگارش 1.5 تایپاسکریپت معرفی گردید. هدف از این فایل، ساده کردن تعریف پارامترهای کامپایلر است؛ البته الزامی به استفادهی از آن وجود ندارد.
این فایل مزایای ذیل را به همراه دارد:
الف) محل قرارگیری آن، ریشهی پروژهی TypeScript را مشخص میکند.
ب) تنظیمات ذکر شدهی در این فایل، به تمام فایلهای موجود در پوشه و زیر پوشههای محل قرارگیری آن به صورت پیش فرض اعمال میشوند.
هنگامیکه در تنظیمات کامپایلر tsc، نام فایل یا فایلهای ts ایی را ذکر نمیکنید، این کامپایلر در ابتدا به دنبال فایل tsconfig.json میگردد و بر این اساس فایلهای ts را پردازش خواهد کرد. اگر مانند مثال فوق، در انتهای پارامترها، نام فایلی را ذکر کنید، از فایل tsconfig.json صرفنظر خواهد شد.
یک نکته: برای ذکر صریح محل فایل tsconfig از پارامتر project استفاده کنید:
tsc --project ./lib
در این حالت میتوان کامپایلر tsc را بدون پارامتری اجرا کرد و این برنامه اطلاعات مورد نیاز خود را از فایل tsconfig.json دریافت خواهد کرد. باید دقت داشت، هر سوئیچی که در خط فرمان ذکر شود، پارامترهای معادل ذکر شدهی در فایل tsconfig.json را بازنویسی میکند. بنابراین در صورت وجود این فایل، میتوان خاصیت args مثال قبل را به یک آرایهی خالی تنظیم کرد.
د) امکان مشخص سازی الحاق و عدم الحاق فایلهای ts را به همراه دارد.
{ "compilerOptions": { "target": "es5", "outDir": "js", "module":"commonjs", "sourceMap":true }, "files": [ "app.ts", "classes.ts" ] }
کار خاصیت files الحاق و include است. اگر میخواهید از پوشهها و یا فایلهایی صرفنظر شود، از خاصیت exclude استفاده کنید:
{ "compilerOptions": { "target": "es5", "outDir": "js" }, "exclude": [ "node_modules", "lib" ] }
یک نکته
در VSCode داخل فایل tsconfig.json با فشردن ctrl+space، به یک intellisense حاوی گزینههای تکمیل کنندهی آن خواهید رسید.
ساده سازی الحاق فایلهای تعاریف نوعها
در مطلب «مبانی TypeScript؛ تهیه فایلهای تعاریف نوعها» با فایلهای ویژهی d.ts. آشنا شدیم. استفادهی از این فایلها به همراه ذکر اجباری reference path مرتبط در ابتدای هر فایل ts است. اینکار اضافی را با استفاده از فایل tsconfig.json میتوان حذف کرد:
{ "compilerOptions": { "target": "es5", "outDir": "js", "module": "commonjs", "sourceMap": true, "watch": true }, "files": [ "app.ts", "typings/main.d.ts" ] }