M

MLOG

Română

Explorați cele mai bune practici pentru utilizarea TypeScript cu React pentru a construi aplicații web robuste, scalabile și ușor de întreținut. Aflați despre structura proiectului, designul componentelor, testare și optimizare.

TypeScript cu React: Cele mai bune practici pentru aplicații scalabile și ușor de întreținut

TypeScript și React sunt o combinație puternică pentru construirea aplicațiilor web moderne. TypeScript aduce tipizarea statică în JavaScript, îmbunătățind calitatea și mentenabilitatea codului, în timp ce React oferă o abordare declarativă și bazată pe componente pentru construirea interfețelor de utilizator. Acest articol de blog explorează cele mai bune practici pentru utilizarea TypeScript cu React pentru a crea aplicații robuste, scalabile și ușor de întreținut, potrivite pentru un public global.

De ce să folosim TypeScript cu React?

Înainte de a explora cele mai bune practici, să înțelegem de ce TypeScript este o adăugare valoroasă la dezvoltarea cu React:

Configurarea unui proiect TypeScript React

Utilizarea Create React App

Cea mai simplă modalitate de a începe un nou proiect TypeScript React este utilizarea Create React App cu șablonul TypeScript:

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

Această comandă configurează un proiect React de bază cu TypeScript configurat, incluzând dependențele necesare și un fișier tsconfig.json.

Configurarea tsconfig.json

Fișierul tsconfig.json este inima configurației TypeScript. Iată câteva setări recomandate:

{
  "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"
  ]
}

Opțiuni cheie de luat în considerare:

Cele mai bune practici pentru componente React cu TypeScript

Tipizarea props-urilor componentelor

Unul dintre cele mai importante aspecte ale utilizării TypeScript cu React este tipizarea corectă a props-urilor componentelor. Utilizați interfețe sau aliasuri de tip pentru a defini forma obiectului props.

interface MyComponentProps {
  name: string;
  age?: number; // Prop opțional
  onClick: () => void;
}

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

      
Salut, {name}!

      {age && 
Ai {age} ani.
}
      
    

  );
};

Utilizarea React.FC<MyComponentProps> asigură că componenta este una funcțională și că props-urile sunt tipizate corect.

Tipizarea stării componentelor

Dacă utilizați componente de clasă, va trebui să tipizați și starea componentei. Definiți o interfață sau un alias de tip pentru obiectul de stare și utilizați-l în definiția componentei.

interface MyComponentState {
  count: number;
}

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

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

  render() {
    return (
      

        
Număr: {this.state.count}

        
      

    );
  }
}

Pentru componentele funcționale care utilizează hook-ul useState, TypeScript poate infera adesea tipul variabilei de stare, dar îl puteți furniza și explicit:

import React, { useState } from 'react';

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

  return (
    

      
Număr: {count}

      
    

  );
};

Utilizarea Type Guards

Type guards sunt funcții care restrâng tipul unei variabile într-un anumit scop. Sunt utile atunci când lucrați cu tipuri uniune sau când trebuie să vă asigurați că o variabilă are un anumit tip înainte de a efectua o operație.

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;
  }
}

Funcția isCircle este un type guard care verifică dacă un Shape este un Circle. În interiorul blocului if, TypeScript știe că shape este un Circle și vă permite să accesați proprietatea sa radius.

Gestionarea evenimentelor

La gestionarea evenimentelor în React cu TypeScript, este important să tipizați corect obiectul evenimentului. Utilizați tipul de eveniment corespunzător din spațiul de nume React.

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

  return (
    
  );
};

În acest exemplu, React.ChangeEvent<HTMLInputElement> este utilizat pentru a tipiza obiectul evenimentului pentru un eveniment de modificare pe un element de intrare. Acest lucru oferă acces la proprietatea target, care este un HTMLInputElement.

Structura proiectului

Un proiect bine structurat este crucial pentru mentenabilitate și scalabilitate. Iată o structură de proiect sugerată pentru o aplicație TypeScript React:

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

Puncte cheie:

Utilizarea hook-urilor cu TypeScript

