React项目迁移TypeScript：如何为createContext定义正确类型？

问题根源 #

1. Context类型定义错误：你将上下文类型声明为IUser | {}[]，但实际上上下文的value是一个包含「用户状态」和「状态更新函数」的元组，这个类型完全不匹配，导致TypeScript无法正确推断user的类型，认为它是{}，所以访问user.name时报错。
2. Provider的value赋值错误：ProvideAuth组件里用了未定义的auth作为value，正确应该传入[user, setUser]。
3. useState类型冗余：IUser的属性都是可选的，空对象{}本身就符合IUser类型，不需要额外声明IUser | {}。

修正后的代码 #

1. 定义正确的Context类型 #

interface IUser {
    name?: string;
    token?: string;
}

// 明确上下文的元组类型：[用户状态, 状态更新函数]
type AuthContextType = [IUser, React.Dispatch<React.SetStateAction<IUser>>];

// 创建上下文，初始值符合元组类型
const authContext = createContext<AuthContextType>([{}, () => {}]);

2. 修正ProvideAuth组件 #

import { useState } from 'react';

function ProvideAuth({ children }: { children: React.ReactNode }) {
  // 直接用IUser作为useState的类型，空对象符合要求
  const [user, setUser] = useState<IUser>({});
  // 传入正确的value：用户状态和更新函数组成的元组
  return (
    <authContext.Provider value={[user, setUser]}>
      {children}
    </authContext.Provider>
  );
}

3. 修正CheckAuth组件（添加props类型） #

import { Navigate } from 'react-router-dom';

function CheckAuth({ children }: { children: React.ReactNode }) {
  const [user] = useAuth();
  return !user.name ? <Navigate to='/login' /> : children;
}

4. 优化useAuth函数（可选） #

export function useAuth(): AuthContextType {
  return useContext(authContext);
}

这样修改后，TypeScript就能正确推断user的类型为IUser，访问user.name就不会再出现类型错误了。

内容的提问来源于stack exchange，提问作者ark_knight