《TypeScript编程实战》11.2 Hooks 类型与自定义 Hook

function useStatus() {
  const [status, setStatus] = useState('idle');
  setStatus('idle2'); // 编译通过，但这是拼写错误
  return [status, setStatus] as const;
}

// 退化一：字面量 widen 成 string
const [a, setA] = useState('idle');                 // string

// 修复：显式传类型参数，或给初值加 as const
const [b, setB] = useState<'idle' | 'loading' | 'done'>('idle');
const [c, setC] = useState('idle' as const);        // 'idle'，但无法再变成 'loading'

// 退化二：null 初值让 T 变成 null
const [user, setUser] = useState(null);             // null
const [user2, setUser2] = useState<User | null>(null); // 正确

// 退化三：对象更新要求全字段
type Form = { name: string; age: number };
const [form, setForm] = useState<Form>({ name: '', age: 0 });
setForm({ name: 'ada' });
// TS2345: Argument of type '{ name: string; }' is not assignable to
//   parameter of type 'SetStateAction<Form>'. Property 'age' is missing.
setForm((f) => ({ ...f, name: 'ada' })); // 正解：函数式合并

// 期望：状态是一个函数
const [handler, setHandler] = useState(() => doSomething);
// 实际：React 把 () => doSomething 当成了惰性初始化函数，
//       handler 的类型是 () => void 而不是 () => void 的状态容器

// 正解：显式指定类型参数，让 React 知道返回的就是状态值
const [handler2, setHandler2] = useState<() => void>(() => doSomething);

type State =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'done'; data: string[] }
  | { status: 'error'; message: string };

type Action =
  | { type: 'fetch' }
  | { type: 'success'; data: string[] }
  | { type: 'error'; message: string }
  | { type: 'reset' };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'fetch':
      return { status: 'loading' };
    case 'success':
      return { status: 'done', data: action.data };
    case 'error':
      return { status: 'error', message: action.message };
    case 'reset':
      return { status: 'idle' };
    default: {
      const exhaustive: never = action;
      return exhaustive;
    }
  }
}

function useList() {
  return useReducer(reducer, { status: 'idle' } satisfies State);
}

dispatch({ type: 'fetch' });          // OK：内联时有上下文类型，字面量不 widen
const act = { type: 'fetch' };
dispatch(act);
// TS2345: Argument of type '{ type: string; }' is not assignable to
//   parameter of type 'Action'.
const act2 = { type: 'fetch' } as const;
dispatch(act2);                        // OK

const divRef = useRef<HTMLDivElement>(null);       // 形态一：DOM 引用
const countRef = useRef<number>(0);                // 形态二：可变容器
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null); // 形态三：可空资源

const inputRef = useRef<HTMLInputElement>(null);

function focus() {
  inputRef.current.focus();
  // TS18047: 'inputRef.current' is possibly 'null'.
  inputRef.current?.focus();                       // 正解一：可选链
  if (inputRef.current) inputRef.current.focus();   // 正解二：判空
}

// 错误一：effect 回调隐式返回值
useEffect(() => setTimeout(tick, 1000), []);
// TS2322: Type '() => number' is not assignable to type 'EffectCallback'.
//   Type 'number' is not assignable to type 'void | Destructor'.
useEffect(() => {
  const id = setTimeout(tick, 1000);
  return () => clearTimeout(id);   // 正解：显式返回清理函数
}, [tick]);

// 错误二：async 回调
useEffect(async () => {
  const res = await fetch('/api');
}, []);
// TS2322: Argument of type '() => Promise<void>' is not assignable to
//   parameter of type 'EffectCallback'.
useEffect(() => {
  const ac = new AbortController();
  void (async () => { await fetch('/api', { signal: ac.signal }); })();
  return () => ac.abort();
}, []);

const [items, setItems] = useState<string[]>([]);
const sorted = useMemo(() => [...items].sort(), [items]); // string[]
const total = useMemo(() => items.length, [items]);        // number

// 需要联合类型时，返回值会 widen，必须显式标注
const mode = useMemo<'asc' | 'desc'>(() => (asc ? 'asc' : 'desc'), [asc]);

// 坑一：回调参数没有上下文类型
const onChange = useCallback((e) => setValue(e.target.value), [setValue]);
// TS7006: Parameter 'e' implicitly has an 'any' type.
// 原因：useCallback 的类型参数由泛型推导，回调不在 JSX 属性位置上，
//       拿不到 ChangeEvent<HTMLInputElement> 这个上下文类型
const onChange2 = useCallback(
  (e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value),
  [setValue],
);

// 坑二：泛型函数被 useCallback 包一层后，泛型签名可能丢失
const createHandler = useCallback(<T,>(value: T) => value, []);

const ThemeContext = createContext<'light' | 'dark'>('light');
const theme = useContext(ThemeContext); // 'light' | 'dark'

function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = useCallback(() => setOn((v) => !v), []);
  return [on, toggle];
  // 推导为 (boolean | (() => void))[]
}

const [on, toggle] = useToggle();
toggle(); // TS2349: This expression is not callable.
          //   Not all constituents of type 'boolean | (() => void)' are callable.

// 正解一：在上面 useToggle 内把 return 改为 return [on, toggle] as const
// 正解二：显式写返回类型（推荐，签名即文档）
function useToggleTyped(initial = false): [boolean, () => void] {
  const [on, setOn] = useState(initial);
  const toggle = useCallback(() => setOn((v) => !v), []);
  return [on, toggle];
}

type UseFetchResult<T> =
  | { status: 'loading'; data: null; error: null }
  | { status: 'done'; data: T; error: null }
  | { status: 'error'; data: null; error: Error };

// 这里只展示契约，完整实现还需请求、取消与状态更新
declare function useFetch<T>(url: string): UseFetchResult<T>;

function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    const raw = localStorage.getItem(key);
    return raw ? (JSON.parse(raw) as T) : initial;
  });

  const update = useCallback((next: T) => {
    setValue(next);
    localStorage.setItem(key, JSON.stringify(next));
  }, [key]);

  return [value, update] as const;
}

type Decoder<T> = { parse: (raw: unknown) => T };

function useStored<T>(key: string, initial: T, decoder: Decoder<T>) {
  const [value, setValue] = useState<T>(() => {
    const raw = localStorage.getItem(key);
    if (raw === null) return initial;
    try {
      return decoder.parse(JSON.parse(raw));
    } catch {
      return initial; // 结构不兼容时回落到初值
    }
  });
  // setValue 与写入逻辑同上
  return [value, setValue] as const;
}