مثال هوک ها با تایپ اسکریپت

// تشخیص خودکار نوع داده به عنوان "boolean"
const [enabled, setEnabled] = useState(false);

const [enabled, setEnabled] = useState<boolean>(false);

// تعیین وضعیت‌های مجاز برای یک فرآیند
type Status = "idle" | "loading" | "success" | "error";

const [status, setStatus] = useState<Status>("idle");

type RequestState =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: any }
  | { status: 'error'; error: Error };

const [requestState, setRequestState] = useState<RequestState>({ status: 'idle' });

import { useReducer } from 'react';

// ۱. تعریف ساختار وضعیت
interface State {
   count: number;
}

// ۲. تعریف اکشن‌های مجاز ورودی
type CounterAction =
  | { type: "reset" }
  | { type: "setCount"; value: State["count"] };

const initialState: State = { count: 0 };

// ۳. تعریف تابع ردیوسر همراه با تایپ ورودی‌ها و خروجی
function stateReducer(state: State, action: CounterAction): State {
  switch (action.type) {
    case "reset":
      return initialState;
    case "setCount":
      return { ...state, count: action.value };
    default:
      throw new Error("Unknown action");
  }
}

export default function App() {
  const [state, dispatch] = useReducer(stateReducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "setCount", value: state.count + 5 })}>Add 5</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  );
}

type Theme = "light" | "dark" | "system";
const ThemeContext = createContext<Theme>("system");

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

type ComplexObject = { kind: string };

// تعریف کانتکست که می‌تواند null هم باشد
const Context = createContext<ComplexObject | null>(null);

// حذف خودکار تداخل null با بررسی در هوک اختصاصی
const useGetComplexObject = () => {
  const object = useContext(Context);
  if (!object) {
    throw new Error("useGetComplexObject must be used within a Provider");
  }
  return object; // نوع داده بازگشتی کاملاً ComplexObject است و null نیست
};

// نوع داده visibleTodos دقیقاً همان نوع داده خروجی تابع filterTodos خواهد بود
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);

import { useState, useCallback } from 'react';

export default function Form() {
  const [value, setValue] = useState("Change me");

  // تعیین نوع دقیق هندلر با استفاده از ساختارهای ژنریک راکت
  const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>((event) => {
    setValue(event.currentTarget.value);
  }, [setValue]);

  return <input value={value} onChange={handleChange} />;
}