Установка типов на useState

useStat позволяет управлять состоянием в вашем React приложении. Это эквивалент this.stateв компоненте класса.

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

Чтобы установить типы на useState , нужно перейти в <>тип состояния. Вы также можете использовать такой тип объединения, <number | null>если у вас нет начального состояния.

Установка типов на useRef

useRef возвращает изменяемый объект ref , который позволяет получить доступ 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>  
);
}

Как видите, способ получения useRefтипов такой же, как и у useState. Вам просто нужно передать его в <>- и, если у вас есть аннотации нескольких типов, просто используйте тип объединения.

Установка типов на useContext

useContext  позволяет получать доступ и использовать данный контекст в приложении 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>  
);
}

Здесь мы начинаем с создания IArticleинтерфейса, который является типом нашего контекста.
Затем мы используем его в createContext()методе для создания нового контекста, а затем инициализируем его []- вы также можете использовать его nullв качестве начального состояния, если хотите.

Теперь можем обрабатывать состояние контекста и устанавливать тип useContext, чтобы ожидать массив типа IArticle в качестве значения.

Установка типов на useReducer

useReducer помогает управлять более сложными состояниями. Это альтернатива useState- но имейте в виду, что они разные.

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

Здесь мы начнем с объявления типов действий, которые позволяют обрабатывать счетчик. Затем мы устанавливаем соответственно два типа для функции редуктора и состояния счетчика.

Редуктор ожидает stateтипа ICounterи actionтипа IReducer. Таким образом, счетчик теперь может обрабатываться соответственно.

useReducer принимает функцию редуктора и начальное состояние в качестве аргументов и возвращает два элемента: stateсчетчик и dispatchдействия.

Чтобы установить тип для значений, возвращаемых ueReducer- просто передайте <>тип ваших данных.

После этого счетчик теперь можно увеличивать или уменьшать useReducer.

Установка типов на useMemo

useMemo позволяет запоминать выход данной функции. Он возвращает мемоизированное значение.

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

Чтобы установить типы useMemo- просто перейдите в <>тип данных, которые вы хотите запомнить.
Здесь хук ожидает stringвозвращаемого значения.

Установка типов на useCallback

useCallback позволяет запоминать функцию , чтобы предотвратить ненужные повторно делает. Он возвращает мемоизированный обратный вызов.

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

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

Здесь мы объявляем CallbackTypeтип, который используется в качестве типа для обратного вызова, который мы хотим запомнить.
Он ожидает получения параметров типа stringи должен возвращать значение типа void.

Затем мы устанавливаем  тип useCallback- и если вы передадите неправильный тип обратному вызову или массиву зависимостей, TypeScript будет выдавать ошибку.