TypeScript s Reactom: Osvedčené postupy pre škálovateľné a udržiavateľné aplikácie

TypeScript a React sú silnou kombináciou na tvorbu moderných webových aplikácií. TypeScript prináša statické typovanie do JavaScriptu, čím zlepšuje kvalitu a udržiavateľnosť kódu, zatiaľ čo React poskytuje deklaratívny a na komponentoch založený prístup k tvorbe používateľských rozhraní. Tento blogový príspevok skúma osvedčené postupy pre používanie TypeScriptu s Reactom na vytváranie robustných, škálovateľných a udržiavateľných aplikácií vhodných pre globálne publikum.

Prečo používať TypeScript s Reactom?

Predtým, ako sa ponoríme do osvedčených postupov, poďme si vysvetliť, prečo je TypeScript cenným doplnkom k vývoju v Reacte:

• Zlepšená kvalita kódu: Statické typovanie TypeScriptu pomáha odhaliť chyby už v počiatočnej fáze vývoja, čím znižuje problémy za behu a zlepšuje spoľahlivosť kódu.
• Zlepšená udržiavateľnosť: Typové anotácie a rozhrania uľahčujú pochopenie a refaktorovanie kódu, čo vedie k lepšej dlhodobej udržiavateľnosti.
• Lepšia podpora v IDE: TypeScript poskytuje vynikajúcu podporu v IDE, vrátane automatického dopĺňania, navigácie v kóde a nástrojov na refaktorovanie, čo zvyšuje produktivitu vývojárov.
• Menej chýb: Statické typovanie odhalí mnoho bežných chýb v JavaScripte ešte pred spustením, čo vedie k stabilnejšej aplikácii bez chýb.
• Zlepšená spolupráca: Jasné definície typov uľahčujú tímom spoluprácu na veľkých projektoch, pretože vývojári môžu rýchlo pochopiť účel a použitie rôznych komponentov a funkcií.

Nastavenie TypeScript React projektu

Použitie Create React App

Najjednoduchší spôsob, ako začať nový TypeScript React projekt, je použiť Create React App s TypeScript šablónou:

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

Tento príkaz nastaví základný React projekt s nakonfigurovaným TypeScriptom, vrátane potrebných závislostí a súboru tsconfig.json.

Konfigurácia tsconfig.json

Súbor tsconfig.json je srdcom vašej TypeScript konfigurácie. Tu sú niektoré odporúčané nastavenia:

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

Kľúčové možnosti na zváženie:

• "strict": true: Povoľuje prísnu kontrolu typov, ktorá je vysoko odporúčaná na odhalenie potenciálnych chýb.
• "esModuleInterop": true: Umožňuje interoperabilitu medzi CommonJS a ES modulmi.
• "jsx": "react-jsx": Povoľuje novú JSX transformáciu, ktorá zjednodušuje React kód a zlepšuje výkon.

Osvedčené postupy pre React komponenty s TypeScriptom

Typovanie props komponentu

Jedným z najdôležitejších aspektov používania TypeScriptu s Reactom je správne typovanie props vášho komponentu. Použite rozhrania alebo typové aliasy na definovanie tvaru objektu props.

interface MyComponentProps {
  name: string;
  age?: number; // Voliteľný prop
  onClick: () => void;
}

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

      
Ahoj, {name}!
      {age && 
Máte {age} rokov.
}
      Klikni na mňa
    
  );
};

Použitie React.FC<MyComponentProps> zabezpečuje, že komponent je funkčný komponent a že jeho props sú správne typované.

Typovanie stavu komponentu

Ak používate triedne komponenty, budete musieť typovať aj stav komponentu. Definujte rozhranie alebo typový alias pre objekt stavu a použite ho v definícii komponentu.

interface MyComponentState {
  count: number;
}

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

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

  render() {
    return (
      

        
Počet: {this.state.count}
        Inkrementovať
      
    );
  }
}

Pri funkčných komponentoch, ktoré používajú useState hook, TypeScript často dokáže odvodiť typ stavovej premennej, ale môžete ho tiež explicitne zadať:

import React, { useState } from 'react';

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

  return (
    

      
Počet: {count}
       setCount(count + 1)}>Inkrementovať
    
  );
};

Používanie Type Guards

Type guards (ochrany typov) sú funkcie, ktoré zúžia typ premennej v rámci špecifického rozsahu. Sú užitočné pri práci s union typmi alebo keď potrebujete zabezpečiť, že premenná má špecifický typ pred vykonaním operácie.

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

Funkcia isCircle je type guard, ktorý kontroluje, či je Shape typu Circle. Vnútri bloku if TypeScript vie, že shape je Circle a umožňuje vám prístup k jeho vlastnosti radius.

Spracovanie udalostí

Pri spracovaní udalostí v Reacte s TypeScriptom je dôležité správne typovať objekt udalosti. Použite príslušný typ udalosti z menného priestoru React.

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

  return (
    
  );
};

