M

MLOG

Čeština

Prozkoumejte osvědčené postupy pro použití TypeScriptu s Reactem k vytváření robustních, škálovatelných a udržitelných webových aplikací. Naučte se o struktuře projektu, návrhu komponent, testování a optimalizaci.

TypeScript s Reactem: Osvědčené postupy pro škálovatelné a udržitelné aplikace

TypeScript a React jsou silnou kombinací pro tvorbu moderních webových aplikací. TypeScript přináší do JavaScriptu statické typování, čímž zlepšuje kvalitu a udržitelnost kódu, zatímco React poskytuje deklarativní a komponentový přístup k tvorbě uživatelských rozhraní. Tento blogový příspěvek se zabývá osvědčenými postupy pro použití TypeScriptu s Reactem k vytváření robustních, škálovatelných a udržitelných aplikací vhodných pro globální publikum.

Proč používat TypeScript s Reactem?

Než se ponoříme do osvědčených postupů, pojďme si vysvětlit, proč je TypeScript cenným doplňkem pro vývoj v Reactu:

Nastavení projektu TypeScript s Reactem

Použití Create React App

Nejjednodušší způsob, jak začít nový projekt TypeScript s Reactem, je použít Create React App s šablonou pro TypeScript:

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

Tento příkaz nastaví základní projekt React s nakonfigurovaným TypeScriptem, včetně nezbytných závislostí a souboru tsconfig.json.

Konfigurace tsconfig.json

Soubor tsconfig.json je srdcem vaší konfigurace TypeScriptu. Zde jsou některá doporučená nastavení:

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

Klíčové možnosti k zvážení:

Osvědčené postupy pro React komponenty s TypeScriptem

Typování props komponenty

Jedním z nejdůležitějších aspektů používání TypeScriptu s Reactem je správné typování props vaší komponenty. Použijte rozhraní nebo typové aliasy k definování tvaru objektu props.

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

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

      
Ahoj, {name}!

      {age && 
Je vám {age} let.
}
      
    

  );
};

Použití React.FC<MyComponentProps> zajišťuje, že komponenta je funkční komponentou a že props jsou správně typovány.

Typování stavu komponenty

Pokud používáte třídní komponenty, budete také muset typovat stav komponenty. Definujte rozhraní nebo typový alias pro objekt stavu a použijte jej v definici komponenty.

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}

        
      

    );
  }
}

Pro funkční komponenty používající hook useState může TypeScript často odvodit typ stavové proměnné, ale můžete ho také explicitně zadat:

import React, { useState } from 'react';

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

  return (
    

      
Počet: {count}

      
    

  );
};

Použití Type Guards

Type guards (strážci typů) jsou funkce, které zužují typ proměnné v určitém rozsahu. Jsou užitečné při práci s union typy nebo když potřebujete zajistit, že proměnná má specifický typ před provedením operace.

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

Funkce isCircle je strážce typu, který kontroluje, zda je Shape typu Circle. Uvnitř bloku if TypeScript ví, že shape je Circle a umožňuje vám přístup k jeho vlastnosti radius.

Zpracování událostí

Při zpracování událostí v Reactu s TypeScriptem je důležité správně typovat objekt události. Použijte příslušný typ události z jmenného prostoru React.

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

  return (
    
  );
};

V tomto příkladu je použit React.ChangeEvent<HTMLInputElement> k typování objektu události pro změnu na vstupním prvku. To poskytuje přístup k vlastnosti target, která je typu HTMLInputElement.

Struktura projektu

Dobře strukturovaný projekt je klíčový pro udržitelnost a škálovatelnost. Zde je navrhovaná struktura projektu pro aplikaci TypeScript s Reactem:

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

Klíčové body:

Použití Hooks s TypeScriptem

React Hooks vám umožňují používat stav a další funkce Reactu ve funkčních komponentách. TypeScript s Hooks bezproblémově spolupracuje, poskytuje typovou bezpečnost a zlepšuje vývojářskou zkušenost.

useState

Jak bylo ukázáno dříve, můžete explicitně typovat stavovou proměnnou při použití useState:

import React, { useState } from 'react';

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

  return (
    

      
Počet: {count}

      
    

  );
};

useEffect

Při použití useEffect dávejte pozor na pole závislostí. TypeScript vám může pomoci odhalit chyby, pokud zapomenete zahrnout závislost, která je použita 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]); // Přidejte 'count' do pole závislostí

  return (
    

      
Počet: {count}

      
    

  );
};

Pokud vynecháte count z pole závislostí, efekt se spustí pouze jednou při připojení komponenty a titulek dokumentu se nezmění při změně počtu. TypeScript vás na tento potenciální problém upozorní.

useContext

Při použití useContext musíte poskytnout typ pro hodnotu kontextu.

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

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

const ThemeContext = createContext(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  // Zde implementujte logiku motivu
  return (
     {} }}>
      {children}
    
  );
};

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

  return (
    

      
Motiv: {theme}

      
    

  );
};

export { ThemeProvider, MyComponent };

Poskytnutím typu pro hodnotu kontextu zajistíte, že hook useContext vrátí hodnotu se správným typem.

Testování TypeScript React komponent

Testování je nezbytnou součástí tvorby robustních aplikací. TypeScript zlepšuje testování tím, že poskytuje typovou bezpečnost a lepší pokrytí kódu.

Unit testování

Použijte testovací frameworky jako Jest a React Testing Library k unit testování vašich komponent.

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

describe('MyComponent', () => {
  it('vykreslí komponentu se správným jménem', () => {
    render();
    expect(screen.getByText('Ahoj, John!')).toBeInTheDocument();
  });

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

Typová kontrola TypeScriptu pomáhá odhalit chyby ve vašich testech, jako je předání nesprávných props nebo použití špatných obsluh událostí.

Integrační testování

Integrační testy ověřují, že různé části vaší aplikace spolu správně fungují. Použijte nástroje jako Cypress nebo Playwright pro end-to-end testování.

Optimalizace výkonu

TypeScript může také pomoci s optimalizací výkonu tím, že odhalí potenciální úzká hrdla výkonu v rané fázi vývojového procesu.

Memoizace

Použijte React.memo k memoizaci funkčních komponent a zabránění zbytečnému překreslování.

import React from 'react';

interface MyComponentProps {
  name: string;
}

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

  );
};

export default React.memo(MyComponent);

React.memo překreslí komponentu pouze v případě, že se změnily její props. To může výrazně zlepšit výkon, zejména u složitých komponent.

Rozdělení kódu (Code Splitting)

Použijte dynamické importy k rozdělení kódu do menších částí a jejich načítání na vyžádání. To může zkrátit počáteční dobu načítání vaší aplikace.

import React, { Suspense } from 'react';

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

const App: React.FC = () => {
  return (
    Načítání...
}> ); };

React.lazy umožňuje dynamicky importovat komponenty, které jsou načteny pouze tehdy, když jsou potřeba. Komponenta Suspense poskytuje záložní UI, zatímco se komponenta načítá.

Závěr

Použití TypeScriptu s Reactem může výrazně zlepšit kvalitu, udržitelnost a škálovatelnost vašich webových aplikací. Dodržováním těchto osvědčených postupů můžete využít sílu TypeScriptu k tvorbě robustních a výkonných aplikací, které splňují potřeby globálního publika. Nezapomeňte se soustředit na jasné definice typů, dobře strukturovanou organizaci projektu a důkladné testování, abyste zajistili dlouhodobý úspěch vašich projektů.

Další zdroje