آموزش TypeScript و مفاهیم پایه Angular

TypeScript و مفاهیم پایه Angular از مهم‌ترین موضوعات در دنیای توسعه وب مدرن هستند. اگر شما به دنبال آموزش Angular هستید و می‌خواهید این چارچوب محبوب جاوا اسکریپت را بهتر درک کنید، باید ابتدا با TypeScript و سپس مفاهیم پایه Angular آشنا شوید. در این مقاله، از مفاهیم اولیه شروع می‌کنیم و به صورت گام‌به‌گام شما را برای ساخت اولین اپلیکیشن Angular آماده می‌کنیم.

مقدمه TypeScript: تعریف و مزایای TypeScript

TypeScript یک زبان برنامه‌نویسی متن‌باز است که به عنوان نسخه پیشرفته‌ای از جاوا اسکریپت طراحی شده است. این زبان که توسط مایکروسافت توسعه داده شده، ویژگی‌های قدرتمندی را برای سازماندهی و مدیریت کد به پروژه‌های کوچک و بزرگ ارائه می‌دهد. با اضافه کردن قابلیت‌هایی مانند انواع ایستا (Static Typing)، تزئین‌کننده‌ها (Decorators)، و ابزارهای پیشرفته‌تر، TypeScript به توسعه‌دهندگان این امکان را می‌دهد که کدی خواناتر، مطمئن‌تر، و مقیاس‌پذیرتر بنویسند.

چرا TypeScript توسعه داده شد؟

جاوا اسکریپت در ابتدا به عنوان یک زبان ساده برای تعاملات کاربر و مرورگر طراحی شده بود. با رشد نیازمندی‌های برنامه‌های وب، این زبان به ابزاری برای پروژه‌های بزرگ و پیچیده تبدیل شد. اما جاوا اسکریپت به دلیل طبیعت پویا و نبود کنترل‌های سختگیرانه، در پروژه‌های بزرگ مشکلاتی مانند شناسایی خطاها یا مدیریت کد پیچیده ایجاد می‌کرد. TypeScript برای رفع این چالش‌ها ارائه شد:

افزودن کنترل نوع داده‌ها برای کاهش خطاها.
ارائه ابزارهای پیشرفته کدنویسی برای توسعه‌دهندگان.
فراهم کردن سازگاری کامل با جاوا اسکریپت.

مزایای استفاده از TypeScript

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

let username: string = 'Angular';
username = 42; // خطا: مقدار باید از نوع string باشد

کدنویسی ساختارمند و مقیاس‌پذیر
TypeScript ویژگی‌هایی مانند کلاس‌ها، اینترفیس‌ها و ماژول‌ها را ارائه می‌دهد. این ابزارها به شما اجازه می‌دهند تا کدی ساختاریافته‌تر و بهتر سازماندهی‌شده برای پروژه‌های بزرگ بنویسید:

class User {
    constructor(public name: string, public age: number) {}
}

const newUser = new User('John', 30);
console.log(newUser.name); // John

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

پشتیبانی از ویژگی‌های مدرن جاوا اسکریپت
TypeScript از ویژگی‌های جدید جاوا اسکریپت (ES6 و بالاتر) مانند آرایه‌های جدید، توابع فلش و ماژول‌ها پشتیبانی می‌کند. علاوه بر این، TypeScript این قابلیت‌ها را به نسخه‌های قدیمی جاوا اسکریپت نیز تبدیل می‌کند، بنابراین شما می‌توانید از ویژگی‌های مدرن در مرورگرهای قدیمی‌تر استفاده کنید.

ابزارهای توسعه‌دهنده پیشرفته
TypeScript با ادغام با ویرایشگرهای کد مانند Visual Studio Code تجربه کدنویسی پیشرفته‌تری را ارائه می‌دهد. ویژگی‌هایی مانند تکمیل خودکار کد (Code Autocomplete)، توضیحات درون‌خطی و رفع سریع خطاها، فرآیند کدنویسی را ساده‌تر و کارآمدتر می‌کند.

