TypeScript su React: Geriausios praktikos mastelio keitimui pritaikytoms ir prižiūrimoms programoms

„TypeScript“ ir „React“ yra galingas derinys šiuolaikinėms žiniatinklio programoms kurti. „TypeScript“ į „JavaScript“ įveda statinį tipizavimą, pagerindamas kodo kokybę ir prižiūrimumą, o „React“ suteikia deklaratyvų ir komponentais pagrįstą požiūrį į vartotojo sąsajų kūrimą. Šiame tinklaraščio įraše nagrinėjamos geriausios „TypeScript“ ir „React“ naudojimo praktikos, skirtos kurti tvirtas, mastelį keičiančias ir prižiūrimas programas, pritaikytas pasaulinei auditorijai.

Kodėl verta naudoti TypeScript su React?

Prieš gilinantis į geriausias praktikas, supraskime, kodėl „TypeScript“ yra vertingas priedas prie „React“ kūrimo:

• Pagerinta kodo kokybė: „TypeScript“ statinis tipizavimas padeda anksti aptikti klaidas kūrimo procese, mažina vykdymo laiko problemas ir gerina kodo patikimumą.
• Patobulintas prižiūrimumas: Tipų anotacijos ir sąsajos palengvina kodo supratimą ir pertvarkymą, todėl ilgainiui pagerėja jo prižiūrimumas.
• Geresnis IDE palaikymas: „TypeScript“ suteikia puikų IDE palaikymą, įskaitant automatinį užbaigimą, kodo naršymą ir pertvarkymo įrankius, didinančius kūrėjų produktyvumą.
• Mažiau klaidų: Statinis tipizavimas aptinka daugumą įprastų „JavaScript“ klaidų prieš vykdymo laiką, todėl programa tampa stabilesnė ir be klaidų.
• Pagerintas bendradarbiavimas: Aiškūs tipų apibrėžimai palengvina komandų bendradarbiavimą dideliuose projektuose, nes kūrėjai gali greitai suprasti skirtingų komponentų ir funkcijų paskirtį bei naudojimą.

TypeScript React projekto parengimas

Naudojant Create React App

Lengviausias būdas pradėti naują „TypeScript React“ projektą yra naudojant „Create React App“ su „TypeScript“ šablonu:

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

Ši komanda sukuria pagrindinį „React“ projektą su sukonfigūruotu „TypeScript“, įskaitant reikalingas priklausomybes ir tsconfig.json failą.

Konfigūruojant tsconfig.json

tsconfig.json failas yra jūsų „TypeScript“ konfigūracijos pagrindas. Štai keletas rekomenduojamų nustatymų:

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

Svarbiausios parinktys, į kurias reikia atsižvelgti:

• "strict": true: Įjungia griežtą tipų tikrinimą, kuris labai rekomenduojamas siekiant išvengti galimų klaidų.
• "esModuleInterop": true: Įjungia sąveiką tarp „CommonJS“ ir ES modulių.
• "jsx": "react-jsx": Įjungia naują JSX transformaciją, kuri supaprastina „React“ kodą ir pagerina našumą.

Geriausios praktikos dirbant su React komponentais naudojant TypeScript

Komponento savybių (Props) tipizavimas

Vienas svarbiausių „TypeScript“ naudojimo su „React“ aspektų yra tinkamas komponento savybių (props) tipizavimas. Naudokite sąsajas (interfaces) arba tipų sinonimus (type aliases), kad apibrėžtumėte savybių objekto struktūrą.

interface MyComponentProps {
  name: string;
  age?: number; // Pasirenkama savybė
  onClick: () => void;
}

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

      
Sveiki, {name}!
      {age && 
Jums yra {age} metų.
}
      Paspausk mane
    
  );
};

Naudojant React.FC<MyComponentProps> užtikrinama, kad komponentas yra funkcinis komponentas ir kad jo savybės yra tinkamai tipizuotos.

Komponento būsenos (State) tipizavimas

Jei naudojate klasių komponentus, taip pat turėsite tipizuoti komponento būseną. Apibrėžkite sąsają arba tipo sinonimą būsenos objektui ir naudokite jį komponento apibrėžime.

interface MyComponentState {
  count: number;
}

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

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

  render() {
    return (
      

        
Skaičius: {this.state.count}
        Didinti
      
    );
  }
}

Funkciniams komponentams, naudojantiems useState hook, „TypeScript“ dažnai gali nuspėti būsenos kintamojo tipą, bet jį galima nurodyti ir aiškiai:

import React, { useState } from 'react';

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

  return (
    

      
Skaičius: {count}
       setCount(count + 1)}>Didinti
    
  );
};

Tipų apsaugų (Type Guards) naudojimas

Tipų apsaugos yra funkcijos, kurios susiaurina kintamojo tipą tam tikroje srityje. Jos naudingos dirbant su jungtiniais tipais (union types) arba kai reikia užtikrinti, kad kintamasis turi tam tikrą tipą prieš atliekant operaciją.

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

Funkcija isCircle yra tipų apsauga, kuri patikrina, ar Shape yra Circle. if bloko viduje „TypeScript“ žino, kad shape yra Circle, ir leidžia pasiekti jo radius savybę.

Įvykių (Events) tvarkymas

Tvarkant įvykius „React“ su „TypeScript“, svarbu teisingai tipizuoti įvykio objektą. Naudokite atitinkamą įvykio tipą iš React vardų srities.

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

  return (
    
  );
};

