import { useState, useRef, useCallback } from 'react';

// 重载函数签名，以支持 T 或 T | undefined 类型的初始值
function useVal<T>(): [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>, () => T | undefined];
function useVal<T>(initialValue: T): [T, React.Dispatch<React.SetStateAction<T>>, () => T];
function useVal<T>(initialValue: T | (() => T)): [T, React.Dispatch<React.SetStateAction<T>>, () => T];

function useVal<T>(initialValue?: T | (() => T)): [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>, () => T | undefined] {
  // 使用 useState 来维护可响应的数据
  // 这里不再强制类型转换，而是让 TypeScript 自动推断
  const [data, setStateData] = useState(initialValue);

  // 使用 useRef 来维护一个可以获取最新值的引用
  // useRef 的初始值也保持与 useState 一致
  const dataRef = useRef(initialValue instanceof Function ? initialValue() : initialValue);

  // 封装 setStateData，在更新 state 的同时更新 ref
  const setData = useCallback((newValue: React.SetStateAction<T | undefined>) => {
    setStateData(prevData => {
      // 计算最新的值
      const finalValue = typeof newValue === 'function'
        ? (newValue as (prevState: T | undefined) => T | undefined)(prevData)
        : newValue;

      // 同步更新 ref
      dataRef.current = finalValue;

      return finalValue;
    });
  }, []);

  // 返回一个函数，用于获取 dataRef.current 的最新值
  const getData = useCallback(() => dataRef.current, []);

  // 这里的返回类型需要统一为 T | undefined，因为存在不传初始值的情况
  return [data, setData, getData];
}

export { useVal };

import { useEffect, useState } from 'react'
import { useVal } from '@/utils/useVal'

export default function() {
  const [a, setA] = useState<number>(1)
  const [b, setB, getB] = useVal<number>(1)

  useEffect(() => {
    setInterval(() => {
      setA(old => old + 1)
      setB(old => old + 1)
      console.log(`修改一次：  a: ${a}, b: ${b}, b的ref: ${getB()}`)
    }, 1000)
  }, [])

  return ('Test')
}

修改一次：  a: 1, b: 1, b的ref: 2
修改一次：  a: 1, b: 1, b的ref: 3
修改一次：  a: 1, b: 1, b的ref: 4
修改一次：  a: 1, b: 1, b的ref: 5