TypeScript — bu JavaScript'ning kengaytirilgan versiyasi bo'lib, statik tip tizimini qo'shadi. 2026-yilda yangi loyihalarning 80% dan ko'prog'i TypeScript'da boshlanmoqda. Nega? Chunki u xatolarni oldindan aniqlaydi va kodning sifatini oshiradi.

Nima uchun TypeScript?

• Compile vaqtida xatolarni topish — runtime xatolar kamayadi
• IDE avtoto'ldirish va IntelliSense yaxshilanadi
• Kodni refactoring qilish osonlashadi
• Jamoaviy ishlashda dokumentatsiya vazifasini bajaradi
• Katta loyihalarda boshqarish osonlashadi

Asosiy tipler

// Primitiv tipler
let name: string = "ProCoders";
let age: number = 5;
let isActive: boolean = true;
let items: string[] = ["React", "Vue", "Angular"];

// Object tipler
interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "editor" | "viewer";
  createdAt?: Date; // optional
}

// Funksiya tipler
function greet(user: User): string {
  return \`Salom, ${user.name}!\`;
}

// Generic tipler
function getFirst<T>(items: T[]): T | undefined {
  return items[0];
}

Ilg'or xususiyatlar

// Utility Types
type PartialUser = Partial<User>;     // Barcha maydonlar optional
type ReadonlyUser = Readonly<User>;   // O'zgartirib bo'lmaydi
type UserName = Pick<User, "name" | "email">;

// Discriminated Unions
type Result =
  | { status: "success"; data: User }
  | { status: "error"; message: string };

function handleResult(result: Result) {
  if (result.status === "success") {
    console.log(result.data.name); // TypeScript biladi: data mavjud
  } else {
    console.error(result.message); // TypeScript biladi: message mavjud
  }
}

TypeScript + React

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: "primary" | "secondary";
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({
  label, onClick, variant = "primary", disabled
}) => (
  <button
    className={variant}
    onClick={onClick}
    disabled={disabled}
  >
    {label}
  </button>
);

TypeScript sizga 5 daqiqa vaqt oladi yozishda, lekin 5 soat vaqt tejaydi debug qilishda.

Boshlash

# TypeScript o'rnatish
npm install -D typescript
npx tsc --init

# tsconfig.json asosiy sozlamalar
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "outDir": "./dist"
  }
}

Xulosa

TypeScript — bu investitsiya. Boshlang'ichda biroz ko'proq vaqt oladi, lekin uzoq muddatda loyihangiz sifati, barqarorligi va jamoaviy ishlash qulayligi oshadi. Agar hali boshlamagan bo'lsangiz — hozir boshlang.