V tomto príklade sa React.ChangeEvent<HTMLInputElement> používa na typovanie objektu udalosti pre udalosť zmeny na input elemente. Toto poskytuje prístup k vlastnosti target, ktorá je typu HTMLInputElement.

Štruktúra projektu

Dobre štruktúrovaný projekt je kľúčový pre udržiavateľnosť a škálovateľnosť. Tu je navrhovaná štruktúra projektu pre TypeScript React aplikáciu:

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

Kľúčové body:

• Components: Zoskupte súvisiace komponenty do adresárov. Každý adresár by mal obsahovať TypeScript súbor komponentu, CSS moduly (ak sa používajú) a súbor index.ts na exportovanie komponentu.
• Pages: Ukladajte komponenty najvyššej úrovne, ktoré reprezentujú rôzne stránky vašej aplikácie.
• Services: Implementujte volania API a ďalšie služby v tomto adresári.
• Types: Definujte globálne definície typov a rozhrania v tomto adresári.
• Utils: Ukladajte pomocné funkcie a konštanty.
• index.ts: Používajte súbory index.ts na re-export modulov z adresára, čím poskytnete čisté a organizované API na importovanie modulov.

Používanie hookov s TypeScriptom

React Hooks umožňujú používať stav a ďalšie funkcie Reactu vo funkčných komponentoch. TypeScript bezproblémovo spolupracuje s hookmi, poskytuje typovú bezpečnosť a zlepšuje skúsenosť vývojára.

useState

Ako bolo ukázané skôr, pri použití useState môžete explicitne typovať stavovú premennú:

import React, { useState } from 'react';

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

  return (
    

      
Počet: {count}
       setCount(count + 1)}>Inkrementovať
    
  );
};

useEffect

Pri používaní useEffect dávajte pozor na pole závislostí. TypeScript vám môže pomôcť odhaliť chyby, ak zabudnete zahrnúť závislosť, ktorá sa používa v rámci efektu.

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

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

  useEffect(() => {
    document.title = `Počet: ${count}`;
  }, [count]); // Pridajte 'count' do poľa závislostí

  return (
    

      
Počet: {count}
       setCount(count + 1)}>Inkrementovať
    
  );
};

Ak vynecháte count z poľa závislostí, efekt sa spustí iba raz pri pripojení komponentu a titulok dokumentu sa pri zmene počtu neaktualizuje. TypeScript vás na tento potenciálny problém upozorní.

useContext

Pri používaní useContext musíte poskytnúť typ pre hodnotu kontextu.

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

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

const ThemeContext = createContext(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  // Tu implementujte logiku témy
  return (
     {} }}>
      {children}
    
  );
};

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

  return (
    

      
Téma: {theme}
      Prepnúť tému
    
  );
};

export { ThemeProvider, MyComponent };

Poskytnutím typu pre hodnotu kontextu zabezpečíte, že hook useContext vráti hodnotu so správnym typom.

Testovanie TypeScript React komponentov

Testovanie je nevyhnutnou súčasťou budovania robustných aplikácií. TypeScript vylepšuje testovanie poskytovaním typovej bezpečnosti a lepšieho pokrytia kódu.

Jednotkové testovanie (Unit Testing)

Používajte testovacie frameworky ako Jest a React Testing Library na jednotkové testovanie vašich komponentov.

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

describe('MyComponent', () => {
  it('vykreslí komponent so správnym menom', () => {
    render();
    expect(screen.getByText('Ahoj, John!')).toBeInTheDocument();
  });

  it('zavolá obsluhu onClick po kliknutí na tlačidlo', () => {
    const onClick = jest.fn();
    render();
    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

Typová kontrola TypeScriptu pomáha odhaliť chyby vo vašich testoch, ako je napríklad odovzdanie nesprávnych props alebo použitie nesprávnych obslúh udalostí.

Integračné testovanie

Integračné testy overujú, či rôzne časti vašej aplikácie správne spolupracujú. Používajte nástroje ako Cypress alebo Playwright na end-to-end testovanie.

Optimalizácia výkonu

TypeScript môže tiež pomôcť s optimalizáciou výkonu tým, že odhalí potenciálne úzke hrdlá výkonu už v počiatočnej fáze vývoja.

Memoizácia

Použite React.memo na memoizáciu funkčných komponentov a zabránenie zbytočným prekresleniam.

import React from 'react';

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC = ({ name }) => {
  console.log('Vykresľujem MyComponent');
  return (
    
Ahoj, {name}!
  );
};

export default React.memo(MyComponent);

React.memo prekreslí komponent iba vtedy, ak sa zmenili jeho props. To môže výrazne zlepšiť výkon, najmä pri zložitých komponentoch.

Rozdelenie kódu (Code Splitting)

Použite dynamické importy na rozdelenie vášho kódu do menších častí a ich načítanie na požiadanie. To môže znížiť počiatočný čas načítania vašej aplikácie.

import React, { Suspense } from 'react';

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

const App: React.FC = () => {
  return (
    Načítava sa...