آموزش TypeScript جلسه ۲: نصب TypeScript و راه‌اندازی محیط توسعه

در جلسه قبل با مفهوم TypeScript و مزایای استفاده از تایپ ایستا آشنا شدیم. حالا وقت آن رسیده وارد مرحله عملی شویم: نصب TypeScript و آماده‌سازی محیط توسعه برای نوشتن کدهای تایپ‌دار و کامپایل آن‌ها به JavaScript.

در این جلسه قدم‌به‌قدم یاد می‌گیریم چطور TypeScript را نصب کنیم، یک پروژه جدید بسازیم، تنظیمات پایه را انجام دهیم و اولین فایل .ts خود را اجرا کنیم.

پیش‌نیازها

برای شروع نیاز به نصب نسخه‌ی اخیر Node.js دارید.
می‌توانید آن را از nodejs.org دانلود و نصب کنید.

پس از نصب، با دستور زیر مطمئن شوید Node و npm به‌درستی نصب شده‌اند:

node -v
npm -v

اگر شماره نسخه‌ها نمایش داده شد، آماده‌ی شروع هستید.

مرحله ۱: نصب TypeScript

برای نصب TypeScript دو روش وجود دارد:

روش ۱ — نصب سراسری (Global)

اگر می‌خواهید در چند پروژه مختلف از TypeScript استفاده کنید، آن را به صورت سراسری نصب کنید:

npm install -g typescript

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

tsc -v

اگر پیام نسخه دریافت کردید مانند:

Version 5.x.x

به معنی نصب موفق است.

روش ۲ — نصب درون پروژه (Local)

برای مدیریت نسخه اختصاصی TS در هر پروژه، معمولاً بهتر است به‌صورت محلی نصب شود:

npm init -y
npm install typescript --save-dev

حالا دستور زیر را اجرا کنید تا فایل تنظیمات TypeScript ساخته شود:

npx tsc --init

مرحله ۲: تنظیم فایل tsconfig.json

با اجرای دستور tsc --init، فایل tsconfig.json ایجاد می‌شود. این فایل شامل تنظیمات کامپایلر TypeScript است.

نمونه تنظیم ساده برای شروع پروژه:

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

توضیح بخش‌های مهم:

• target: نسخه JavaScript خروجی (مثلاً ES6)
• module: نوع ماژول‌بندی (در Node.js معمولا CommonJS)
• rootDir: مسیر کدهای TypeScript
• outDir: مسیر خروجی فایل‌های کامپایل‌شده JS
• strict: فعال‌سازی حالت تایپ سخت‌گیرانه برای اعتبارسنجی بهتر
• esModuleInterop: برای سازگاری با import و export مدرن

مرحله ۳: ساخت اولین فایل TypeScript

در پوشه پروژه، یک فولدر src بسازید و داخلش فایل index.ts ایجاد کنید.

const message: string = "سلام TypeScript!";
console.log(message);

این فایل اولین کد TypeScript شماست.

مرحله ۴: کامپایل کد TypeScript به JavaScript

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

npx tsc

بعد از اجرا، در پوشه dist یک فایل index.js ساخته می‌شود که خروجی JavaScript است:

"use strict";
const message = "سلام TypeScript!";
console.log(message);

برای اجرا کردن آن در Node:

node dist/index.js

خروجی:

سلام TypeScript!

تبریک! اولین فایل TypeScript شما با موفقیت اجرا شد

مرحله ۵: اجرای TypeScript به‌صورت خودکار

اگر نمی‌خواهید هر بار دستی npx tsc بزنید، می‌توانید از دستور زیر برای کامپایل خودکار استفاده کنید:

npx tsc --watch

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

مرحله ۶: توصیه برای محیط توسعه (IDE)

Visual Studio Code بهترین انتخاب برای کار با TypeScript است.
این ویرایشگر از طریق افزونه داخلی TypeScript موارد زیر را ارائه می‌دهد:

• نمایش خطا در لحظه
• autocomplete هوشمند
• رنگ‌بندی و پیشنهاد نوع‌ها
• اجرای آسان کامپایل با کلید F5

نصب VS Code را از code.visualstudio.com انجام دهید.

جمع‌بندی

در این جلسه یاد گرفتیم چطور TypeScript را نصب کنیم، تنظیمات اولیه پروژه را انجام دهیم و اولین فایل تایپ‌دار خود را بنویسیم و اجرا کنیم.

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

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