TypeScript ar React: Labākās prakses mērogojamu un uzturējamu lietotņu izstrādei

TypeScript un React ir jaudīga kombinācija mūsdienīgu tīmekļa lietotņu veidošanai. TypeScript ievieš statisko tipēšanu JavaScript, uzlabojot koda kvalitāti un uzturējamību, savukārt React nodrošina deklaratīvu un uz komponentēm balstītu pieeju lietotāja saskarņu veidošanai. Šajā bloga ierakstā tiek aplūkotas labākās prakses, kā izmantot TypeScript ar React, lai izveidotu stabilas, mērogojamas un uzturējamas lietotnes, kas piemērotas globālai auditorijai.

Kāpēc izmantot TypeScript ar React?

Pirms iedziļināties labākajās praksēs, sapratīsim, kāpēc TypeScript ir vērtīgs papildinājums React izstrādē:

• Uzlabota koda kvalitāte: TypeScript statiskā tipēšana palīdz atklāt kļūdas agrīnā izstrādes posmā, samazinot izpildlaika problēmas un uzlabojot koda uzticamību.
• Uzlabota uzturējamība: Tipu anotācijas un saskarnes padara kodu vieglāk saprotamu un pārveidojamu, nodrošinot labāku ilgtermiņa uzturējamību.
• Labāks IDE atbalsts: TypeScript nodrošina izcilu IDE atbalstu, ieskaitot automātisko pabeigšanu, koda navigāciju un pārveidošanas rīkus, kas palielina izstrādātāju produktivitāti.
• Samazināts kļūdu skaits: Statiskā tipēšana atklāj daudzas izplatītas JavaScript kļūdas pirms izpildlaika, nodrošinot stabilāku un no kļūdām brīvu lietotni.
• Uzlabota sadarbība: Skaidras tipu definīcijas atvieglo komandu sadarbību lielos projektos, jo izstrādātāji var ātri saprast dažādu komponenšu un funkciju mērķi un lietojumu.

TypeScript React projekta izveide

Izmantojot Create React App

Vieglākais veids, kā sākt jaunu TypeScript React projektu, ir izmantot Create React App ar TypeScript veidni:

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

Šī komanda izveido pamata React projektu ar konfigurētu TypeScript, ieskaitot nepieciešamās atkarības un tsconfig.json failu.

tsconfig.json konfigurēšana

tsconfig.json fails ir jūsu TypeScript konfigurācijas sirds. Šeit ir daži ieteicamie iestatījumi:

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

Galvenās opcijas, kas jāņem vērā:

• "strict": true: Iespējo stingru tipu pārbaudi, kas ir ļoti ieteicama potenciālo kļūdu atklāšanai.
• "esModuleInterop": true: Iespējo sadarbspēju starp CommonJS un ES moduļiem.
• "jsx": "react-jsx": Iespējo jauno JSX transformāciju, kas vienkāršo React kodu un uzlabo veiktspēju.

Labākās prakses React komponentēm ar TypeScript

Komponentu rekvizītu (Props) tipēšana

Viens no svarīgākajiem aspektiem, lietojot TypeScript ar React, ir pareiza komponentu rekvizītu (props) tipēšana. Izmantojiet saskarnes vai tipu aizstājvārdus, lai definētu rekvizītu objekta formu.

interface MyComponentProps {
  name: string;
  age?: number; // Neobligāts rekvizīts
  onClick: () => void;
}

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

      
Hello, {name}!
      {age && 
You are {age} years old.
}
      Click me
    
  );
};

Izmantojot React.FC<MyComponentProps>, tiek nodrošināts, ka komponente ir funkcionāla komponente un ka rekvizīti ir pareizi tipēti.

Komponentes stāvokļa (State) tipēšana

Ja izmantojat klašu komponentes, jums būs jātipē arī komponentes stāvoklis. Definējiet saskarni vai tipa aizstājvārdu stāvokļa objektam un izmantojiet to komponentes definīcijā.

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

Funkcionālajām komponentēm, kas izmanto useState āķi (hook), TypeScript bieži var secināt stāvokļa mainīgā tipu, bet jūs to varat arī norādīt skaidri:

import React, { useState } from 'react';

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

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
};

Tipu sargu (Type Guards) izmantošana

Tipu sargi ir funkcijas, kas sašaurina mainīgā tipu noteiktā darbības jomā. Tie ir noderīgi, strādājot ar apvienojuma tipiem (union types) vai kad nepieciešams nodrošināt, ka mainīgajam ir noteikts tips pirms operācijas veikšanas.

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 ir tipu sargs, kas pārbauda, vai Shape ir Circle. if blokā TypeScript zina, ka shape ir Circle, un ļauj piekļūt tā radius īpašībai.

Notikumu apstrāde

Apstrādājot notikumus React ar TypeScript, ir svarīgi pareizi tipēt notikuma objektu. Izmantojiet atbilstošo notikuma tipu no React nosaukumvietas.

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

  return (
    
  );
};

