M

MLOG

Magyar

Fedezze fel a TypeScript és React bevált gyakorlatait robusztus és skálázható webalkalmazásokhoz. Tanuljon a projektstruktúráról, tesztelésről és optimalizálásról.

TypeScript és React: Bevált gyakorlatok skálázható és karbantartható alkalmazásokhoz

A TypeScript és a React egy erőteljes kombináció a modern webalkalmazások építéséhez. A TypeScript statikus típusozást hoz a JavaScriptbe, javítva a kódminőséget és a karbantarthatóságot, míg a React deklaratív és komponensalapú megközelítést kínál a felhasználói felületek építéséhez. Ez a blogbejegyzés a TypeScript és a React együttes használatának bevált gyakorlatait vizsgálja, amelyekkel robusztus, skálázható és karbantartható, globális közönség számára is megfelelő alkalmazásokat hozhatunk létre.

Miért használjunk TypeScriptet a Reacttel?

Mielőtt belemerülnénk a bevált gyakorlatokba, értsük meg, miért értékes kiegészítője a TypeScript a React fejlesztésnek:

TypeScript React projekt beállítása

A Create React App használata

Egy új TypeScript React projekt indításának legegyszerűbb módja a Create React App használata a TypeScript sablonnal:

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

Ez a parancs beállít egy alapvető React projektet TypeScript konfigurációval, beleértve a szükséges függőségeket és egy tsconfig.json fájlt.

A tsconfig.json konfigurálása

A tsconfig.json fájl a TypeScript konfigurációjának szíve. Íme néhány ajánlott beállítás:

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

Fontosabb beállítások, amelyeket érdemes figyelembe venni:

Bevált gyakorlatok React komponensekhez TypeScripttel

Komponens Proppok típusozása

A TypeScript Reacttel való használatának egyik legfontosabb aspektusa a komponens proppok megfelelő típusozása. Használjon interfészeket vagy típus aliasokat a proppok objektumának alakjának meghatározásához.

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

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

      
Hello, {name}!

      {age && 
You are {age} years old.
}
      
    

  );
};

A React.FC<MyComponentProps> használata biztosítja, hogy a komponens egy funkcionális komponens, és hogy a proppok helyesen vannak típusozva.

Komponens State típusozása

Ha osztály alapú komponenseket használ, akkor a komponens state-jét is típusoznia kell. Definiáljon egy interfészt vagy típus aliast a state objektumhoz, és használja azt a komponens definíciójában.

interface MyComponentState {
  count: number;
}

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

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

  render() {
    return (
      

        
Count: {this.state.count}

        
      

    );
  }
}

A useState hookot használó funkcionális komponensek esetében a TypeScript gyakran képes kikövetkeztetni az állapotváltozó típusát, de explicit módon is megadhatja azt:

import React, { useState } from 'react';

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

  return (
    

      
Count: {count}

      
    

  );
};

Típusőrök (Type Guard) használata

A típusőrök (type guard) olyan függvények, amelyek egy változó típusát szűkítik egy adott hatókörön belül. Hasznosak unió típusokkal való munka során, vagy amikor biztosítani kell, hogy egy változó egy adott típussal rendelkezzen egy művelet elvégzése előtt.

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

Az isCircle függvény egy típusőr, amely ellenőrzi, hogy egy Shape egy Circle-e. Az if blokkon belül a TypeScript tudja, hogy a shape egy Circle, és engedélyezi a radius tulajdonságának elérését.

Eseménykezelés

Amikor eseményeket kezel a Reactben TypeScripttel, fontos helyesen típusozni az esemény objektumot. Használja a megfelelő eseménytípust a React névtérből.

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

  return (
    
  );
};

Ebben a példában a React.ChangeEvent<HTMLInputElement> típust használjuk egy input elemen bekövetkező változás esemény objektumának típusozására. Ez hozzáférést biztosít a target tulajdonsághoz, amely egy HTMLInputElement.

Projektstruktúra

A jól strukturált projekt kulcsfontosságú a karbantarthatóság és a skálázhatóság szempontjából. Íme egy javasolt projektstruktúra egy TypeScript React alkalmazáshoz:

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

Főbb pontok:

Hookok használata TypeScripttel

A React Hookok lehetővé teszik az állapot és más React funkciók használatát funkcionális komponensekben. A TypeScript zökkenőmentesen működik a Hookokkal, típustisztaságot és jobb fejlesztői élményt biztosítva.

