TypeScript چیست؟ آموزش کامل و جامع TypeScript

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

function greet(user: User): string {
  return `سلام ${user.name}، ${user.age} ساله!`;
}

const user: User = {
  name: "علی",
  age: 25
};

console.log(greet(user));

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

// انواع داده پایه
let name: string = "علی";
let age: number = 25;
let isActive: boolean = true;

// آرایه‌ها
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["علی", "مریم"];

// تاپل
let coordinate: [number, number] = [10, 20];

// enum
enum Direction {
  North,
  South,
  East,
  West
}

// any و unknown
let dynamicValue: any = 4;
let safeUnknown: unknown = "test";

interface Vehicle {
  brand: string;
  model: string;
  year: number;
  start(): void;
  stop(): void;
}

class Car implements Vehicle {
  constructor(
    public brand: string,
    public model: string,
    public year: number
  ) {}

  start() {
    console.log(`${this.brand} ${this.model} روشن شد`);
  }

  stop() {
    console.log(`${this.brand} ${this.model} خاموش شد`);
  }
}

class Person {
  private id: number;
  protected name: string;
  public age: number;

  constructor(name: string, age: number) {
    this.id = Math.random();
    this.name = name;
    this.age = age;
  }

  public introduce(): string {
    return `من ${this.name} هستم و ${this.age} سال دارم.`;
  }
}

class Employee extends Person {
  constructor(
    name: string,
    age: number,
    private department: string
  ) {
    super(name, age);
  }

  public getInfo(): string {
    return `${this.introduce()} من در بخش ${this.department} کار می‌کنم.`;
  }
}

// تابع جنریک
function getFirstElement<T>(array: T[]): T | undefined {
  return array[0];
}

// کلاس جنریک
class Queue<T> {
  private data: T[] = [];

  push(item: T) {
    this.data.push(item);
  }

  pop(): T | undefined {
    return this.data.shift();
  }
}

// استفاده از جنریک‌ها
const numbers = getFirstElement([1, 2, 3]); // number
const names = getFirstElement(["علی", "رضا"]); // string

const numberQueue = new Queue<number>();
numberQueue.push(10);

// math.ts
export interface MathOperations {
  add(a: number, b: number): number;
  subtract(a: number, b: number): number;
}

export class Calculator implements MathOperations {
  add(a: number, b: number): number {
    return a + b;
  }

  subtract(a: number, b: number): number {
    return a - b;
  }
}

// app.ts
import { Calculator, MathOperations } from './math';

const calc: MathOperations = new Calculator();
console.log(calc.add(5, 3)); // 8

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args: any[]) {
    console.log(`فراخوانی متد ${propertyKey} با پارامترهای: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`نتیجه: ${result}`);
    return result;
  };
}

class Calculator {
  @log
  add(a: number, b: number) {
    return a + b;
  }
}

// ❌ بد
let name: string = "علی";
let numbers: number[] = [1, 2, 3];

// ✅ خوب
let name = "علی";
let numbers = [1, 2, 3];

// استفاده از interface به جای type
interface User {
  name: string;
  age: number;
}

// استفاده از readonly برای داده‌های ثابت
interface Config {
  readonly apiKey: string;
  readonly baseUrl: string;
}

// 1. تغییر پسوند فایل‌ها از .js به .ts
// 2. اضافه کردن tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "allowJs": true,
    "checkJs": true,
    "strict": false,
    "noImplicitAny": false
  }
}

// 3. شروع اضافه کردن type‌ها
// قبل
function calculateTotal(price, quantity) {
  return price * quantity;
}

// بعد
function calculateTotal(price: number, quantity: number): number {
  return price * quantity;
}