Hook-urile React vă permit să utilizați starea și alte caracteristici React în componentele funcționale. TypeScript funcționează perfect cu hook-urile, oferind siguranță a tipurilor și o experiență îmbunătățită pentru dezvoltator.

useState

Așa cum s-a arătat anterior, puteți tipiza explicit variabila de stare la utilizarea useState:

import React, { useState } from 'react';

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

  return (
    

      
Număr: {count}

      
    

  );
};

useEffect

Când utilizați useEffect, fiți atenți la tabloul de dependențe. TypeScript vă poate ajuta să prindeți erori dacă uitați să includeți o dependență care este utilizată în cadrul efectului.

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

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

  useEffect(() => {
    document.title = `Număr: ${count}`;
  }, [count]); // Adăugați 'count' la tabloul de dependențe

  return (
    

      
Număr: {count}

      
    

  );
};

Dacă omiteți count din tabloul de dependențe, efectul se va rula o singură dată la montarea componentei, iar titlul documentului nu se va actualiza la modificarea numărului. TypeScript vă va avertiza despre această problemă potențială.

useContext

Când utilizați useContext, trebuie să furnizați un tip pentru valoarea contextului.

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

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

const ThemeContext = createContext(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  // Implementați logica temei aici
  return (
     {} }}>
      {children}
    
  );
};

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

  return (
    

      
Temă: {theme}

      
    

  );
};

export { ThemeProvider, MyComponent };

Prin furnizarea unui tip pentru valoarea contextului, vă asigurați că hook-ul useContext returnează o valoare cu tipul corect.

Testarea componentelor TypeScript React

Testarea este o parte esențială a construirii de aplicații robuste. TypeScript îmbunătățește testarea prin furnizarea de siguranță a tipurilor și o acoperire a codului îmbunătățită.

Testarea unitară

Utilizați framework-uri de testare precum Jest și React Testing Library pentru a testa unitar componentele dumneavoastră.

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

describe('MyComponent', () => {
  it('randează componenta cu numele corect', () => {
    render();
    expect(screen.getByText('Salut, John!')).toBeInTheDocument();
  });

  it('apelează handler-ul onClick când se face clic pe buton', () => {
    const onClick = jest.fn();
    render();
    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

Verificarea tipurilor din TypeScript ajută la prinderea erorilor în teste, cum ar fi pasarea de props-uri incorecte sau utilizarea de gestionare a evenimentelor greșite.

Testarea de integrare

Testele de integrare verifică dacă diferite părți ale aplicației dumneavoastră funcționează corect împreună. Utilizați unelte precum Cypress sau Playwright pentru testare end-to-end.

Optimizarea performanței

TypeScript poate ajuta și la optimizarea performanței prin prinderea potențialelor blocaje de performanță la începutul procesului de dezvoltare.

Memoizarea

Utilizați React.memo pentru a memoiza componentele funcționale și a preveni re-randările inutile.

import React from 'react';

interface MyComponentProps {
  name: string;
}

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

  );
};

export default React.memo(MyComponent);

React.memo va re-randa componenta doar dacă props-urile s-au schimbat. Acest lucru poate îmbunătăți semnificativ performanța, în special pentru componente complexe.

Divizarea codului (Code Splitting)

Utilizați importuri dinamice pentru a împărți codul în bucăți mai mici și a le încărca la cerere. Acest lucru poate reduce timpul de încărcare inițial al aplicației dumneavoastră.

import React, { Suspense } from 'react';

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

const App: React.FC = () => {
  return (
    Se încarcă...
}> ); };

React.lazy vă permite să importați dinamic componente, care sunt încărcate doar atunci când sunt necesare. Componenta Suspense oferă o interfață de rezervă în timp ce componenta se încarcă.

Concluzie

Utilizarea TypeScript cu React poate îmbunătăți semnificativ calitatea, mentenabilitatea și scalabilitatea aplicațiilor web. Urmând aceste bune practici, puteți valorifica puterea TypeScript pentru a construi aplicații robuste și performante care să răspundă nevoilor unui public global. Amintiți-vă să vă concentrați pe definiții clare ale tipurilor, o organizare bine structurată a proiectului și testare amănunțită pentru a asigura succesul pe termen lung al proiectelor dumneavoastră.

Resurse suplimentare