Šiame pavyzdyje React.ChangeEvent<HTMLInputElement> naudojamas įvykio objektui tipizuoti, kai įvesties elemente įvyksta pakeitimo įvykis (change event). Tai suteikia prieigą prie target savybės, kuri yra HTMLInputElement.

Projekto struktūra

Gerai struktūrizuotas projektas yra labai svarbus prižiūrimumui ir mastelio keitimui. Štai siūloma projekto struktūra „TypeScript React“ programai:

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

Svarbiausi punktai:

• Komponentai (Components): Grupuokite susijusius komponentus į katalogus. Kiekviename kataloge turėtų būti komponento „TypeScript“ failas, CSS moduliai (jei naudojami) ir index.ts failas komponento eksportavimui.
• Puslapiai (Pages): Laikykite aukščiausio lygio komponentus, kurie atitinka skirtingus jūsų programos puslapius.
• Paslaugos (Services): Įgyvendinkite API iškvietimus ir kitas paslaugas šiame kataloge.
• Tipai (Types): Apibrėžkite globalius tipų apibrėžimus ir sąsajas šiame kataloge.
• Pagalbinės priemonės (Utils): Laikykite pagalbines funkcijas ir konstantas.
• index.ts: Naudokite index.ts failus, kad reeksportuotumėte modulius iš katalogo, suteikdami švarų ir organizuotą API modulių importavimui.

„Hooks“ naudojimas su „TypeScript“

„React Hooks“ leidžia naudoti būseną ir kitas „React“ funkcijas funkciniuose komponentuose. „TypeScript“ sklandžiai veikia su „Hooks“, suteikdamas tipų saugumą ir geresnę programuotojo patirtį.

useState

Kaip parodyta anksčiau, galite aiškiai nurodyti būsenos kintamojo tipą, kai naudojate useState:

import React, { useState } from 'react';

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

  return (
    

      
Skaičius: {count}
       setCount(count + 1)}>Didinti
    
  );
};

useEffect

Naudodami useEffect, atkreipkite dėmesį į priklausomybių masyvą. „TypeScript“ gali padėti jums aptikti klaidas, jei pamiršite įtraukti priklausomybę, kuri naudojama efekto viduje.

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

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

  useEffect(() => {
    document.title = `Skaičius: ${count}`;
  }, [count]); // Pridėkite 'count' į priklausomybių masyvą

  return (
    

      
Skaičius: {count}
       setCount(count + 1)}>Didinti
    
  );
};

Jei praleisite count iš priklausomybių masyvo, efektas bus paleistas tik vieną kartą, kai komponentas bus primontuotas, ir dokumento pavadinimas nebus atnaujinamas, kai skaičius pasikeis. „TypeScript“ įspės jus apie šią galimą problemą.

useContext

Naudojant useContext, turite nurodyti konteksto reikšmės tipą.

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

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

const ThemeContext = createContext(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  // Čia įgyvendinkite temos logiką
  return (
     {} }}>
      {children}
    
  );
};

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

  return (
    

      
Tema: {theme}
      Perjungti temą
    
  );
};

export { ThemeProvider, MyComponent };

Nurodydami konteksto reikšmės tipą, užtikrinate, kad useContext hook grąžins reikšmę su teisingu tipu.

TypeScript React komponentų testavimas

Testavimas yra esminė tvirtų programų kūrimo dalis. „TypeScript“ pagerina testavimą, suteikdamas tipų saugumą ir geresnį kodo aprėptį.

Vienetų testavimas (Unit Testing)

Naudokite testavimo karkasus, tokius kaip „Jest“ ir „React Testing Library“, savo komponentų vienetų testavimui.

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

describe('MyComponent', () => {
  it('atvaizduoja komponentą su teisingu vardu', () => {
    render();
    expect(screen.getByText('Sveiki, John!')).toBeInTheDocument();
  });

  it('iškviečia onClick apdorojimo funkciją, kai mygtukas paspaudžiamas', () => {
    const onClick = jest.fn();
    render();
    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

„TypeScript“ tipų tikrinimas padeda aptikti klaidas jūsų testuose, pavyzdžiui, perduodant neteisingas savybes arba naudojant netinkamus įvykių apdorojimo metodus.

Integracinis testavimas

Integraciniai testai patikrina, ar skirtingos jūsų programos dalys veikia kartu teisingai. Naudokite įrankius, tokius kaip „Cypress“ ar „Playwright“, atlikdami „end-to-end“ testavimą.

Našumo optimizavimas

„TypeScript“ taip pat gali padėti optimizuoti našumą, aptikdamas galimas našumo problemas ankstyvoje kūrimo stadijoje.

Memoizacija

Naudokite React.memo, kad memoizuotumėte funkcinius komponentus ir išvengtumėte nereikalingų pervaizdavimų.

import React from 'react';

interface MyComponentProps {
  name: string;
}

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

export default React.memo(MyComponent);

React.memo pervaizduos komponentą tik tada, jei pasikeitė jo savybės. Tai gali žymiai pagerinti našumą, ypač sudėtingiems komponentams.

Kodo skaidymas

Naudokite dinaminius importus, kad suskaidytumėte kodą į mažesnes dalis ir įkeltumėte jas pagal poreikį. Tai gali sumažinti pradinį jūsų programos įkėlimo laiką.

import React, { Suspense } from 'react';

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

const App: React.FC = () => {
  return (
    Kraunama...