Šajā piemērā React.ChangeEvent<HTMLInputElement> tiek izmantots, lai tipētu notikuma objektu ievades elementa maiņas notikumam. Tas nodrošina piekļuvi target īpašībai, kas ir HTMLInputElement.

Projekta struktūra

Labi strukturēts projekts ir būtisks uzturējamībai un mērogojamībai. Šeit ir ieteicamā projekta struktūra TypeScript React lietotnei:

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

Galvenie punkti:

• Komponentes: Grupējiet saistītās komponentes direktorijās. Katrai direktorijai jāsatur komponentes TypeScript fails, CSS moduļi (ja tiek izmantoti) un index.ts fails komponentes eksportēšanai.
• Lapas: Glabājiet augstākā līmeņa komponentes, kas pārstāv dažādas jūsu lietotnes lapas.
• Servisi: Šajā direktorijā implementējiet API izsaukumus un citus servisus.
• Tipi: Šajā direktorijā definējiet globālās tipu definīcijas un saskarnes.
• Utilītas: Glabājiet palīgfunkcijas un konstantes.
• index.ts: Izmantojiet index.ts failus, lai atkārtoti eksportētu moduļus no direktorijas, nodrošinot tīru un organizētu API moduļu importēšanai.

"Āķu" (Hooks) izmantošana ar TypeScript

React "āķi" (Hooks) ļauj izmantot stāvokli un citas React funkcijas funkcionālajās komponentēs. TypeScript nevainojami darbojas ar "āķiem", nodrošinot tipu drošību un uzlabotu izstrādātāja pieredzi.

useState

Kā parādīts iepriekš, jūs varat skaidri norādīt stāvokļa mainīgā tipu, izmantojot useState:

import React, { useState } from 'react';

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

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
};

useEffect

Lietojot useEffect, pievērsiet uzmanību atkarību masīvam. TypeScript var palīdzēt atklāt kļūdas, ja aizmirstat iekļaut atkarību, kas tiek izmantota efekta ietvaros.

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // Pievienojiet 'count' atkarību masīvam

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
};

Ja izlaidīsiet count no atkarību masīva, efekts tiks izpildīts tikai vienu reizi, kad komponente tiek ielādēta, un dokumenta virsraksts netiks atjaunināts, mainoties skaitītājam. TypeScript brīdinās jūs par šo potenciālo problēmu.

useContext

Lietojot useContext, jums ir jānorāda tips konteksta vērtībai.

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

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

const ThemeContext = createContext(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  // Implementējiet tēmas loģiku šeit
  return (
     {} }}>
      {children}
    
  );
};

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

  return (
    

      
Theme: {theme}
      Toggle Theme
    
  );
};

export { ThemeProvider, MyComponent };

Norādot tipu konteksta vērtībai, jūs nodrošināt, ka useContext āķis atgriež vērtību ar pareizo tipu.

TypeScript React komponenšu testēšana

Testēšana ir būtiska daļa stabilu lietotņu veidošanā. TypeScript uzlabo testēšanu, nodrošinot tipu drošību un uzlabotu koda pārklājumu.

Vienībtestēšana (Unit Testing)

Izmantojiet testēšanas ietvarus, piemēram, Jest un React Testing Library, lai veiktu savu komponenšu vienībtestēšanu.

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

describe('MyComponent', () => {
  it('attēlo komponenti ar pareizo nosaukumu', () => {
    render();
    expect(screen.getByText('Hello, John!')).toBeInTheDocument();
  });

  it('izsauc onClick apstrādātāju, kad tiek noklikšķināts uz pogas', () => {
    const onClick = jest.fn();
    render();
    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

TypeScript tipu pārbaude palīdz atklāt kļūdas jūsu testos, piemēram, nododot nepareizus rekvizītus vai izmantojot nepareizus notikumu apstrādātājus.

Integrācijas testēšana

Integrācijas testi pārbauda, vai dažādas jūsu lietotnes daļas darbojas kopā pareizi. Izmantojiet rīkus, piemēram, Cypress vai Playwright, lai veiktu pilna cikla (end-to-end) testēšanu.

Veiktspējas optimizācija

TypeScript var arī palīdzēt ar veiktspējas optimizāciju, atklājot potenciālos veiktspējas "pudeles kaklus" agrīnā izstrādes posmā.

Memoizācija

Izmantojiet React.memo, lai memoizētu funkcionālās komponentes un novērstu nevajadzīgu pārrenderēšanu.

import React from 'react';

interface MyComponentProps {
  name: string;
}

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

export default React.memo(MyComponent);

React.memo pārrenderēs komponenti tikai tad, ja tās rekvizīti būs mainījušies. Tas var ievērojami uzlabot veiktspēju, īpaši sarežģītām komponentēm.

Koda sadalīšana (Code Splitting)

Izmantojiet dinamiskos importus, lai sadalītu kodu mazākos gabalos un ielādētu tos pēc pieprasījuma. Tas var samazināt jūsu lietotnes sākotnējo ielādes laiku.

import React, { Suspense } from 'react';

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

const App: React.FC = () => {
  return (
    Ielādē...