فایلهای تعاریف نوعها (Type Definitions) امکان استفادهی سادهتر از انواع و اقسام کتابخانههای جاوا اسکریپتی موجود را فراهم میکنند. این فایلها حاوی تعاریف نوعهای استفاده شدهی در کتابخانههای جاوا اسکریپتی هستند که بر اساس TypeScript تهیه نشدهاند. حاوی هیچ نوع پیاده سازی نیستند و تنها از اینترفیسهایی تشکیل میشوند که راهنمای کامپایلر TypeScript جهت بررسی نوعها هستند و همچنین به عنوان راهنمای ادیتورهای TypeScript جهت ارائهی Intellisense کاملتر و دقیقتری نیز میتوانند بکار روند. به آنها TypeScript wrapper for JavaScript libraries هم میگویند. این فایلها دارای پسوند d.ts. هستند.
منابع یافتن فایلهای تعاریف نوعها
- بزرگترین مخزن کد فایلهای تعاریف نوعهای TypeScript، در سایت Github و در مخزن کد DefinitelyTyped قابل مشاهده است:
https://github.com/DefinitelyTyped/DefinitelyTyped
- همچنین ابزار دیگری به نام «Typings type definition manager» نیز میتواند برای این منظور بکار رود.
- علاوه بر اینها، بستههای npm نیز میتوانند به همراه تعاریف فایلهای .d.ts باشند.
مفهوم Ambient Modules
پروژههای TypeScript عموما به همراه تعداد زیادی ماژول هستند. به این ترتیب هر ماژول نیاز به d.ts. فایل مخصوص خودش خواهد داشت که نگهداری آنها مشکل خواهد بود. به همین جهت یک Solution متشکل از تعدادی ماژول، میتواند تمام تعاریف نوعها را در یک تک فایل d.ts. نگهداری کند که به آن Ambient Module نیز میگویند. برای نمونه فایل d.ts. ذیل را درنظر بگیرید:
// cardCatalog.d.ts
declare module "CardCatalog"{
export function printCard(callNumber: string): void;
}
در اینجا نحوهی تعریف یک module از نوع ambient را مشاهده میکنید که تنها حاوی تعاریف export شدهاست؛ بدون به همراه داشتن پیاده سازی آنها.
سپس برای استفادهی از این فایل d.ts. خواهیم داشت:
// app.ts
/// <reference path="cardCatalog.d.ts" />
import * as catalog from "CardCatalog";
چون فایلهای d.ts. دارای پیاده سازیهای مرتبط نیستند، کار import آنها همانند سایر ماژولها نخواهد بود. ابتدا نیاز است با استفاده از Triple-Slash Directives به ابتدای ماژول فعلی الحاق شوند (مانند مثال فوق). سپس سطر import آن مانند قبل است؛ با این تفاوت که مسیر فایل ماژول را به همراه ندارد و بجای آن نام ماژولی که در فایل d.ts. ذکر شدهاست، تعریف میشود.
بررسی مخرن DefinitelyTyped
DefinitelyTyped مخزن کد عظیمی از فایلهای تعاریف نوعهای TypeScript است. هرچند دریافت این فایلها از مخزن کد Github آن مانند سایر فایلهای متداول آن سایت، اما چندین روش دیگر نیز برای کار با این مخزن کد وجود دارد:
- استفاده از NuGet. تقریبا تمام فایلهای d.ts. آن به صورت یک بستهی نیوگت مجزا نیز وجود دارند.
- استفاده از برنامهی tsd. این برنامه یا type definition manager، به صورت اختصاصی برای کار با این نوع فایلها طراحی شدهاست.
- استفاده از برنامهی typings. این برنامه نیز یک type definition manager دیگر است. مزیت آن کار با چندین منبع مجزای ارائهی فایلهای d.ts. است که DefinitelyTyped تنها یکی از آنها است.
یک مثال: دریافت مستقیم و افزودن فایل d.ts. مربوط به کتابخانهی جاوا اسکریپتی lodash از مخزن کد DefinitelyTyped
در ادامه قصد داریم فایل تعاریف نوعهای کتابخانهی معروف
lodash را به پروژهی جدیدی در VSCode اضافه کنیم. قدم اول، نصب خود کتابخانه است؛ از این جهت که فایلهای d.ts.، فاقد هرگونه پیاده سازی هستند.
در مطلب «
چرا TypeScript» نحوهی کار با npm را جهت به روز رسانی کامپایلر TypeScript پیش فرض VSCode ملاحظه کردید. در اینجا نیز از npm برای نصب lodash استفاده میکنیم:
ابتدا خط فرمان را گشوده و سپس به پوشهی پروژهی خود وارد شوید. سپس دو دستور ذیل را صادر کنید:
npm init -f
npm install lodash --save
در ادامه به مخزن کد DefinitelyTyped وارد شده و پوشهی مربوط به lodash را با جستجو پیدا کنید:
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/lodash
در این پوشه تنها به فایل lodash.d.ts آن نیاز است. روی لینک این فایل کلیک کرده و سپس در صفحهی باز شده، بر روی دکمهی raw کلیک نمائید. این فایل نهایی را در ریشهی پروژهی جاری ذخیره کنید.
https://github.com/DefinitelyTyped/DefinitelyTyped/raw/master/lodash/lodash.d.ts
اگر به انتهای فایل lodash.d.ts دقت کنید، تعریف ambient module آن چنین شکلی را دارد و export آن lo dash است:
declare module "lodash" {
export = _;
}
در ادامه برای استفادهی از آن در فایل test.ts، به ابتدای فایل، با استفاده از Triple-Slash Directive، تعریف فایل d.ts. را اضافه کنید:
/// <reference path="lodash.d.ts" />
سپس جهت دریافت یکجای تمام امکانات این کتابخانه خواهیم داشت:
import * as _ from "lodash";
و اکنون بلافاصله intellisense به همراه مشخص بودن نوع پارامترهای یک متد فراهم است:
let snakeCaseTitle = _.snakeCase("test this");
console.log(snakeCaseTitle);
برای گرفتن خروجی از این مثال
همانند قبل، ابتدا Ctrl+Shift+P را فشرده و سپس انتخاب tasks:Run build task< و در ادامه فشردن F5 برای اجرا برنامه، نیاز است صورت گیرند:
مدیریت فایلهای تعاریف نوعها با استفاده از tsd
tsd یک برنامهی خط فرمان است که کار یافتن و دریافت فایلهای d.ts. را ساده میکند. این برنامه منحصرا با مخزن کد DefinitelyTyped کار میکند و پس از دریافت هر فایل d.ts.، ارجاعی به آنرا در فایل tsd.json در ریشهی پروژه ذخیره میکند. همچنین یک تک فایل tsd.d.ts حاوی تعاریف Triple-Slash Directiveها را نیز تولید میکند که در ادامه میتوان تنها این فایل را به فایلهای مدنظر الحاق کرد.
البته باید دقت داشت که این برنامه در ابتدای سال 2016 منسوخ شده اعلام گردید و با برنامهی typings جایگزین شدهاست؛ هرچند هنوز هم مفید است و قابل استفاده.
روش دریافت tsd را در سایت definitelytyped.org میتوانید مشاهده کنید:
http://definitelytyped.org/tsd
نصب آن نیز به صورت یک بستهی npm است:
توضیحات بیشتر در مورد نحوهی استفادهی از tsd را در مخزن کد آن میتوانید مشاهده کنید:
https://github.com/Definitelytyped/tsd#readme
برای مثال برای نصب فایل تعاریف نوعهای lodash، ابتدا به پوشهی پروژه از طریق خط فرمان وارد شده و سپس دستور ذیل را صادر کنید:
D:\Prog\1395\VSCodeTypeScript>tsd install lodash --save
البته اگر موفق به اجرای این دستور نشدید؛ با خطای ذیل
[ERR!] Error: connect ECONNREFUSED 10.10.34.36:443
به این معنا است که آدرس فایلهای raw در github در ایران فیلتر شدهاست و قابل دسترسی نیست (آدرس IP فوق رنج خصوصی است).
اگر موفق به اجرای این دستور شدید، پوشهی جدید typings در ریشهی پروژه ایجاد خواهد شد. داخل آن فایل tsd.d.ts را نیز میتوان مشاهده کرد که حاوی تعاریف فایلهای نوعهای دریافت شدهاست. از این پس در ابتدای فایلهای ts، بجای تعریف جداگانهی این فایلها، تنها میتوان نوشت:
/// <reference path="./typings/tsd.d.ts" />
این تک فایل، reference pathهای تک تک فایلهای نصب شدهی توسط tsd را به همراه دارد.
مدیریت فایلهای تعاریف نوعها با استفاده از typings
برنامهی typings نیز بسیار شبیه به برنامهی tsd است؛ با این تفاوت که منابع آن منحصر به مخزن کد definitelytyped نیست.
مخزن کد این برنامه در گیتهاب قرار دارد:
https://github.com/typings/typings
و نصب آن با استفاده از دستور ذیل است:
npm install typings --global
و اینبار دستور tsd قسمت قبل به نحو ذیل تغییر میکند:
typings install lodash --ambient --save
این مورد نیز قابل استفاده نیست؛ چون به نظر تنها مرجع lodash در حال حاضر github است و آدرس https://raw.githubusercontent.com در ایران فیلتر شدهاست:
typings ERR! caused by Unable to connect to "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/299b5caa22876ef27dc8e9a5b7fd7bf93457b6f4/lodash/lodash-3.10.d.ts"
typings ERR! caused by connect ECONNREFUSED 10.10.34.36:443
اگر موفق به نصب این بسته شدید، اکنون پوشهی جدیدی به نام typings در ریشهی سایت ایجاد شدهاست. داخل این پوشه علاوه بر فایلهای دریافت شده، دو فایل browser.d.ts و main.d.ts را نیز میتوان مشاهده کرد. فایل browser آن مخصوص برنامههای سمت کلاینت است و فایل main آن جهت برنامههای NodeJS طراحی شدهاست (که البته در مثال ما هر دو فایل حاوی یک محتوا هستند). این فایلها حاوی تعاریف reference pathهای به فایلهای نوعهای نصب شده هستند. بنابراین ابتدای هر فایل ts میتوان نوشت:
/// <reference path="./typings/main.d.ts" />