TypeScript va React: Masshtablanuvchi va Qo‘llab-quvvatlanadigan Ilovalar uchun Eng Yaxshi Amaliyotlar

TypeScript va React zamonaviy veb-ilovalarni yaratish uchun kuchli kombinatsiyadir. TypeScript JavaScript'ga statik tiplashtirishni olib kelib, kod sifatini va qo‘llab-quvvatlanuvchanligini yaxshilaydi, React esa foydalanuvchi interfeyslarini yaratish uchun deklarativ va komponentlarga asoslangan yondashuvni taqdim etadi. Ushbu blog posti global auditoriya uchun mos bo‘lgan mustahkam, masshtablanuvchi va qo‘llab-quvvatlanadigan ilovalarni yaratish uchun TypeScript'ni React bilan ishlatishning eng yaxshi amaliyotlarini o‘rganadi.

Nima uchun React bilan TypeScript ishlatish kerak?

Eng yaxshi amaliyotlarga sho‘ng‘ishdan oldin, nima uchun TypeScript'ning React dasturlashiga qimmatli qo‘shimcha ekanligini tushunib olaylik:

• Yaxshilangan Kod Sifati: TypeScript'ning statik tiplashtirishi dasturlash jarayonining dastlabki bosqichlarida xatolarni aniqlashga yordam beradi, ish vaqtidagi muammolarni kamaytiradi va kodning ishonchliligini oshiradi.
• Kengaytirilgan Qo‘llab-quvvatlanuvchanlik: Tip izohlari va interfeyslar kodni tushunish va qayta ishlashni (refaktoring) osonlashtiradi, bu esa uzoq muddatli qo‘llab-quvvatlanuvchanlikni yaxshilaydi.
• Yaxshiroq IDE Qo‘llab-quvvatlashi: TypeScript avtomatik to‘ldirish, kod navigatsiyasi va refaktoring vositalari kabi ajoyib IDE qo‘llab-quvvatlashini ta’minlaydi, bu esa dasturchi unumdorligini oshiradi.
• Kamaytirilgan Xatolar: Statik tiplashtirish ko‘plab keng tarqalgan JavaScript xatolarini ish vaqtidan oldin aniqlaydi, bu esa yanada barqaror va xatolarsiz ilovaga olib keladi.
• Yaxshilangan Hamkorlik: Aniq tip ta’riflari jamoalarga katta loyihalarda hamkorlik qilishni osonlashtiradi, chunki dasturchilar turli komponentlar va funksiyalarning maqsadi va ishlatilishini tezda tushunishlari mumkin.

TypeScript React Loyihasini Sozlash

Create React App'dan Foydalanish

Yangi TypeScript React loyihasini boshlashning eng oson yo‘li Create React App'dan TypeScript andozasi bilan foydalanishdir:

npx create-react-app my-typescript-react-app --template typescript

Ushbu buyruq TypeScript sozlangan asosiy React loyihasini, jumladan, kerakli bog‘liqliklar va tsconfig.json faylini yaratadi.

tsconfig.json'ni Sozlash

tsconfig.json fayli sizning TypeScript konfiguratsiyangizning markazidir. Quyida ba'zi tavsiya etilgan sozlamalar keltirilgan:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

E'tiborga olinadigan asosiy parametrlar:

• "strict": true: Qattiq tip tekshiruvini yoqadi, bu potensial xatolarni aniqlash uchun juda tavsiya etiladi.
• "esModuleInterop": true: CommonJS va ES modullari o'rtasidagi o'zaro muvofiqlikni yoqadi.
• "jsx": "react-jsx": React kodini soddalashtiradigan va unumdorlikni oshiradigan yangi JSX transformatsiyasini yoqadi.

TypeScript bilan React Komponentlari uchun Eng Yaxshi Amaliyotlar

Komponent Props'larini Tiplashtirish

TypeScript'ni React bilan ishlatishning eng muhim jihatlaridan biri bu komponent props'larini to'g'ri tiplashtirishdir. Props obyektining shaklini aniqlash uchun interfeyslar yoki tip taxalluslaridan (aliases) foydalaning.

interface MyComponentProps {
  name: string;
  age?: number; // Ixtiyoriy prop
  onClick: () => void;
}

const MyComponent: React.FC = ({ name, age, onClick }) => {
  return (
    

      
Salom, {name}!
      {age && 
Sizning yoshingiz {age} da.
}
      Meni bosing
    
  );
};

