M

MLOG

Eesti

Avastage parimad praktikad TypeScripti ja Reacti kasutamiseks, et luua robustseid, skaleeritavaid ja hooldatavaid veebirakendusi. Õppige projekti struktuuri, komponentide disaini, testimise ja optimeerimise kohta.

TypeScript koos Reactiga: parimad praktikad skaleeritavate ja hooldatavate rakenduste loomiseks

TypeScript ja React on võimas kombinatsioon kaasaegsete veebirakenduste ehitamiseks. TypeScript toob JavaScripti staatilise tüüpimise, parandades koodi kvaliteeti ja hooldatavust, samal ajal kui React pakub deklaratiivset ja komponendipõhist lähenemist kasutajaliideste ehitamiseks. See blogipostitus uurib parimaid praktikaid TypeScripti kasutamiseks koos Reactiga, et luua robustseid, skaleeritavaid ja hooldatavaid rakendusi, mis sobivad globaalsele publikule.

Miks kasutada TypeScripti koos Reactiga?

Enne parimatesse praktikatesse sukeldumist mõistame, miks TypeScript on väärtuslik lisand Reacti arendusele:

TypeScript Reacti projekti seadistamine

Kasutades Create React Appi

Lihtsaim viis uue TypeScript Reacti projekti alustamiseks on kasutada Create React Appi koos TypeScripti malliga:

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

See käsk seadistab põhilise Reacti projekti koos konfigureeritud TypeScriptiga, sealhulgas vajalikud sõltuvused ja tsconfig.json faili.

tsconfig.json faili konfigureerimine

tsconfig.json fail on teie TypeScripti konfiguratsiooni süda. Siin on mõned soovitatavad seaded:

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

Olulised valikud, mida kaaluda:

Parimad praktikad Reacti komponentidele TypeScriptiga

Komponendi propside tüüpimine

Üks olulisemaid aspekte TypeScripti kasutamisel koos Reactiga on komponendi propside korrektne tüüpimine. Kasutage liideseid või tüübiliaseid, et defineerida props-objekti kuju.

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

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

      
Hello, {name}!

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

  );
};

Kasutades React.FC<MyComponentProps> tagatakse, et komponent on funktsionaalne komponent ja et propsid on korrektselt tüübitud.

Komponendi oleku (state) tüüpimine

Kui kasutate klassikomponente, peate tüüpima ka komponendi oleku. Defineerige liides või tüübilias olekuobjekti jaoks ja kasutage seda komponendi definitsioonis.

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}

        
      

    );
  }
}

Funktsionaalsete komponentide puhul, mis kasutavad useState konksu, suudab TypeScript sageli olekumuutuja tüübi tuletada, kuid saate selle ka selgesõnaliselt määrata:

import React, { useState } from 'react';

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

  return (
    

      
Count: {count}

      
    

  );
};

Tüübivalvurite (Type Guards) kasutamine

Tüübivalvurid on funktsioonid, mis kitsendavad muutuja tüüpi teatud skoobis. Need on kasulikud liittüüpidega tegelemisel või kui peate enne operatsiooni sooritamist tagama, et muutujal on kindel tüüp.

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

Funktsioon isCircle on tüübivalvur, mis kontrollib, kas Shape on Circle. if-ploki sees teab TypeScript, et shape on Circle ja lubab teil pääseda ligi selle radius omadusele.

Sündmuste käsitlemine

Reactis sündmuste käsitlemisel TypeScriptiga on oluline sündmuseobjekt korrektselt tüüpida. Kasutage sobivat sündmuse tüüpi React nimeruumist.

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

  return (
    
  );
};

Selles näites kasutatakse React.ChangeEvent<HTMLInputElement>, et tüüpida sündmuseobjekt sisendvälja muutmise sündmuse jaoks. See annab juurdepääsu target omadusele, mis on HTMLInputElement.

Projekti struktuur

Hästi struktureeritud projekt on hooldatavuse ja skaleeritavuse seisukohalt ülioluline. Siin on soovitatav projekti struktuur TypeScript Reacti rakenduse jaoks:

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

Põhipunktid:

Konksude (Hooks) kasutamine TypeScriptiga

