Foaia de trucuri React TypeScript – Cum se configurează tipurile pe cârlige

TypeScript vă permite să verificați codul pentru a-l face mai robust și mai ușor de înțeles.

În acest ghid, vă voi arăta cum să configurați tipurile TypeScript pe React hooks (useState, useContext, useCallback și așa mai departe).

• Setați tipuri pe useState
• Setați tipuri pe useRef
• Setați tipuri pe useContext
• Setați tipurile pe useReducer
• Setează tipurile de utilizare Memo
• Setați tipuri pe useCallback

Hai să ne scufundăm.

Setați tipuri pe useState

useState hook vă permite să gestionați starea în aplicația dvs. React. Este echivalentul lui this.state într-o componentă de clasă.

import * as React from "react";

export const App: React.FC = () => {
 const [counter, setCounter] = React.useState<number>(0)
 
 return (
    <div className="App">
      <h1>Result: { counter }</h1>
      <button onClick={() => setCounter(counter + 1)}>+</button>
      <button onClick={() => setCounter(counter - 1)}>-</button>
    </div>
  );
}

Pentru a seta tipuri pe useState cârlig, trebuie să treci în <> tipul statului. De asemenea, puteți utiliza un tip de uniune ca acesta <number | null> dacă nu aveți o stare inițială.

Setați tipuri pe useRef

useRef hook returnează un obiect ref modificabil care vă permite să accesați elemente DOM.

import * as React from "react";

export const App: React.FC = () => {
  const myRef = React.useRef<HTMLElement | null>(null)

  return (
    <main className="App" ref={myRef}>
      <h1>My title</h1>
    </main>
  );
}

După cum puteți vedea, calea useRef primește tipuri este același cu useState cârlig. Trebuie doar să-l trimiți în <>. Și, dacă aveți adnotări de mai multe tipuri, folosiți doar tipul de uniune așa cum fac eu aici.

Setați tipuri pe useContext

useContext este un cârlig care vă permite să accesați și să consumați un anumit context într-o aplicație React.

import * as React from "react";

interface IArticle {
  id: number
  title: string
}

const ArticleContext = React.createContext<IArticle[] | []>([]);

const ArticleProvider: React.FC<React.ReactNode> = ({ children }) => {
  const [articles, setArticles] = React.useState<IArticle[] | []>([
    { id: 1, title: "post 1" },
    { id: 2, title: "post 2" }
  ]);

  return (
    <ArticleContext.Provider value={{ articles }}>
      {children}
    </ArticleContext.Provider>
  );
}

const ShowArticles: React.FC = () => {
  const { articles } = React.useContext<IArticle[]>(ArticleContext);

  return (
    <div>
      {articles.map((article: IArticle) => (
        <p key={article.id}>{article.title}</p>
      ))}
    </div>
  );
};

export const App: React.FC = () => {
  return (
    <ArticleProvider>
      <h1>My title</h1>
      <ShowArticles />
    </ArticleProvider>
  );
}

Aici, începem prin crearea IArticle interfață care este tipul contextului nostru.
Apoi, îl folosim pe createContext() pentru a crea un nou context, apoi inițializați-l cu []. Puteți utiliza, de asemenea null ca stare inițială dacă doriți.

Având în vedere acest lucru, putem gestiona acum starea contextului și putem seta tipul useContext pentru a vă aștepta la o serie de tipuri IArticle ca valoare.

Setați tipurile pe useReducer

useReducer hook vă ajută să gestionați stări mai complexe. Este o alternativă la useState – dar rețineți că sunt diferite.

import * as React from "react";

enum ActionType {
  INCREMENT_COUNTER = "INCREMENT_COUNTER",
  DECREMENT_COUNTER = "DECREMENT_COUNTER"
}

interface IReducer {
  type: ActionType;
  count: number;
}

interface ICounter {
  result: number;
}

const initialState: ICounter = {
  result: 0
};

const countValue: number = 1;

const reducer: React.Reducer<ICounter, IReducer> = (state, action) => {
  switch (action.type) {
    case ActionType.INCREMENT_COUNTER:
      return { result: state.result + action.count };
    case ActionType.DECREMENT_COUNTER:
      return { result: state.result - action.count };
    default:
      return state;
  }
};

export default function App() {
  const [state, dispatch] = React.useReducer<React.Reducer<ICounter, IReducer>>(
    reducer,
    initialState
  );

  return (
    <div className="App">
      <h1>Result: {state.result}</h1>
      <button
        onClick={() =>
          dispatch({ type: ActionType.INCREMENT_COUNTER, count: countValue })
        }> +
      </button>
      <button
        onClick={() =>
          dispatch({ type: ActionType.DECREMENT_COUNTER, count: countValue })
        }> -
      </button>
    </div>
  );
}

Aici, începem prin declararea tipurilor de acțiuni care permit manipularea contorului. Apoi, setăm două tipuri pentru funcția reductor și respectiv pentru starea contorului.

Reductorul așteaptă o state de tip ICounter si un action de tip IReducer. Cu aceasta, contorul poate fi acum manipulat.

useReducer cârligul primește funcția reductor și o stare inițială ca argumente și returnează două elemente: state a tejghelei și a dispatch acțiune.

Pentru a seta tipul pentru valorile returnate de ueReducer, doar treceți în <> tipul datelor dvs.

Cu acest lucru, contorul poate fi acum incrementat sau decrementat useReducer.

Setați tipurile de utilizare Memo

useMemo hook vă permite să memorați ieșirea unei funcții date. Returnează o valoare memorată.

const memoizedValue = React.useMemo<string>(() => {
  computeExpensiveValue(a, b)
}, [a, b])

Pentru a activa tipurile useMemo, doar treceți în <> tipul de date pe care doriți să le memorați. Aici, cârligul așteaptă o string ca valoare returnată.

Setați tipuri pe useCallback

useCallback hook vă permite să memorați o funcție pentru a preveni redarea inutilă. Returnează un apel invers memorat.

type CallbackType = (...args: string[]) => void

const memoizedCallback = React.useCallback<CallbackType>(() => {
    doSomething(a, b);
  }, [a, b]);

Aici, declarăm CallbackType tip care se folosește ca tip pe apelul pe care vrem să-l memorăm.

Se așteaptă să primească parametri de tip string și ar trebui să returneze o valoare de tip void.

Apoi, setăm acel tip useCallback – și dacă transmiteți un tip greșit apelului de apel sau matricei de dependențe, TypeScript vă va țipa.

Puteți găsi alt conținut excelent ca acesta pe blogul meu sau urmează-mă pe Twitter pentru a fi notificat.

Mulțumesc pentru lectură.