TypeScript React bilan

Nima uchun React bilan TypeScript dan foydalanish kerak?

TypeScript React-ni quyidagi bilan yaxshilaydi:

Buyum, holat va kontekst uchun xavfsizlikni yozing
Yaxshiroq IDE avtoto‘ldirish va refaktoring
Rivojlanish jarayonida xatolarni erta aniqlash

Eslatma: Ushbu qo‘llanma React bo‘yicha asosiy bilimlarni o‘z ichiga oladi.

Agar siz React dasturida yangi bo‘lsangiz, avval bizning React Tutorial-ni ko‘rib chiqing.

Ishni boshlash

Vite bilan yangi React + TypeScript ilovasini yarating:

Misol

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

Sizning tsconfig.json quyidagi tavsiya etilgan kompilyator variantlarini o‘z ichiga olishi kerak:

Misol

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "Node",
    "jsx": "react-jsx",
    "strict": true,
    "skipLibCheck": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

Eslatma: Eng yaxshi turdagi xavfsizlik uchun strict yoqilgan holda saqlang.

Ko‘rsatilgan variantlar Vite va Create React App bilan yaxshi ishlaydi.

Komponentlarni yozish

TypeScript yordamida props’ni aniqlang va ulardan funksional komponentda foydalaning:

Misol

// Greeting.tsx
type GreetingProps = {
  name: string;
  age?: number;
};

export function Greeting({ name, age }: GreetingProps) {
  return (
    <div>
      <h2>Hello, {name}!</h2>
      {age !== undefined && <p>You are {age} years old</p>}
    </div>
  );
}

Umumiy naqshlar

Turi-Xavfsiz hodisalar

Kirish va tugmalar uchun hodisa ishlov beruvchilarini yozing:

Misol

// Input change
function NameInput() {
  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    console.log(e.target.value);
  }
  return <input onChange={handleChange} />;
}

// Button click
function SaveButton() {
  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
    e.preventDefault();
  }
  return <button onClick={handleClick}>Save</button>;
}

UseState bilan yozish holati

Raqamlar, birlashmalar va null qiymatlar uchun aniq turlardan foydalaning:

Misol

const [count, setCount] = React.useState<number>(0);
const [status, setStatus] = React.useState<'idle' | 'loading' | 'error'>('idle');

type User = { id: string; name: string };
const [user, setUser] = React.useState<User | null>(null);

useRef-ni DOM elementlari bilan ishlating

Xususiyatlarga xavfsiz kirish uchun DOM tugunlariga murojaatlarni kiriting:

Misol

function FocusInput() {
const inputRef = React.useRef<HTMLInputElement>(null);
return <input ref={inputRef} onFocus={() => inputRef.current?.select()} />;
}

Bolalar yozish

React.ReactNode turidagi bolalarni qabul qiling:

Misol

type CardProps = { title: string; children?: React.ReactNode };
function Card({ title, children }: CardProps) {
  return (
    <div>
      <h2>{title}</h2>
      {children}
    </div>
  );
}

Generics bilan yordamchilarni oling

API javoblarini yozish uchun generiklardan foydalaning:

Misol

async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  if (!res.ok) throw new Error('Network error');
  return res.json() as Promise<T>;
}

// Usage inside an async function/component effect
async function loadPosts() {
  type Post = { id: number; title: string };
  const posts = await fetchJson<Post[]>("/api/posts");
  console.log(posts);
}

Minimal kontekst va maxsus hook (custom hook)

Kichik, yozilgan kontekst va yordamchi hook’ni taqdim eting:

Misol

type Theme = 'light' | 'dark';
const ThemeContext = React.createContext<{ theme: Theme; toggle(): void } | null>(null);

function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = React.useState<Theme>('light');
  const value = { theme, toggle: () => setTheme(t => (t === 'light' ? 'dark' : 'light')) };
  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

function useTheme() {
  const ctx = React.useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
  return ctx;
}

Vite TypeScript types: Ta’riflarni o‘tkazib yubormaslik uchun Vite muhiti turlarini qo‘shing.

Misol

// src/vite-env.d.ts
/// <reference types="vite/client" />

Shu bilan bir qatorda, tsconfig.json ga qo‘shing:

Misol

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

About React.FC: To‘g‘ridan-to‘g‘ri kiritilgan funksiya komponentlarini afzal ko‘ring.

React.FC ixtiyoriy; u bilvosita children qo‘shadi, lekin shart emas.

Optional baseUrl and paths: Bundler tomonidan qo‘llab-quvvatlansa, importni soddalashtirishi mumkin.

Misol

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]

    }
  }
}

Faqat vositalaringiz (masalan, Vite, tsconfig-paths) yo‘l taxalluslari (path aliases) uchun sozlangan bo‘lsagina sozlang.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish