در جلسات قبل با مفهوم TypeScript و نحوه نصب و راه‌اندازی آن آشنا شدیم. اما یکی از مهم‌ترین بخش‌های کار با TypeScript فرآیند کامپایل (Compile) کردن کدهای TypeScript به JavaScript است.

از آنجا که مرورگرها و محیط Node.js به صورت مستقیم TypeScript را اجرا نمی‌کنند، باید کدهای نوشته شده در فایل‌های .ts ابتدا به JavaScript تبدیل شوند. این کار توسط TypeScript Compiler انجام می‌شود.

در این جلسه با نحوه کامپایل TypeScript و همچنین تنظیمات مهم فایل tsconfig.json آشنا می‌شویم.

کامپایل TypeScript چیست؟

کامپایل در TypeScript به معنای تبدیل کدهای TypeScript به JavaScript است. این فرآیند توسط ابزاری به نام tsc (TypeScript Compiler) انجام می‌شود.

به زبان ساده روند کار به شکل زیر است:

  1. نوشتن کد در فایل‌های .ts
  2. بررسی خطاهای تایپی توسط TypeScript
  3. تبدیل کد به JavaScript
  4. اجرای فایل JavaScript در مرورگر یا Node.js

این فرآیند باعث می‌شود قبل از اجرای برنامه بسیاری از خطاهای احتمالی شناسایی شوند.

کامپایل یک فایل TypeScript

فرض کنید فایل زیر را داریم:

const username: string = "Ali";

function greet(name: string): string {
  return "Hello " + name;
}

console.log(greet(username));

نام فایل:

index.ts

برای تبدیل این فایل به JavaScript کافی است دستور زیر را اجرا کنیم:

tsc index.ts

بعد از اجرای دستور، فایل زیر ساخته می‌شود:

index.js

محتوای فایل خروجی:

var username = "Ali";
function greet(name) {
  return "Hello " + name;
}
console.log(greet(username));

کامپایل کل پروژه TypeScript

در پروژه‌های واقعی معمولاً چندین فایل TypeScript داریم. برای مدیریت بهتر این فایل‌ها از tsconfig.json استفاده می‌شود.

اگر قبلاً این فایل را نساخته‌اید، با دستور زیر آن را ایجاد کنید:

tsc --init

بعد از ایجاد فایل، برای کامپایل کل پروژه فقط کافی است دستور زیر را اجرا کنید:

tsc

TypeScript تمام فایل‌های .ts موجود در پروژه را کامپایل می‌کند.

فایل tsconfig.json چیست؟

فایل tsconfig.json مهم‌ترین فایل تنظیمات در پروژه‌های TypeScript است. این فایل مشخص می‌کند:

  • کدام فایل‌ها کامپایل شوند
  • خروجی JavaScript در چه مسیری قرار بگیرد
  • نسخه JavaScript خروجی چه باشد
  • قوانین تایپ چگونه اعمال شوند

نمونه یک فایل tsconfig ساده:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true
  }
}

مهم‌ترین تنظیمات tsconfig.json

در ادامه چند گزینه بسیار مهم در این فایل را بررسی می‌کنیم.

target

مشخص می‌کند خروجی JavaScript برای چه نسخه‌ای از ECMAScript تولید شود.

مثال:

"target": "ES6"

یا

"target": "ESNext"

هرچه نسخه جدیدتر باشد، کد مدرن‌تری تولید می‌شود.

module

نوع سیستم ماژول‌بندی را مشخص می‌کند.

نمونه‌ها:

"module": "CommonJS"

برای Node.js

یا

"module": "ESNext"

برای پروژه‌های مدرن فرانت‌اند.

rootDir

مسیر فایل‌های TypeScript را مشخص می‌کند.

"rootDir": "./src"

یعنی تمام فایل‌های .ts داخل پوشه src قرار دارند.

outDir

محل ذخیره فایل‌های JavaScript خروجی را مشخص می‌کند.

"outDir": "./dist"

در این حالت فایل‌های کامپایل‌شده در پوشه dist قرار می‌گیرند.

strict

حالت strict mode را فعال می‌کند.

"strict": true

با فعال بودن این گزینه، TypeScript بررسی‌های دقیق‌تری انجام می‌دهد و بسیاری از خطاهای احتمالی را زودتر تشخیص می‌دهد.

در پروژه‌های واقعی توصیه می‌شود همیشه این گزینه فعال باشد.

include و exclude

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

مثال:

{
  "include": ["src"],
  "exclude": ["node_modules"]
}

در این حالت فقط فایل‌های داخل src کامپایل می‌شوند.

کامپایل خودکار با Watch Mode

اگر نمی‌خواهید هر بار دستی پروژه را کامپایل کنید، می‌توانید از watch mode استفاده کنید.

tsc --watch

در این حالت هر تغییری در فایل‌های TypeScript به صورت خودکار کامپایل می‌شود.

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

جمع‌بندی

در این جلسه با نحوه کامپایل TypeScript به JavaScript آشنا شدیم و دیدیم که چگونه ابزار tsc کدهای TypeScript را به JavaScript تبدیل می‌کند.

همچنین با فایل مهم tsconfig.json و تنظیمات کلیدی آن مانند target، module، rootDir و outDir آشنا شدیم.

دسترسی به ویدیوهای کامل دوره

برای مشاهده ویدیوهای کامل هر جلسه، دریافت تمرین‌ها، فایل‌ها و پشتیبانی، می‌توانید دوره کامل را تهیه کنید.

آموزش TypeScript از صفر تا پیشرفته | یادگیری تایپ‌اسکریپت برای پروژه‌های واقعی