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

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

هدف این پست چیه ؟

سلام . من رضا نیک روش هستم و در این پست نحوه استفاده از تایپ اسکریپت در نود جی اس رو بهتون یاد میدم . با هم دیگه یک پروژه خیلی ساده میسازیم و در نهایت کامپایلش میکنیم تا کد های جاوا اسکریپت رو تحویل بگیریم .

پیشنیاز ها

• نصب بودن nodejs و npm
• دانش کار با nodejs و npm
• نصب بودن یک code editor (من از vs code استفاده میکنم )

راه اندازی اولیه

در ابتدا باید یک پوشه برای پروژه مون بسازیم . خیلی راحت با یک کلیک راست و گزینه new folder میشه این کار رو انجام داد ولی اگر میخوای خفن تر بنظر برسی ( که نمیرسی ? ) میتونی دستور زیر رو توی ترمینال بزنی .

mkdir typescript-nodejs

حالا وارد پوشه ای که ساختید بشید و vs code رو باز کنید .

خوب الان باید یک پروژه جدید بسازیم .

توی ترمینال دستور زیر رو بزنید .

npm init -y

تا اینجا شما یک فایل package.json دارید که یک سری اطلاعات توی هست .

حالا نوبت اون رسیده که تایپ اسکریپت رو نصب کنیم .

npm install typescript --save-dev

دستور بالا علاوه بر تایپ اسکریپت ، کامپایلر اون رو هم نصب میکنه .

تایپ اسکریپت برای اینکه به خوبی کار کنه نیازه که یک سری تایپ ها رو هم بهش اضافه کنیم که در ادامه باید اون ها رو هم نصب کنیم .

npm install @types/node --save-dev 

ساختن فایل tsconfig.json

فایل tsconfig.json جاییه که ما تنظیمات مربوط به کامپایلر تایپ اسکریپت رو تعریف میکنیم .

برای ساختن این فایل دستور زیر رو در ترمینال تون بزنید

npx tsc --init --rootDir src --outDir build \
--esModuleInterop --resolveJsonModule --lib es6 \
--module commonjs --allowJs true --noImplicitAny true

داخل این فایل تنظیمات مختلفی میشه تعریف کرد که پیشنهاد میکنم در مورد شون مطالعه کنید . ولی الان ۲ موردش برای ما مهم تر هست که براتون توضیح میدم .

اول - rootDir : اینجا باید ادرس پوشه ای رو بنویسیم که میخوایم فایل های تایپ اسکریپتی مون رو داخلش قرار بدیم . مثلا ما پوشه src رو بهش میدیم.

دوم - outDir : اینجا باید ادرس پوشه ای رو بدیم که میخوایم فایل ها مون بعد از کامپایل اونجا قرار داده بشن . اینجا ما پوشه build رو براش مشخص میکنیم ( این پوشه به طور خودکار بعد از کامپایل ساخته میشه ) .

ساختن پوشه src و اولین فایل تایپ اسکریپت

خوب در این قسمت باید پوشه ای برای نگهداری فایل های تایپ اسکریپت مون بسازیم .همون طور که توی فایل tsconfig.json مشخص کردیم اسم این پوشه باید src باشه ولی شما میتونید تغییرش بدید و هرچی که دوست داشتید بجاش بزارید .

میتونید این کارو با دستور زیر هم انجام بدید .

mkdir src
touch src/index.ts 

توی این پوشه کد هامون رو مینویسیم و لذت میبریم. ولی کار هنوز تموم نشده . چرا ؟ چون این کد ها باید کامپایل بشن .

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

برای کامپایل کردن کد ها از tsc استفاده میکنیم . tsc در واقع همون کامپایلر ما هست که کد های ما رو به جاوا اسکریپت تبدیل میکنه . این کامپایلر میاد فایل tsconfig.json رو چک میکنه و با توجه به تنظیماتی که اونجا براش تعریف شده کد های ما رو کامپایل میکنه .

برای استفاده از tsc دستور زیر رو توی ترمینال بزنید .

npx tsc

بعد از انجام این دستور یک پوشه به اسم build ( همون اسمی که توی قسمت outDir توی tsconfig.json نوشتیم ) ساخته میشه و فایل های کامپایل شده رو میتونیم اونجا ببینیم .

تا اینجا کار مون تموم شده و تونستیم به خوبی تایپ اسکریپت رو در nodejs استفاده کنیم . ولی یه سری مشکلات ریز هنوز هست . شما برای اینکه بتونید خروجی فایل های تایپ اسکریپ تون رو ببنید مجبور هستید هر بار بعد از نوشتن چند خط کد دستور بالا رو بزنید تا کد ها تون دوباره کامپایل بشن و بعدش اون فایل های جاوا اسکریپتی رو که بهتون میده برید با دستور node build/index.js اجرا کنید . شاید پیش خودتون بگید مشکلی نیست ولی وقتی پروژه تون بزرگ بشه متوجه میشید چه درد سر بزرگیه .