مفاهیم اصلی در TypeScript

TypeScript با ارائه مفاهیم کلیدی و قدرتمند به توسعه‌دهندگان کمک می‌کند تا کدی ساختاریافته‌تر، خواناتر، و مطمئن‌تر بنویسند. در این بخش، به بررسی چهار مفهوم اصلی این زبان می‌پردازیم:

1. Types (انواع داده‌ای)

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

مثال‌های رایج:

let age: number = 25;         // متغیری با نوع عددی
let name: string = 'Angular'; // متغیری با نوع رشته‌ای
let isPublished: boolean = true; // متغیری با نوع بولین

 

انواع پیش‌فرض TypeScript:

number (اعداد)
string (رشته‌ها)
boolean (مقادیر درست/غلط)
array (آرایه‌ها)
any (هر نوع داده‌ای)
void (برای توابعی که مقدار برنمی‌گردانند)

مثال آرایه:

let numbers: number[] = [1, 2, 3, 4];
let names: string[] = ['Alice', 'Bob'];

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

2. Interfaces (رابط‌ها)

رابط‌ها در TypeScript ابزاری برای تعریف قراردادها بین اجزای مختلف کد هستند. این قابلیت به شما اجازه می‌دهد ساختاری از پیش تعریف‌شده برای اشیاء یا کلاس‌ها ارائه دهید.

تعریف رابط:

interface Person {
  name: string;
  age: number;
}

 

استفاده از رابط در شیء:

const user: Person = {
  name: 'John',
  age: 30,
};

 

کاربردها:

تعریف شکل داده‌هایی که به توابع یا کلاس‌ها ارسال می‌شوند.
کمک به اطمینان از رعایت ساختار داده‌ها در پروژه‌های بزرگ.

رابط‌های پیشرفته با ویژگی‌های اختیاری و توابع:

interface Employee {
  name: string;
  age?: number; // اختیاری
  work(): void; // تابع
}

const dev: Employee = {
  name: 'Alice',
  work: () => console.log('Coding...'),
};

3. Classes (کلاس‌ها)

کلاس‌ها ساختاری قدرتمند برای سازماندهی کد و ایجاد اشیاء در TypeScript هستند. کلاس‌ها امکان تعریف ویژگی‌ها (Properties) و متدها (Methods) را فراهم می‌کنند و به شما اجازه می‌دهند تا رفتار و داده‌ها را با هم ترکیب کنید.

تعریف یک کلاس ساده:

class Car {
  brand: string;

  constructor(brand: string) {
    this.brand = brand;
  }

  drive() {
    console.log(`${this.brand} is driving`);
  }
}

const myCar = new Car('Toyota');
myCar.drive(); // Toyota is driving

 

ویژگی‌های کلاس‌ها در TypeScript:

سازنده (Constructor): متدی ویژه که هنگام ساخت شیء از کلاس اجرا می‌شود.
سطوح دسترسی: مانند public، private، و protected برای کنترل دسترسی به ویژگی‌ها و متدها.
وراثت: برای اشتراک‌گذاری ویژگی‌ها و متدها بین کلاس‌ها.

class ElectricCar extends Car {
  batteryLife: number;

  constructor(brand: string, batteryLife: number) {
    super(brand); // ارجاع به سازنده کلاس پدر
    this.batteryLife = batteryLife;
  }

  charge() {
    console.log(`${this.brand} is charging with ${this.batteryLife}% battery`);
  }
}

4. Decorators (تزئین‌کننده‌ها)

تزئین‌کننده‌ها ویژگی خاص TypeScript هستند که امکان افزودن متاداده یا تغییر رفتار کلاس‌ها، متدها، ویژگی‌ها، و پارامترها را فراهم می‌کنند. این قابلیت به طور گسترده در Angular برای تعریف اجزای مختلف مانند کامپوننت‌ها، سرویس‌ها، و ماژول‌ها استفاده می‌شود.