Reacti konksud võimaldavad teil kasutada olekut ja muid Reacti funktsioone funktsionaalsetes komponentides. TypeScript töötab konksudega sujuvalt, pakkudes tüübiohutust ja paremat arendajakogemust.

useState

Nagu varem näidatud, saate olekumuutujat useState kasutamisel selgesõnaliselt tüüpida:

import React, { useState } from 'react';

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

  return (
    

      
Count: {count}

      
    

  );
};

useEffect

useEffect'i kasutamisel olge tähelepanelik sõltuvuste massiivi osas. TypeScript aitab teil vigu leida, kui unustate lisada sõltuvuse, mida efekti sees kasutatakse.

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // Lisa 'count' sõltuvuste massiivi

  return (
    

      
Count: {count}

      
    

  );
};

Kui jätate count sõltuvuste massiivist välja, käivitub efekt ainult korra, kui komponent paigaldatakse, ja dokumendi pealkiri ei uuene, kui loendur muutub. TypeScript hoiatab teid selle võimaliku probleemi eest.

useContext

useContext'i kasutamisel peate määrama konteksti väärtuse tüübi.

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

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

const ThemeContext = createContext(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  // Rakenda teema loogika siin
  return (
     {} }}>
      {children}
    
  );
};

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

  return (
    

      
Theme: {theme}

      
    

  );
};

export { ThemeProvider, MyComponent };

Määrates konteksti väärtusele tüübi, tagate, et useContext konks tagastab korrektse tüübiga väärtuse.

TypeScript Reacti komponentide testimine

Testimine on robustsete rakenduste ehitamise oluline osa. TypeScript täiustab testimist, pakkudes tüübiohutust ja paremat koodi katvust.

Ühiktestimine

Kasutage oma komponentide ühiktestimiseks testimisraamistikke nagu Jest ja React Testing Library.

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

describe('MyComponent', () => {
  it('renders the component with the correct name', () => {
    render();
    expect(screen.getByText('Hello, John!')).toBeInTheDocument();
  });

  it('calls the onClick handler when the button is clicked', () => {
    const onClick = jest.fn();
    render();
    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

TypeScripti tüübikontroll aitab teie testides vigu leida, näiteks valede propside edastamine või valede sündmuste käsitlejate kasutamine.

Integratsioonitestimine

Integratsioonitestid kontrollivad, kas teie rakenduse erinevad osad töötavad korrektselt koos. Kasutage otsast-lõpuni testimiseks tööriistu nagu Cypress või Playwright.

Jõudluse optimeerimine

TypeScript võib aidata ka jõudluse optimeerimisel, püüdes kinni potentsiaalseid jõudluse kitsaskohti juba arendusprotsessi alguses.

Memoiseerimine

Kasutage React.memo funktsionaalsete komponentide memoiseerimiseks ja tarbetute uuesti renderdamiste vältimiseks.

import React from 'react';

interface MyComponentProps {
  name: string;
}

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

  );
};

export default React.memo(MyComponent);

React.memo renderdab komponendi uuesti ainult siis, kui selle propsid on muutunud. See võib oluliselt parandada jõudlust, eriti keerukate komponentide puhul.

Koodi tükeldamine (Code Splitting)

Kasutage dünaamilisi importimisi, et jagada oma kood väiksemateks tükkideks ja laadida neid vastavalt vajadusele. See võib vähendada teie rakenduse esialgset laadimisaega.

import React, { Suspense } from 'react';

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

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

React.lazy võimaldab teil komponente dünaamiliselt importida, mis laaditakse ainult siis, kui neid vaja läheb. Suspense komponent pakub varu-UI-d, kuni komponent laadib.

Kokkuvõte

TypeScripti kasutamine koos Reactiga võib oluliselt parandada teie veebirakenduste kvaliteeti, hooldatavust ja skaleeritavust. Järgides neid parimaid praktikaid, saate ära kasutada TypeScripti võimsust, et ehitada robustseid ja jõudsaid rakendusi, mis vastavad globaalse publiku vajadustele. Pidades meeles selgeid tüübimääratlusi, hästi struktureeritud projekti korraldust ja põhjalikku testimist, tagate oma projektide pikaajalise edu.

Lisamaterjalid