React + TypeScript үндэс

TypeScript бол JavaScript дээр тогтвортой, найдвартай код бичихэд тусалдаг хэл юм. React-тай хослуулан ашиглахад алдааг эртхэн илрүүлж, кодын чанарыг мэдэгдэхүйц сайжруулдаг. Эхэндээ нэмэлт зүйл бичих мэт санагдаж болох ч хэдхэн хичээлийн дараа TypeScript тань шилдэг найз болох болно.

Яагаад React-д TypeScript ашиглах хэрэгтэй вэ?

JavaScript дагнасан React апп-д энэ мэт алдаа гарч болно — гэхдээ зөвхөн браузерт ажиллуулах үед л мэдэгддэг:

// JavaScript — алдааг ажиллах үед л мэдэгддэг
function Greeting({ name }) {
  return <h1>Сайн уу, {name.toUpperCase()}!</h1>;
}

// name-д тоо дамжуулбал ажиллах үед л crash болно
<Greeting name={42} />;

TypeScript ашиглавал редактор дотроо, код бичиж байх үед л анхааруулга авна:

// TypeScript — алдааг бичиж байхдаа л мэдэгддэг
interface GreetingProps {
  name: string;
}

function Greeting({ name }: GreetingProps) {
  return <h1>Сайн уу, {name.toUpperCase()}!</h1>;
}

// Редактор шууд улаан зураас татна — тоо дамжуулж болохгүй гэж
<Greeting name={42} />;

Давуу талуудыг товч дурдвал:

• Автоматик дуусгавар — редактор props-ын нэрийг санал болгоно
• Алдааг эрт илрүүлэх — build хийхээс өмнө тайлбарлана
• Баг ажиллахад тохиромжтой — кодыг уншихад ямар props хэрэгтэйг шууд харагддаг

TypeScript + React суулгах

Vite ашиглан TypeScript-тэй React апп үүсгэхэд маш хялбар:

npm create vite@latest my-ts-app -- --template react-ts
cd my-ts-app
npm install
npm run dev

react-ts template сонговол .tsx файлуудтай, TypeScript тохируулагдсан апп бэлэн болно. Одоо байгаа .jsx аппыг TypeScript руу шилжүүлэхийн тулд:

1. tsconfig.json файл үүсгэх
2. .jsx өргөтгөлүүдийг .tsx болгон нэрлэж өөрчлөх
3. npm install --save-dev typescript @types/react @types/react-dom

Анхны TypeScript Component

TypeScript-тэй component бичэхэд .tsx өргөтгөл ашиглана. Үндсэн бүтэц JavaScript-тэй адилхан — зөвхөн төрлүүд нэмэгддэг:

// src/components/UserCard.tsx

interface User {
  id: number;
  name: string;
  email: string;
  isPro: boolean;
}

interface UserCardProps {
  user: User;
  onSelect: (id: number) => void;
}

function UserCard({ user, onSelect }: UserCardProps) {
  return (
    <div className="card">
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      {user.isPro && <span className="badge">Pro</span>}
      <button onClick={() => onSelect(user.id)}>Сонгох</button>
    </div>
  );
}

export default UserCard;

interface гэдэг нь объектын "хэлбэр"-ийг тодорхойлдог TypeScript-н хэрэгсэл. Props-ын бүх талбарын нэр, төрлийг урьдчилан зааж өгнө.

React + TypeScript-н ялгаатай зүйлс

Цөөн хэдэн зүйл анхаарах хэрэгтэй:

Файлын өргөтгөл — JSX агуулсан бүх файл .tsx байна. Зөвхөн TypeScript (JSX-гүй) бол .ts байна.

React.FC ашиглахгүй байх — хуучин хэв маяг. Шинэ кодод зүгээр л функц бичиж, props-д interface тодорхойл.

// ❌ Хуучин хэв маяг
const Button: React.FC<ButtonProps> = ({ label }) => { ... };

// ✅ Шинэ хэв маяг
function Button({ label }: ButtonProps) { ... }

children prop — React.ReactNode төрлийг ашиглана:

interface CardProps {
  title: string;
  children: React.ReactNode;
}

function Card({ title, children }: CardProps) {
  return (
    <div>
      <h3>{title}</h3>
      {children}
    </div>
  );
}

TypeScript-тэй ажиллах нь эхэндээ нэмэлт ачаалал мэт санагдаж болно — тэвчээртэй байгаарай. Хэдэн component бичсэний дараа мэдрэмж нь маш байгалийн болдог.

Дараагийн хичээлд:

Props-ыг илүү нарийвчлан төрөлжүүлэх аргуудыг судална — заавал болон нэмэлт props, default утга, union төрлүүдийг хэрхэн ашиглахыг практикаар үзнэ.