یک مثال ساده از تزئین‌کننده:

function Log(target: any, propertyName: string) {
  console.log(`${propertyName} was accessed`);
}

class Example {
  @Log
  title: string = 'Hello Angular';
}

تزئین‌کننده‌های پرکاربرد در Angular:

@Component: برای تعریف کامپوننت‌ها.
@Injectable: برای تعریف سرویس‌ها.
@NgModule: برای تعریف ماژول‌ها.

مثال تزئین‌کننده کلاس:

function Timestamp(constructor: Function) {
  console.log(`Class ${constructor.name} was created at ${new Date()}`);
}

@Timestamp
class Service {
  constructor() {}
}

کاربردها:

افزودن اطلاعات اضافی به کلاس‌ها و متدها.
تغییر رفتار کلاس‌ها و متدها.
استفاده در فریم‌ورک‌هایی مانند Angular برای تعریف ساختار پروژه.

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

اولین کامپوننت Angular

کامپوننت‌ها بخش‌های اصلی و پایه‌ای هر اپلیکیشن Angular هستند. با استفاده از کامپوننت‌ها، می‌توانید رابط کاربری اپلیکیشن را طراحی و منطق مرتبط با آن را مدیریت کنید. هر کامپوننت در Angular شامل سه بخش اصلی است:

HTML: برای تعریف ساختار و محتوای صفحه.
CSS: برای استایل‌دهی به عناصر صفحه.
TypeScript: برای پیاده‌سازی منطق و رفتار کامپوننت.

تعریف کامپوننت با @Component

برای تعریف یک کامپوننت در Angular، از دکوراتور @Component استفاده می‌شود. این دکوراتور اطلاعات ضروری کامپوننت، از جمله انتخابگر (selector)، قالب (template) و استایل‌ها (styles) را مشخص می‌کند.

مثال یک کامپوننت ساده:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello', // نام انتخابگر
  template: `<h1>Hello, Angular!</h1>`, // قالب HTML
  styles: ['h1 { color: blue; }'] // استایل‌های داخلی
})
export class HelloComponent {}

جزئیات کد بالا:

selector: نام انتخابگر HTML برای استفاده از این کامپوننت. مثلاً <app-hello></app-hello>.
template: قالب HTML مرتبط با این کامپوننت.
styles: استایل‌های CSS که فقط در محدوده این کامپوننت اعمال می‌شوند.

ساختار HTML و CSS در کامپوننت‌ها

در پروژه‌های بزرگ‌تر، بهتر است فایل‌های HTML و CSS از فایل TypeScript جدا شوند تا خوانایی و مدیریت کد آسان‌تر باشد. برای این کار، به جای مشخص کردن template و styles به صورت مستقیم، از templateUrl و styleUrls استفاده می‌کنیم.

مثال:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html', // فایل HTML جداگانه
  styleUrls: ['./example.component.css'] // فایل CSS جداگانه
})
export class ExampleComponent {}

فایل example.component.html:

<h1>Welcome to Angular!</h1>
<p>This is an example component.</p>

فایل example.component.css:

h1 {
  color: green;
}
p {
  font-size: 18px;
}

مزایا:

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

مفهوم Data Binding در Angular

Data Binding یا اتصال داده‌ها، یکی از مفاهیم کلیدی در Angular است که به شما اجازه می‌دهد داده‌ها و رابط کاربری (UI) را به هم متصل کنید. این قابلیت باعث می‌شود تغییرات در داده‌ها به صورت خودکار در UI اعمال شوند و برعکس.

انواع Data Binding:

اتصال یک‌طرفه (One-Way Binding): داده‌ها از منطق کامپوننت (TypeScript) به رابط کاربری (HTML) منتقل می‌شوند.

مثال:

export class ExampleComponent {
  message: string = 'Hello, Angular!';
}

HTML:

<p>{{ message }}</p>

خروجی:

Hello, Angular!

