کتابخانه‌های تایپ اسکریپت: استفاده از کتابخانه‌های جاوا اسکرپیت در تایپ‌اسکریپت

TypeScript Libraries: Using JavaScript Libraries in TypeScript

مانند هر زبان برنامه نویسی دیگری که می شناسید تایپ اسکریپت هم می تواند از کتابخانه های مختلفی استفاده کند تا دوباره کاری نکنیم. وقتی از تایپ اسکریپت صحبت می کنیم معمولا دو نوع کتابخانه به ذهن ما می رسد:

کتابخانه های جاوا اسکریپتی (که درون تایپ اسکریپت هم قابل استفاده اند).
کتابخانه های تایپ اسکریپتی اصل که از قابلیت های تایپ اسکریپتی نیز استفاده می کنند.

من برای شروع یک پروژه خالی را برایتان قرار می دهم که از webpack استفاده می کند (دانلود پروژه آماده). این پروژه را دانلود کرده و در پوشه اصلی آن یک پنجره ترمینال را باز کرده و کد زیر را اجرا کنید:

npm install

با این کار وابستگی های پروژه (پوشه node_modules) برایتان نصب می شود. حالا با یک کتابخانه جاوا اسکریپتی به نام Lodash شروع می کنم. ابتدا باید آن را نصب کنیم بنابراین در یک پنجره ترمینال جدید می گوییم:

npm install --save lodash

از آنجایی که پروژه آماده ای که به شما داده ام از Webpack استفاده می کند می توانیم lodash را درون آن پیاده سازی کنیم اما اگر از webpack استفاده نمی کنید باید از CDN های ارائه شده در سایت رسمی استفاده کنید.

حالا که این کتابخانه را نصب کرده ایم آن را درون فایل App.ts وارد می کنیم:

import _ from 'lodash';

با این کار یک خطا دریافت می کنیم که چنین ماژولی وجود ندارد، با اینکه خودمان همین چند دقیقه پیش آن را نصب کرده بودیم! مشکل ما اینجاست که lodash یک کتابخانه ساده جاوا اسکریپتی است و به تایپ اسکریپت ربطی ندارد بنابراین به ما خطا می دهد چرا که جاوا اسکریپت اصلا متوجه آن نمی شود. البته اگر به tsconfig.json برویم و گزینه noEmitOnError را روی false بگذاریم (یعنی حتی در هنگام خطا نیز کدهای ما را کامپایل کند) مشکلی نخواهیم داشت:

    "noEmitOnError": false,

حالا برای تست این مسئله از کد زیر در App.ts استفاده می کنم:

import _ from 'lodash';

console.log(_.shuffle([1, 2, 3]));

متد shuffle یکی از متدهای کتابخانه lodash است و ترتیب اعضای یک آرایه را به صورت اتفاقی به هم می ریزد. حالا اگر کدها را ذخیره کرده و npm start را اجرا کنیم (که سرور مجازی webpack روشن شود) می توانیم به مرورگر رفته و کدهای خود را در کنسول مرورگر ببینیم. خروجی زیر یکی از حالت های ممکن است:

[2, 3, 1]

بنابراین مشکل از اینجا نیست. یادتان باشد که حتما noEmitOnError را دوباره روی true بگذارید:

    "noEmitOnError": true,

برای حل این مشکل باید عبارت lodash types را در گوگل جست و جو کنید. اولین لینک یک پکیج npm است که باید وارد آن شوید. اگر به این صفحه نگاه کنید، در قسمتی از آن گفته شده است که این پکیج از آدرس https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/lodash گرفته شده است. این آدرس به یک repository بسیار بزرگ به نام DefinitelyTyped اشاره می کند. این repository عظیم بسیاری از پکیج های جاوا اسکریپت را در خود دارد و قسمتی از آن مخصوص حل همین مشکل است. اگر به لینک بالا بروید (بخش مربوط به lodash) فایل هایی به پسوند d.ts پیدا می کند (مثل add.d.ts) که به آن ها فایل های declaration می گوییم. این فایل ها هیچ منطق برنامه نویسی در خود ندارند بلکه فقط دستوراتی را به تایپ اسکریپت می دهند. مثلا:

	import { after } from "./index";
	export = after;

بدین وسیله تایپ اسکریپت متوجه می شود که با این کتابخانه ها چکار کند. البته در صورت داشتن توانایی آن، شما می توانید خودتان هم فایل های d.ts را بنویسید. وب سایت رسمی تایپ اسکریپت قسمتی را مخصوص توضیح این مورد قرار داده است. با این تفاسیر باید پکیج types/lodash را نصب کنیم تا بتوانیم از این کتابخانه استفاده کنیم:

npm install --save-dev @types/lodash

به محض اینکه این دستور را اجرا کنید، خطای تایپ اسکریپت هم از بین می رود. حالا می توانیم npm start را اجرا کرده و برنامه خود را درون مرورگر اجرا کنیم.

حالا سوال مهمی پیش می آید. فرض کنید من می خواهم از کتابخانه ای استفاده کنم که مشهور نیست بنابراین برای آن پکیج types وجود ندارد. راه حل چیست؟

مسئله اینجاست که حتما نباید در حال استفاده از یک کتابخانه باشیم، بلکه برخی اوقات خودمان از قبل کدهای جاوا اسکریپتی را نوشته ایم اما حالا نمی توانیم از آن ها در تایپ اسکریپت استفاده کنیم. مثلا فرض کنید یک ثابت را در فایل index.html تعریف کرده ایم:

<body>
  <script>
    var GLOBAL = 'THIS IS SET!';
  </script>
</body>

چنین متغیری در window و به صورت سراسری در جاوا اسکریپت در دسترس است. حالا ما چطور می توانیم از آن در تایپ اسکریپت (مثلا فایل App.ts) استفاده کنیم؟ آیا می توانیم از کد زیر استفاده کنیم:

console.log(GLOBAL);

با ذخیره کد زیر در App.ts با خطا مواجه می شوید. در چنین حالاتی که هیچ راه حلی نداریم می توانید از declare استفاده کنید که دستوری در تایپ اسکریپت برای شناسایی کدهای جاوا اسکریپت است:

declare var GLOBAL: string;

console.log(GLOBAL);

با انجام این کار به تایپ اسکریپت گفته ایم که نگران متغیر GLOBAL نباش چرا که درون فایل index.html است و ما مطمئن هستیم که در نهایت وجود خواهد داشت. حالا اگر به مرورگر برویم در قسمت کنسول عبارت THIS IS SET را مشاهده خواهیم کرد. این دستور یکی از دستورات بسیار مهم است که باید همیشه در ذهن خود داشته باشید.