ترکیب Express و Typescript: شروع یک پروژه ساده

حالا که در مورد ترکیب React و Typescript یاد گرفته ایم باید در رابطه با فریم ورک ها و زبان های دیگر مانند node.js و Express.js نیز صحبت کنیم. تا اینجای کار از تایپ اسکریپت فقط در front-end استفاده کرده ایم که کار بسیار خوبی هم هست اما می توانیم از آن در back-end نیز استفاده کنیم (به همراه Express)! زبان Node.js به تنهایی نمی تواند کدهای تایپ اسکریپت را اجرا کند اما با استفاده از روش هایی می توانیم طوری تایپ اسکریپت را بنویسیم که با Node.js نیز همخوانی داشته باشد و در پروژه هایمان از آن استفاده کنیم.

نکته: طبیعتا برای مطالعه این مقاله و چند مقاله آینده به دانش Node.js و Express.js نیاز است. اگر با زبان Node.js آشنایی ندارید می توانید قسمت های «ترکیب Express و TypeScript» را رد کنید. همچنین حتما باید node.js را نصب داشته باشید (اگر در طول این دوره آموزشی همراه ما جلو آمده باشید حتما آن را نصب دارید، در غیر این صورت دانلود بفرمایید).

برای درک نحوه کار Node.js با تایپ اسکریپت یک پوشه ساده بسازید که حاوی فایلی به نام app.ts باشد. من می خواهم درون این فایل کدهایی را با تایپ اسکریپت بنویسم که Node.js بتواند آن ها را اجرا کند. من با کدی بسیار ساده شروع می کنم:

console.log('something...');

همه ما می دانیم که این کد در مرورگر چه کاری انجام می دهد اما  در Node.js نیز کار می کند. حالا دستور tsc app.ts را اجرا می کنم تا فایل ما به یک فایل جاوا اسکریپتی کامپایل شود. همانطور که می دانید با اجرای این کد فایلی به نام app.js ایجاد می شود که کامپایل شده همان فایل app.ts ما است. حالا اگر دستور زیر را اجرا کنیم، فایل جاوا اسکریپتی کامپایل شده ما به node.js تبدیل می شود:

node app.js

با اجرای کد بالا عبارت ...something درون همان ترمینال برایتان اجرا می شود. حالا اگر فایل App.js را حذف کرده و دستور بالا را برای فایل تایپ اسکریپت اجرا کنیم چه می شود؟

node app.ts

باز هم عبارت ...something نمایش داده می شود! آیا می توان نتیجه گرفت که node.js می تواند کدهای تایپ اسکریپت را اجرا کند؟ نه اصلا اینطور نیست! مسئله اینجاست که node.js اصلا به پسوند فایل توجه ندارد (چه js باشد چه ts) و با همه چیز به عنوان جاوا اسکریپت برخورد می کند. بنابراین کد console.log را به عنوان جاوا اسکریپت اجرا می کند و از آنجایی که در این کد چیز خاصی مربوط به تایپ اسکریپت نداریم، خطایی نیز دریافت نمی کنیم. مثلا اگر کد console.log را حذف کرده و به جای آن کد زیر را اجرا کنیم، قطعا به خطا برخورد خواهیم کرد:

let age: number;

age = 30;

console.log(age);

این کد از نظر تایپ اسکریپت مشکلی ندارد اما از ویژگی های تایپ اسکریپت استفاده کرده است بنابراین با اجرای کد node app.ts در ترمینال خطا می گیریم. همیشه باید فایل تایپ اسکریپت خود را به جاوا اسکریپت تبدیل کنید و پس از آن کدها را به صورت node.js اجرا نمایید. البته پکیجی به نام ts-node وجود دارد که تمام این مراحل را برای ما خودکار می کند:

https://github.com/TypeStrong/ts-node

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

پروژه ای که برای این مبحث در نظر گرفته ام یک پروژه ساده API است. فایل های قبلی را حذف کرده و پوشه جدیدی بسازید (نام این پوشه مهم نیست). سپس درون این پوشه ترمینال را باز کرده و دستور npm init را اجرا نمایید تا یک فایل package.json را دریافت کنید. من در طول دوره می خواهم از پکیج های مختلفی برای توسعه استفاده کنم بنابراین داشتن این فایل به ما کمک خواهد کرد.

در مرحله بعد دستور tsc --init را اجرا نمایید تا پروژه ما به عنوان یک پروژه تایپ اسکریپت شناخته شود و فایل tsconfig.json را دریافت کنیم. در فایل tsconfig.json می توانیم target را بر اساس نسخه node ای که نصب کرده اید انتخاب کنیم. من سال 2018 را انتخاب می کنم:

  "compilerOptions": {
    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "es2018",  
// بقیه کدها //

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

    "target": "es2018",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",  
    "moduleResolution": "node",                   /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */

این دستور به تایپ اسکریپت می گوید که چطور با دستورات import و فایل های مختلف کار کند. همچنین خصوصیات زیر را نیز تعریف کنید:

    "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. */

این کار را انجام می دهیم تا سورس کد تایپ اسکریپت را از بقیه پروژه جدا کنیم. حالا پوشه جدیدی به نام Src ایجاد کنید که کدهای تایپ اسکریپت خودمان را درون آن بنویسیم. از آنجایی که می خواهیم یک سرور محلی برای خودمان بسازیم و از Express استفاده کنیم باید وابستگی های (dependency) خودمان را با npm مشخص و نصب کنیم. کد زیر را در ترمینال خود اجرا کنید:

npm install --save express body-parser

پکیج Express که فریم ورک express.js است و پکیج body-parser نیز در تحلیل و parse بدنه درخواست های ورودی به ما کمک خواهد کرد. فعلا همین پکیج ها برای ما کافی است. پکیج های بعدی ما وابستگی های مخصوص توسعه (dev-dependency) هستند بنابراین آن ها را با دستور جداگانه زیر نصب می کنیم:

npm install --save-dev nodemon

پکیج nodemon به ما اجازه می دهد که یک فایل را با node.js اجرا کنیم و همچنین تمام فایل های ما را زیر نظر می گیرد تا زمانی که کدها را تغییر دادیم، سرور محلی را ریستارت کند. در صورتی که این پکیج را نداشته باشیم باید سرور را پس از هر تغییر به صورت دستی ریستارت کنیم که کاری زمان بر است. در قسمت های آینده وابستگی های بیشتری خواهیم داشت اما فعلا همین ها بس هستند.