اتصال دوطرفه (Two-Way Binding): داده‌ها بین کامپوننت و UI به صورت دوطرفه همگام‌سازی می‌شوند. برای این نوع اتصال، از دستور [(ngModel)] استفاده می‌شود (نیازمند ماژول FormsModule).

مثال:

export class ExampleComponent {
  username: string = '';
}

HTML:

<input [(ngModel)]="username" placeholder="Enter your name" />
<p>Your username is: {{ username }}</p>

توضیح:
هر تغییری که کاربر در فیلد ورودی وارد کند، به متغیر username در کامپوننت منتقل می‌شود و برعکس.

ترکیب مثال‌ها: اولین کامپوننت عملی

یک کامپوننت کامل که از Data Binding و ساختار جداگانه استفاده می‌کند:

app-user.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './app-user.component.html',
  styleUrls: ['./app-user.component.css']
})
export class UserComponent {
  username: string = 'Guest';
}

app-user.component.html:

<h1>Welcome, {{ username }}!</h1>
<input [(ngModel)]="username" placeholder="Enter your username" />
<p>Your username is: {{ username }}</p>

app-user.component.css:

h1 {
  font-family: Arial, sans-serif;
  color: navy;
}

input {
  margin-top: 10px;
  padding: 5px;
}

خروجی:

صفحه‌ای با یک عنوان و فیلد ورودی.
تغییر نام کاربر در فیلد ورودی، بلافاصله در عنوان نمایش داده می‌شود.

کامپوننت‌ها در Angular با استفاده از دکوراتور @Component تعریف می‌شوند و ابزار اصلی برای ساخت رابط کاربری و مدیریت منطق هستند. امکاناتی مانند Data Binding و قابلیت تفکیک HTML و CSS، توسعه برنامه‌ها را سریع‌تر و ساختارمندتر می‌کنند. این مفاهیم پایه‌ای، اساس کار با TypeScript و مفاهیم پایه Angular هستند.

ایجاد اولین اپلیکیشن ساده

برای ساخت یک اپلیکیشن Angular ساده، باید از چند کامپوننت استفاده کنید و نحوه اتصال و تعامل بین آن‌ها را بیاموزید. در این بخش، با ایجاد کامپوننت‌های مختلف، نمایش داده‌ها در رابط کاربری (UI)، و ارتباط بین کامپوننت‌ها آشنا می‌شویم.

1. ایجاد و اتصال چند کامپوننت

ابتدا باید کامپوننت‌های مورد نیاز خود را ایجاد کنید. به عنوان مثال، فرض کنید می‌خواهید اپلیکیشنی با یک Header، Footer و بخش اصلی محتوا ایجاد کنید.

ایجاد کامپوننت‌ها

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

ng generate component header
ng generate component footer

این دستورات دو کامپوننت با نام‌های header و footer ایجاد می‌کنند. هر کامپوننت شامل فایل‌های زیر خواهد بود:

header.component.ts: منطق کامپوننت.
header.component.html: قالب HTML.
header.component.css: استایل CSS.
header.component.spec.ts: فایل تست (اختیاری).

استفاده از کامپوننت‌ها در AppComponent

پس از ایجاد کامپوننت‌ها، باید آن‌ها را در فایل اصلی اپلیکیشن (app.component.html) وارد کنید. هر کامپوننت با استفاده از انتخابگر (selector) خود شناخته می‌شود.

مثال:

<app-header></app-header>
<div>Main Content</div>
<app-footer></app-footer>

توضیحات:

<app-header> و <app-footer> انتخابگرهای کامپوننت‌های ایجاد شده هستند.
بخش اصلی محتوا به صورت مستقیم درون app.component.html نوشته شده است.

خروجی:

صفحه‌ای که شامل:

Header در بالا.
Main Content در وسط.
Footer در پایین است.

2. نمایش داده‌ها در UI

