TypeScript / React + TypeScript үндэс

React + TypeScript үндэс

React ба TypeScript хамтад хэрэглэх нь дэлхийд хамгийн түгээмэл frontend хослол болоод байна. TypeScript нь React component-ийн props, state, event-ийг бүгдийг шалгаж, алдааг хөгжүүлэлтийн үед л илрүүлдэг.

Энэ хичээлд React + TypeScript-ийн суурийг тавина — .tsx файл, component тодорхойлох арга, болон TypeScript яагаад React-ийг илүү хүчирхэг болгодог талаар сурна.

.tsx файл гэж юу вэ?

React component-ийг TypeScript-ээр бичихэд .tsx өргөтгөл хэрэглэнэ. .ts ба .tsx-ийн ялгаа нь .tsx нь JSX дэмждэг:

tsx

// components/Мэндчилэх.tsx

// TypeScript React-ийн функциональ component
function Мэндчилэх() {
  return (
    <div>
      <h1>Сайн уу!</h1>
      <p>Энэ бол миний анхны TypeScript компонент.</p>
    </div>
  );
}

export default Мэндчилэх;

Next.js 15 App Router дотор .tsx файлууд ямар нэгэн тохиргоогүйгээр TypeScript-ийг дэмжинэ.

Функциональ component-ийн төрөл

React-ийн функциональ component-ийн буцаах утгыг React.FC эсвэл JSX.Element гэж тодорхойлж болно:

tsx

import React from "react";

// Хэлбэр 1: React.FC — function component
const Шошго: React.FC = () => {
  return <span className="badge">TypeScript</span>;
};

// Хэлбэр 2: Буцаах төрлийг тодорхой заах
function Гарчиг(): JSX.Element {
  return <h1>Сайн байна уу?</h1>;
}

// Хэлбэр 3: Хамгийн энгийн — Next.js дотор хамгийн түгээмэл
export default function НүүрХуудас() {
  return (
    <main>
      <h1>Нүүр хуудас</h1>
    </main>
  );
}

Next.js 15-д гуравдахь хэлбэр — ердийн функц буцаах — хамгийн цэвэр бөгөөд өргөн хэрэглэгддэг.

Server Component ба Client Component

App Router дотор component-ийн хоёр төрөл байдаг:

tsx

// app/courses/page.tsx — Server Component (default)
// 'use client' байхгүй тул серверт ажиллана

async function СургалтуудХуудас() {
  // Серверт шууд өгөгдөл унших боломжтой
  const сургалтууд = await getSurgaltuud();

  return (
    <div>
      {сургалтууд.map((сургалт) => (
        <div key={сургалт.slug}>{сургалт.title}</div>
      ))}
    </div>
  );
}

export default СургалтуудХуудас;

tsx

// components/ui/Товч.tsx — Client Component
"use client"; // Энэ мөр байвал browser дотор ажиллана

import { useState } from "react";

function Товч() {
  const [дарагдсан, setДарагдсан] = useState(false);

  return (
    <button onClick={() => setДарагдсан(true)}>
      {дарагдсан ? "Дарагдсан!" : "Дар"}
    </button>
  );
}

export default Товч;

Дүрэм: useState, useEffect, event handler (onClick гэх мэт) хэрэглэх бол 'use client' нэмнэ. Үгүй бол Server Component болгоно.

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

React component-д props дамжуулахад TypeScript хэрхэн ашиглах, props interface хэрхэн тодорхойлох тухай сурна.

← Өмнөх хичээлAPI хариуны төрлүүд Дараах хичээл →React Props төрөлжүүлэх