React.FC<MyComponentProps> dan foydalanish komponentning funksional komponent ekanligini va props'larning to'g'ri tiplashtirilganligini ta'minlaydi.

Komponent State'ini (Holatini) Tiplashtirish

Agar siz sinf komponentlaridan foydalanayotgan bo'lsangiz, komponentning holatini (state) ham tiplashtirishingiz kerak bo'ladi. Holat obyekti uchun interfeys yoki tip taxallusini aniqlang va uni komponent ta'rifida ishlating.

interface MyComponentState {
  count: number;
}

class MyComponent extends React.Component<{}, MyComponentState> {
  state: MyComponentState = {
    count: 0
  };

  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    return (
      

        
Hisob: {this.state.count}
        Oshirish
      
    );
  }
}

useState hook'idan foydalanadigan funksional komponentlar uchun TypeScript ko'pincha holat o'zgaruvchisining tipini aniqlay oladi, lekin siz uni aniq ko'rsatishingiz ham mumkin:

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Hisob: {count}
       setCount(count + 1)}>Oshirish
    
  );
};

Type Guard'lardan Foydalanish

Type guard'lar (tip himoyachilari) ma'lum bir doiradagi o'zgaruvchining tipini toraytiradigan funksiyalardir. Ular birlashma tiplari bilan ishlaganda yoki biror amalni bajarishdan oldin o'zgaruvchining ma'lum bir tipga ega ekanligiga ishonch hosil qilish kerak bo'lganda foydalidir.

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  side: number;
}

type Shape = Circle | Square;

function isCircle(shape: Shape): shape is Circle {
  return shape.kind === "circle";
}

function getArea(shape: Shape): number {
  if (isCircle(shape)) {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.side ** 2;
  }
}

isCircle funksiyasi - bu Shapening Circle ekanligini tekshiruvchi type guard. if bloki ichida TypeScript shapening Circle ekanligini biladi va uning radius xususiyatiga kirishga ruxsat beradi.

Hodisalarni Boshqarish

React'da TypeScript bilan hodisalarni boshqarishda hodisa obyektini to'g'ri tiplashtirish muhim. React nomlar fazosidan mos keladigan hodisa tipidan foydalaning.

const MyComponent: React.FC = () => {
  const handleChange = (event: React.ChangeEvent) => {
    console.log(event.target.value);
  };

  return (
    
  );
};

Ushbu misolda, React.ChangeEvent<HTMLInputElement> kiritish elementidagi o'zgarish hodisasi uchun hodisa obyektini tiplashtirish uchun ishlatiladi. Bu HTMLInputElement bo'lgan target xususiyatiga kirishni ta'minlaydi.

Loyiha Tuzilishi

Yaxshi tuzilgan loyiha qo'llab-quvvatlanuvchanlik va masshtablanuvchanlik uchun juda muhimdir. Quyida TypeScript React ilovasi uchun tavsiya etilgan loyiha tuzilishi keltirilgan:

src/
├── components/
│   ├── MyComponent/
│   │   ├── MyComponent.tsx
│   │   ├── MyComponent.module.css
│   │   └── index.ts
├── pages/
│   ├── HomePage.tsx
│   └── AboutPage.tsx
├── services/
│   ├── api.ts
│   └── auth.ts
├── types/
│   ├── index.ts
│   └── models.ts
├── utils/
│   ├── helpers.ts
│   └── constants.ts
├── App.tsx
├── index.tsx
├── react-app-env.d.ts
└── tsconfig.json

Asosiy nuqtalar:

• Komponentlar: Tegishli komponentlarni papkalarga guruhlang. Har bir papkada komponentning TypeScript fayli, CSS modullari (agar ishlatilsa) va komponentni eksport qilish uchun index.ts fayli bo'lishi kerak.
• Sahifalar: Ilovangizning turli sahifalarini ifodalovchi yuqori darajadagi komponentlarni saqlang.
• Servislar: API so'rovlari va boshqa servislar ushbu papkada amalga oshiriladi.
• Tiplar: Global tip ta'riflari va interfeyslarni ushbu papkada aniqlang.
• Utils (Yordamchi vositalar): Yordamchi funksiyalar va konstantalarni saqlang.
• index.ts: Modullarni papkadan qayta eksport qilish uchun index.ts fayllaridan foydalaning, bu modullarni import qilish uchun toza va tartibli API taqdim etadi.

TypeScript bilan Hook'lardan Foydalanish