یکی از قابلیت‌های مهم Angular، توانایی نمایش داده‌ها در رابط کاربری است. این کار با استفاده از ویژگی Data Binding انجام می‌شود.
مثال:

در فایل header.component.ts، متغیری به نام title تعریف کنید:

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  title: string = 'Welcome to My App';
}

در فایل header.component.html، مقدار متغیر title را نمایش دهید:

<h1>{{ title }}</h1>

خروجی:
عنوان “Welcome to My App” در صفحه نمایش داده می‌شود.

3. تعامل بین کامپوننت‌ها

برای ایجاد ارتباط و تعامل بین کامپوننت‌ها، Angular از دایرکتیوهای @Input و @Output استفاده می‌کند. این ویژگی‌ها امکان ارسال داده از یک کامپوننت والد به فرزند و بالعکس را فراهم می‌کنند.
ارسال داده از والد به فرزند با @Input

فرض کنید می‌خواهید داده‌ای را از کامپوننت اصلی (والد) به کامپوننت فرزند ارسال کنید.

مثال:

در کامپوننت فرزند (مثلاً header.component.ts):

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-header',
  template: `<h1>{{ title }}</h1>`,
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  @Input() title: string = ''; // دریافت داده از والد
}

در کامپوننت والد (app.component.html):

<app-header [title]="'Dynamic Title'"></app-header>

خروجی:
عنوان “Dynamic Title” در کامپوننت Header نمایش داده می‌شود.

ارسال داده از فرزند به والد با @Output

برای ارسال داده از فرزند به والد، از @Output و یک EventEmitter استفاده می‌کنیم.

مثال:

در کامپوننت فرزند (footer.component.ts):

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-footer',
  template: `<button (click)="sendMessage()">Send Message</button>`,
  styleUrls: ['./footer.component.css']
})
export class FooterComponent {
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Hello from Footer');
  }
}

در کامپوننت والد (app.component.html):

<app-footer (messageEvent)="receiveMessage($event)"></app-footer>
<p>{{ receivedMessage }}</p>

در کامپوننت والد (app.component.ts):

export class AppComponent {
  receivedMessage: string = '';

  receiveMessage(message: string) {
    this.receivedMessage = message;
  }
}

خروجی:

با کلیک روی دکمه در Footer، پیام “Hello from Footer” به والد ارسال شده و نمایش داده می‌شود.

در این بخش با نحوه ایجاد چند کامپوننت، نمایش داده‌ها در UI و تعامل بین کامپوننت‌ها در Angular آشنا شدید. این اصول، پایه‌ای‌ترین مفاهیم در TypeScript و مفاهیم پایه Angular هستند که برای ساخت اپلیکیشن‌های پیچیده‌تر ضروری‌اند.

نتیجه‌گیری

در این مقاله، به بررسی TypeScript و مفاهیم پایه Angular پرداختیم و مراحل مختلفی را از تعریف TypeScript تا ایجاد اولین اپلیکیشن ساده با Angular توضیح دادیم. یاد گرفتیم که TypeScript به عنوان یک زبان برنامه‌نویسی پیشرفته، امکاناتی چون انواع داده‌ای ایستا، کلاس‌ها، اینترفیس‌ها و تزئین‌کننده‌ها را فراهم می‌کند که به توسعه‌دهندگان کمک می‌کند کدی ساختارمندتر و قابل پیش‌بینی‌تری بنویسند. همچنین، با ایجاد و اتصال چند کامپوننت در Angular، مفهوم Data Binding و نحوه ارتباط بین کامپوننت‌ها را به خوبی درک کردیم.

این مفاهیم پایه‌ای برای شروع کار با Angular و TypeScript هستند و می‌توانند به شما در ساخت اپلیکیشن‌های قدرتمند و مقیاس‌پذیر کمک کنند. اگر علاقه‌مند به یادگیری بیشتر هستید، با استفاده از منابع معتبر می‌توانید به دانش خود در این زمینه افزوده و توانایی‌های خود را تقویت کنید.