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.
Conţinut
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ă.
#Foaia #trucuri #React #TypeScript #Cum #configurează #tipurile #cârlige
Foaia de trucuri React TypeScript – Cum se configurează tipurile pe cârlige