React Hook'lari sizga funksional komponentlarda holat (state) va boshqa React xususiyatlaridan foydalanish imkonini beradi. TypeScript Hook'lar bilan muammosiz ishlaydi, tip xavfsizligi va yaxshilangan dasturchi tajribasini ta'minlaydi.

useState

Avval ko'rsatilganidek, useState'dan foydalanganda holat o'zgaruvchisini aniq tiplashtirishingiz mumkin:

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Hisob: {count}
       setCount(count + 1)}>Oshirish
    
  );
};

useEffect

useEffect'dan foydalanganda, bog'liqliklar massiviga e'tibor bering. Agar effekt ichida ishlatiladigan bog'liqlikni kiritishni unutsangiz, TypeScript xatolarni aniqlashga yordam beradi.

import React, { useState, useEffect } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Hisob: ${count}`;
  }, [count]); // 'count'ni bog'liqliklar massiviga qo'shing

  return (
    

      
Hisob: {count}
       setCount(count + 1)}>Oshirish
    
  );
};

Agar siz countni bog'liqliklar massividan olib tashlasangiz, effekt faqat komponent birinchi marta o'rnatilganda bir marta ishlaydi va hisoblagich o'zgarganda hujjat sarlavhasi yangilanmaydi. TypeScript sizni bu potensial muammo haqida ogohlantiradi.

useContext

useContext'dan foydalanganda, kontekst qiymati uchun tip taqdim etishingiz kerak.

import React, { createContext, useContext } from 'react';

interface ThemeContextType {
  theme: string;
  toggleTheme: () => void;
}

const ThemeContext = createContext(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  // Mavzu mantig'ini bu yerda amalga oshiring
  return (
     {} }}>
      {children}
    
  );
};

const MyComponent: React.FC = () => {
  const { theme, toggleTheme } = useContext(ThemeContext) as ThemeContextType;

  return (
    

      
Mavzu: {theme}
      Mavzuni o'zgartirish
    
  );
};

export { ThemeProvider, MyComponent };

Kontekst qiymati uchun tip taqdim etish orqali siz useContext hook'ining to'g'ri tipdagi qiymatni qaytarishini ta'minlaysiz.

TypeScript React Komponentlarini Testlash

Testlash mustahkam ilovalar yaratishning muhim qismidir. TypeScript tip xavfsizligi va yaxshilangan kod qamrovini ta'minlash orqali testlashni kuchaytiradi.

Unit Testlash

Komponentlaringizni unit testlash uchun Jest va React Testing Library kabi testlash freymvorklaridan foydalaning.

// MyComponent.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('komponentni to\'g\'ri nom bilan render qiladi', () => {
    render();
    expect(screen.getByText('Salom, John!')).toBeInTheDocument();
  });

  it('tugma bosilganda onClick ishlovchisini chaqiradi', () => {
    const onClick = jest.fn();
    render();
    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

TypeScript'ning tip tekshiruvi testlaringizdagi xatolarni, masalan, noto'g'ri props'larni uzatish yoki noto'g'ri hodisa ishlovchilaridan foydalanishni aniqlashga yordam beradi.

Integratsiya Testlash

Integratsiya testlari ilovangizning turli qismlari birgalikda to'g'ri ishlashini tekshiradi. End-to-end testlash uchun Cypress yoki Playwright kabi vositalardan foydalaning.

Unumdorlikni Optimallashtirish

TypeScript shuningdek, dasturlash jarayonining dastlabki bosqichlarida potensial unumdorlik muammolarini aniqlash orqali unumdorlikni optimallashtirishga yordam berishi mumkin.

Memoizatsiya

Funksional komponentlarni memoizatsiya qilish va keraksiz qayta renderlarning oldini olish uchun React.memo dan foydalaning.

import React from 'react';

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC = ({ name }) => {
  console.log('MyComponent render qilinmoqda');
  return (
    
Salom, {name}!
  );
};

export default React.memo(MyComponent);

React.memo komponentni faqat props'lar o'zgargan taqdirdagina qayta render qiladi. Bu, ayniqsa, murakkab komponentlar uchun unumdorlikni sezilarli darajada oshirishi mumkin.

Kodni Bo'lish (Code Splitting)

Kodingizni kichikroq bo'laklarga bo'lish va ularni talabga binoan yuklash uchun dinamik importlardan foydalaning. Bu ilovangizning dastlabki yuklanish vaqtini qisqartirishi mumkin.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

const App: React.FC = () => {
  return (
    Yuklanmoqda...