useState

Ahogy korábban láthattuk, explicit módon típusozhatja az állapotváltozót a useState használatakor:

import React, { useState } from 'react';

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

  return (
    

      
Count: {count}

      
    

  );
};

useEffect

A useEffect használatakor figyeljen a függőségi tömbre. A TypeScript segíthet elkapni a hibákat, ha elfelejt belefoglalni egy függőséget, amelyet az effektuson belül használ.

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // Adja hozzá a 'count'-ot a függőségi tömbhöz

  return (
    

      
Count: {count}

      
    

  );
};

Ha kihagyja a count-ot a függőségi tömbből, az effektus csak egyszer fog lefutni a komponens csatolásakor, és a dokumentum címe nem frissül, amikor a számláló változik. A TypeScript figyelmeztetni fogja Önt erre a lehetséges problémára.

useContext

A useContext használatakor meg kell adnia egy típust a context értékéhez.

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

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

const ThemeContext = createContext(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  // Implementálja a téma logikát itt
  return (
     {} }}>
      {children}
    
  );
};

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

  return (
    

      
Theme: {theme}

      
    

  );
};

export { ThemeProvider, MyComponent };

A context értékének típusának megadásával biztosíthatja, hogy a useContext hook a megfelelő típusú értéket adja vissza.

TypeScript React komponensek tesztelése

A tesztelés elengedhetetlen része a robusztus alkalmazások építésének. A TypeScript a típustisztaság és a jobb kódlefedettség biztosításával javítja a tesztelést.

Unit tesztelés

Használjon tesztelési keretrendszereket, mint a Jest és a React Testing Library, a komponensek unit teszteléséhez.

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

describe('MyComponent', () => {
  it('megjeleníti a komponenst a megfelelő névvel', () => {
    render();
    expect(screen.getByText('Hello, John!')).toBeInTheDocument();
  });

  it('meghívja az onClick kezelőt a gombra kattintáskor', () => {
    const onClick = jest.fn();
    render();
    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

A TypeScript típusellenőrzése segít elkapni a hibákat a tesztekben, például helytelen proppok átadása vagy rossz eseménykezelők használata esetén.

Integrációs tesztelés

Az integrációs tesztek azt ellenőrzik, hogy az alkalmazás különböző részei helyesen működnek-e együtt. Használjon olyan eszközöket, mint a Cypress vagy a Playwright a végponttól-végpontig (end-to-end) teszteléshez.

Teljesítményoptimalizálás

A TypeScript a teljesítményoptimalizálásban is segíthet, mivel a potenciális teljesítmény-szűk keresztmetszeteket már a fejlesztési folyamat korai szakaszában kiszűri.

Memoizáció

Használja a React.memo-t a funkcionális komponensek memoizálására és a felesleges újrarajzolások megelőzésére.

import React from 'react';

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC = ({ name }) => {
  console.log('MyComponent renderelése');
  return (
    
Hello, {name}!

  );
};

export default React.memo(MyComponent);

A React.memo csak akkor fogja újrarenderelni a komponenst, ha a proppok megváltoztak. Ez jelentősen javíthatja a teljesítményt, különösen a komplex komponensek esetében.

Kód felosztása (Code Splitting)

Használjon dinamikus importokat a kód kisebb darabokra való felosztásához és igény szerinti betöltéséhez. Ezzel csökkentheti az alkalmazás kezdeti betöltési idejét.

import React, { Suspense } from 'react';

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

const App: React.FC = () => {
  return (
    Loading...
}> ); };

A React.lazy lehetővé teszi a komponensek dinamikus importálását, amelyek csak akkor töltődnek be, amikor szükség van rájuk. A Suspense komponens egy tartalék felhasználói felületet biztosít, amíg a komponens betöltődik.

Összegzés

A TypeScript Reacttel való használata jelentősen javíthatja webalkalmazásai minőségét, karbantarthatóságát és skálázhatóságát. Ezen bevált gyakorlatok követésével kiaknázhatja a TypeScript erejét, hogy robusztus és nagy teljesítményű alkalmazásokat hozzon létre, amelyek megfelelnek a globális közönség igényeinek. Ne feledje, hogy a tiszta típusdefiníciókra, a jól strukturált projektszervezésre és az alapos tesztelésre összpontosítson projektjei hosszú távú sikere érdekében.

További források