TypeScript中useContext认证场景的类型分配问题求助

问题重现 #

我在认证场景中使用useContext时遇到了TypeScript类型匹配错误，相关代码如下：

type userSignup = {
  name: string;
  email: string;
  password: string;
  signup() => void;
}

export const AuthContext = createContext<userSignup|null>(null);

export const AuthProvider = ({children}) =>{
  const signup = async (name,email,password) => {
    // 原代码笔误修正：去掉email后的多余冒号
    const DTO ={name: name, email: email, password: password}
    const response = await fetch('url', DTO);
    const data = await response.json();
    setToken(data);
  }
  return (
    <AuthContext.Provider value={{signup}}> {children} </AuthContext.Provider>
  );
}

最初的错误提示：

类型“(name: string, email: string,password: string, signup() => Promise)”无法分配给类型“userSignup”。

虽然改成createContext<any|null>(null)能临时解决，但不想使用any破坏类型安全。

更新后的新问题 #

按照建议修改类型定义后：

type userSignUp = { 
  name: string;
  email: string;
  // 原代码笔误修正：password类型应为string，而非password
  password: string;
  signup: () => Promise<void>;
}

出现新的错误：

Type'(name:any, email:any, password:any) => Promise' is not assignable to type '()=> Promise'

解决方案 #

问题核心是类型定义与实际函数签名不匹配，加上上下文值的结构设计不合理，具体修正步骤如下：

1. 重构上下文类型定义
   你的上下文只需要提供signup方法，不需要把用户的name/email/password放在上下文类型里（这些是signup的参数，不是上下文要共享的状态）。正确的类型应该仅包含方法签名：

   type AuthContextType = {
     signup: (name: string, email: string, password: string) => Promise<void>;
   } | null;
   

2. 给signup函数补全类型标注
   明确参数类型，避免隐式any：

   const signup = async (name: string, email: string, password: string) => {
     const DTO = { name, email, password };
     // fetch第二个参数需传配置对象，原代码直接传DTO会导致请求格式错误
     const response = await fetch('url', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify(DTO),
     });
     const data = await response.json();
     setToken(data);
   };
   

3. 修正Provider的value与组件类型
   确保传入的value符合AuthContextType结构，同时补全children的类型：

   import { createContext, ReactNode } from 'react';
   
   type AuthContextType = {
     signup: (name: string, email: string, password: string) => Promise<void>;
   } | null;
   
   export const AuthContext = createContext<AuthContextType>(null);
   
   export const AuthProvider = ({ children }: { children: ReactNode }) => {
     const signup = async (name: string, email: string, password: string) => {
       const DTO = { name, email, password };
       const response = await fetch('url', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify(DTO),
       });
       const data = await response.json();
       setToken(data);
     };
   
     return (
       <AuthContext.Provider value={{ signup }}>
         {children}
       </AuthContext.Provider>
     );
   };
   

关键说明 #

• 上下文类型只需要包含跨组件共享的方法/状态，函数参数的类型不需要放到上下文结构中。
• 始终给函数参数和变量添加明确的TypeScript类型，避免隐式any，保证类型安全。
• fetch的第二个参数是配置对象，直接传DTO会导致请求格式错误，必须指定method、headers和序列化后的body。

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