در این مقاله میخوایم یاد بگیریم که چطور میشه با استفاده از TypeScript یه اَپ Node.Js نوشت و اون رو تست و دیباگ کرد. مدیریت پروژه‌های بزرگ JavaScript میتونه چالش برانگیز باشه. مخصوصا که باید تمام بخش‌های پروژه هماهنگ باشن. شما میتونید از یونیت تست و تایپ‌ها (که جاوا اسکریپت ندارد) یا ترکیب هر دو با هم برای حل این مشکل استفاده کنید.
اینجاست که TypeScript خودش رو نشون میده. TypeScript یک نسخه استاندارد شده از JavaScript هست که به سادگی کامپایل میشه.
چیزایی که توی این مقاله یاد می‌گیریم:
- TypeScript چیست؟
- مزایای استفاده از TypeScript چیست؟
- چگونه می‌توان یک پروژه برای استفاده از TypeScript ایجاد کرد؟
- اضافه کردن linters
- نوشتن تست(آزمون – آزمایش)
- دیباگ (اشکال زدایی) کردن اپ‌های نوشته شده با TypeScript
TypeScript چیست؟
با رشد روز افزون قدرت و توسعه حوزه‌های استفاده از JavaScript مثلا توسعه اپ‌های Native و استفاده از آن در وب سرویس‌هاو برنامه‌های سمت سرور باعث آن شد که شاهد پیداش برنامه‌های مبتنی بر JavaScript با سایزهای بی سابقه‌ای باشیم و این بیانگر این بود که تولید برنامه‌های مبتنی بر JavaScript در مقیاس‌های بزرگ امر دشواری است. و در اینجا بود که زبان TypeScript توسط ماکروسافت ارائه شد. و مشکل توسعه نرم‌افزارهای JavaScriptی با مقیاس بالا را حل کرد. این زبان از شئ‌گرایی پشتیبانی می‌کند و کدهای این زبان در نهایت به کدهای JavaScript ترجمه می‌شوند.
مزایای استفاده از TypeScript چیست؟
- اختیاری بودن استفاده از انواع (typing) های استاتیک سبب خواناتر و خطایابی آسان‌تر برنامه‌ها شده است.
- به عنوان یک توسعه دهنده میتوانید از ECMAScript استفاده کنید که متاسفانه توسط موتور V8 فعلا پشتیبانی نمی‌شود. (اما با استفاده از TypeScript میتوانید امکانات بسیار زیادی داشته باشید)
- کدهای زبان Typescript در ابتدا کامپایل می شوند و سپس به کدهای JavaScript تبدیل می شوند و این سبب می شود قبل از اجرای کدها از خطاهای موجود در برنامه مطلع شوید.
- استفاده از interface
- ابزارهای عالی همانند IntelliSense
- امکان کد نویسی با Syntaxهای آشنای شی گرائی
شروع با TypeScript و Node
TypeScript یک چک کننده نوع استاتیک برای JavaScript است. این بدین معناست که برای یافتن اشکالات از اطلاعات درون نوع‌های (تایپ‌های) مختلف استفاده می‌کند. مثلا: یک رشته (String) یک متد toLowerCase() دارد, اما یک parseInt() ندارد. البته میتوانید Type Systemهای TypeScript را نسبت به تعاریف خودتون تغییر بدید.
از آنجا که TypeScript یک نسخه استاندارد شده از JavaScript است. فقط با تغییر فرمت (پسوند) فایل‌های JavaScript از .js به .ts آن‌ها را اجرا کنید. بنابر این میتونید به سادگی و آرام آرام TypeScript رو به تیمتون معرفی کنید.
نکته: TypeScript هیچ کاری در زمان اجرا انجام نمی دهد، فقط در طی زمان کامپایل کار می کند. بدین معنا که شما تنها فایل‌های JavaScript را اجرا می کنید.
برای شروع با TypeScript، اون رو از npm دریافت/نصب می‌کنیم:
$ npm install -g typescriptخب اولین برنامه TypeScriptمون رو می‌نویسیم. یک تابع ساده برای سلام به یک شخص که پارامتری به نام person دریافت می‌کند!
//first.ts
function first(person: string) {
return `Hello ${person}!`
}
const name = 'Gashtasb'
console.log(first(name))یکی از مواردی که باید بهش دقت کنید String جلوی پارامتر درون تابع first هست که به کامپایلر TypeScript میگه تابع first انتظار یک ورودی از نوع String را می‌کشد.
خب دیگه وقتش کامپایلش کنیم!
tsc first.tsبایید نگاهی به خروجی کامپایل داشته باشیم! همانطور که می‌بینید چیز آنچنانی تغییر نکرده و فقط String جلوی پارامتر تابع first حذف شده است.
function first(person) {
return "Hello " + person + "!";
}
var Name = 'Node Hero';
console.log(first(Name));شاید از خودتون بپرسید چی می‌شد اگر یک مقدار عددی بجای رشته به متغیر Name اختصاص میدادیم؟ ۱۰۰٪ برنامه ارور می‌داد.
first.ts(10,21): error TS2345: Argument of type '3'
is not assignable to parameter of type 'string'.ساخت یک اَپ Node.Js با استفاده از TypeScript
۱. محیط توسعه (IDE) خودتون رو باز کنید.
برای ساخت اَپ با استفاده از TypeScript مطمئن بشید که NodeJs رو سیستمون نصب هست. در این مقاله از Node.Js ۸ استفاده شده.
پیشنهاد می‌کنم Node.Js رو با استفاده از nvm نصب کنید. با استفاده از nvm میتونید چند نسخه متفاوت از node رو نصب کنید و در مواقع مورد نیاز بین اونها جابجا بشید! (سویچ کنید)
# install nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
# install node 8
nvm install 8
# to make node 8 the default
nvm alias default 8پس از آنکه Node.Js ۸ را نصب کردید. شاخه‌ای (دایرکتوری) که قرار است پروژه در آن قرار بگیرد را ایجاد کنید و فایل package.json پروژه را در آن ایجاد کنید.
npm init۲. ایجاد ساختار پروژه
هنگام استفاده از TypeScript، توصیه می شود تمام فایل های خود را در پوشه src قرار دهید.
در انتهای این آموزش، ما با ساختار پروژه زیر روبرو خواهیم شد:
ابتدا فایل app.ts را می‌سازیم که منطق وب سرور ما را در خود جای می‌دهد و از express استفاده می‌کند.
در این فایل یک کلاس به نام app می‌سازیم. که وب سرور ما را encapsulate می‌کند و متدی به نام mountRoutes را به ما ارائه می‌دهد که .
import * as express from 'express'
class App {
public express
constructor () {
this.express = express()
this.mountRoutes()
}
private mountRoutes (): void {
const router = express.Router()
router.get('/', (req, res) => {
res.json({
message: 'Hello World!'
})
})
this.express.use('/', router)
}
}
export default new App().expressهمچنین یک فایل به نام index.ts می‌سازیم تا وب سرور اجرا شود.
import app from './App'
const port = process.env.PORT || 3000
app.listen(port, (err) => {
if (err) {
return console.log(err)
}
return console.log(`server is listening on ${port}`)
})با این کار ما حداقل در تئوری یک وب سرور فانکشنال داریم. برای اجرای پروژه باید کدهای TypeScript خودمون رو به JavaScript کامپایل کنیم!
۳. تنظیمات TypeScript
ما می‌توانیم با استفاده از CLI یا یک فایل به نام tsconfig.json تنظیمات مورد نظر خودمون رو بر کامپایلر TypeScript اعمال کنیم.
با استفاده از این فایل تنظیمات ما به کاپایلر TypeScript می‌گیم که خروجی کامپایل ما چی باشه (مثل ES5, ES6, ES7 و…) و از چه ماژولی استفاده کنه و مسیر ذخیره خروجی JavaScript کجا باشه یا مثلا نقشه منبع ایجاد بشه یا نه!
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "dist",
"sourceMap": true
},
"files": [
"./node_modules/@types/mocha/index.d.ts",
"./node_modules/@types/node/index.d.ts"
],
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
]
}بعد از اینکه فایل پیکربندی TypeScript رو به پروژه اضافه کردید میتونید با دستور tsc برنامه رو کامپایل و اجرا کنید.
نکته: اگر نمی‌تونید TypeScript رو به صورت سراسری نصب کنید بهترین کار اینه که اون رو به پیشنیازهای پروژه اضافه کنید.
۴- اضافه کردن ESLint
مثل خیلی از پروژه‌ها شما به linterها برای چک کردن مشکلات استایل کدتون نیاز دارید و TypeScript هم مستثنا نیست.
برای استفاده از ESLint با TypeScript باید یه بسته اضافه نسب کنیم (یک پارسر) خب با این بسته ESLint میتونه TypeScript رو درک کنه. وقتی که بسته‌ی typescript-eslint-parser رو نصب کردید. باید اون رو به عنوان پارسر ESLint تنظیم کنید:
# .eslintrc.yaml
---
extends: airbnb-base
env:
node: true
mocha: true
es6: true
parser: typescript-eslint-parser
parserOptions:
sourceType: module
ecmaFeatures:
modules: true
زمانی که eslint src –ext ts رو اجرا می‌کنید دقیقا همون ارورها و هشدارهای زمان اجرای فایل‌های TypeScript رو دریافت می‌کنید.
۵- تست اپلیکیشن
تست اپلیکیشن‌های مبتنی بر TypeScript اساساً همانند تست سایر برنامه‌های مبتنی بر Node.Js هست.
تنها چیزی که باید به خاطر داشته باشید اینه که قبل از تست باید برنامه رو کامپایل کنید. و انجام اینکار به سادگی اجرای دستور tsc && mocha dist/**/*.spec.js هست.
۶- ساخت Docker image
هنگامی که اپ خودتون رو آماده کردید احتمالا میخواید که اون رو به صورت یک Docker image در بیارید. برای این کار باید این دو قدم رو بردارید:
- ساختن برنامه (کامپایل از TypeScript به JavaScript)
- اجرای Node.Js از منبع ساخته شده
FROM risingstack/alpine:3.4-v6.9.4-4.2.0
ENV PORT 3001
EXPOSE 3001
COPY package.json package.json
RUN npm install
COPY . .
RUN npm run build
CMD ["node", "dist/"]
۷- اشکال‌زدایی (دیباگ) با استفاده از source-maps
همانطور که ساختن source-maps رو شروع می‌کنیم. میتونیم از اونها برای پیداکردن اشکالات برنامه استفاده کنیم. برای پیدا کردن اشکالات برنامه با دستور زیر پروسس‌های Node.js را شروع می‌کنیم:
node --inspect dist/
خروجی چیزی شبیه به این خواهد بود:
To start debugging, open the following URL in Chrome:
chrome-devtools://devtools/remote/serve_file/@60cd6e859b9f557d2312f5bf532f6aec5f284980/
inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/23cd0c34-3281-49d9-81c8-8bc3e0bc353a
server is listening on 3000برای شروع واقعی پروسه اشکال‌زدایی گوگل کروم خودتون رو باز کنید و به chrome://inspect برید. یک هدف از راه دور باید اونجا باشه 🙂 فقط روی inspect کلیک کنید. این Chrome DevTools رو براتون اجرا می‌کنه.
در اینجا میتونید سورس رو مستقیم مشاهده کنید و از breakpoints و watchers در TypeScript استفاده کنید.
پ.ن: source-map تنها در Node.Js 8 به بالا پشتیبانی می‌شود.