راه حل چیه ؟

یه سری ابزار ها هست که میان این کار رو برای ما به طور خودکار انجام میدن .در ادامه باید ۲ تا پکیج جدید نصب کنیم . پکیج اول اسمش nodemon هست . کاری که انجام میده اینه که میاد فایل یا فولدری که براش مشخص میکنیم رو زیرنظر میگیره و هر وقت این فایل تغییری توش ایجاد شد میاد یه دستور خاصی که خودمون براش مشخص میکنیم رو اجرا میکنه .

پکیج دوم اسمش ts-node هست و کارش اجرا کردن کد های تایپ اسکریپ بطور مستقیمه . درواقع این پکیج میاد بدون استفاده از tsc خروجی رو بهمون نمایش میده . ( توی داکیومنتش نوشته بدون کامپایل و به طور مستقیم فایل ها رو اجرا میکنه . برای اطلاعات بیشتر خودتون سرچ کنید ).

برای نصب این ۲ پکیج دستورات زیر رو توی ترمینال تون بزنید .

npm install --save-dev ts-node nodemon

و در ادامه باید یک فایل کانفیگ برای nodemon بسازید . توی دایرکتوری اصلی پروژه (نه فولدر src ) یک فایل به اسم nodemon.json بسازید و کد های زیر رو داخلش قرار بدید .

{
  &quotwatch&quot: [&quotsrc&quot],
  &quotext&quot: &quot.ts,.js&quot,
  &quotignore&quot: [],
  &quotexec&quot: &quotts-node ./src/index.ts&quot
}

توی قسمت watch ادرس فولدری که باید بهش نظارت کنه رو میدیم . و توی قسمت exec هم دستوری که بعد از هر تغییر باید اجرا کنه رو مینویسیم . اینجا مثلا دارم بهش میگم بعد از هر تغییر بیا فایل index.ts داخل فولدر src رو اجرا کن برام .

خیل خوب حالا چطور این nodemon رو اجرا کنیم ؟ خیل راحته . برید توی package.json توی قسمت scripts این خط رو اضافه کنید .

&quotdev&quot: &quotnodemon&quot

بعدش توی ترمینال تون دستور npm run dev رو بزنید . تبریک میگم nodemon فعال شد . از الان به بعد هر تغییری داخل پوشه src رخ بده این دوست عزیز متوجه میشه و اون دستوری که براش مشخص کردیم رو اجرا میکنه .

بیلد کردن پروژه

همونطور که متوجه شدید وقتی از nodemon استفاده میکنیم دیگه فولدر build برای ما ساخته نمیشه (این بخاطر کاری هست که ts-node انجام میده ) . پس نیازه که در اخر پروژه رو خودمون بیلد کنیم .

یه پکیج دیگه باید نصب کنید به اسم rimraf .

npm install --save-dev rimraf

این پکیج میاد دستور rm -rf ( برای اطلاعات بیشتر در مورد این دستور خودتون سرچ کنید ) رو اجرا میکنه و فولدر مد نظر ما رو پاک میکنه .

برید توی package.json و این خط رو به قسمت scripts اضافه کنید

&quotbuild&quot: &quotrimraf ./build && tsc&quot

این دستور ابتدا میاد فولدر build ( در صورتی که موجود باشه ) رو پاک میکنه بعدش tsc رو برای انجام فرایند کامپایل اجرا میکنه .

برای اجرای این دستور و بیلد کردن پروژه کافیه npm run build رو در ترمینال وارد کنید .

اجرای نسخه build شده

برای اینکه نسخه بیلد شده رو اجرا کنید کافیه خط زیر رو به قسمت scripts داخل package.json اضافه کنید

&quotstart&quot: &quotnode build/index.js&quot

و بعد داخل ترمینال دستور npm start رو بزنید تا اجرا بشه .

نکته : من پیش فرضم اینه که اسم فایل اصلی پروژه شما index.ts هست که فایل متناظر با اون در پوشه build میشه index.js هست .

نکته : اگر از قبل دستور npm run build رو نزده باشید دستور npm start ارور میده . اگر خواستید میتونید دستور build رو هم به start اضافه کنید تا اگه یه وقت یادتون رفت بیلد بگیرید خودش اتوماتیک انجامش بده.

برای این کار میتونید start رو به این شکل تغییر بدید .

&quotstart&quot: &quotnpm run build && node build/index.js&quot

سخن آخر

امیدوارم این پست بدرد تون خورده باشه . اگه سوالی براتون پیش اومد توی کامنت ها بنویسید حتما جواب میدم .