React Context在TypeScript中异常：无代码提示且AuthProvider报错

核心原因 #

你的代码缺失了必要的React导入、类型定义和上下文默认值，导致TypeScript无法正确推断类型，VS Code因此无法提供代码提示，同时使用AuthProvider时出现类型不匹配错误。

分步解决方案 #

1. 补全React核心导入

在AuthContext.ts顶部添加React相关导入：

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

2. 定义所有缺失的类型和默认值

补充User、AuthContextType、AuthProviderProps类型，以及符合类型要求的上下文默认值：

// 自定义User类型，根据你的业务需求调整字段
interface User {
  id: string;
  name: string;
  email?: string;
  // 其他用户属性...
}

// 定义AuthContext的上下文结构类型
interface AuthContextType {
  user: User | null;
  isLoggedIn: boolean;
  login: (data: User) => void;
  logout: () => void;
}

// 定义AuthProvider的Props类型
interface AuthProviderProps {
  children: ReactNode;
}

// 上下文默认值，必须严格匹配AuthContextType的结构
const contextDefaults: AuthContextType = {
  user: null,
  isLoggedIn: false,
  login: () => {},
  logout: () => {},
};

3. 检查并修复VS Code配置

• 确保启用了默认的TypeScript and JavaScript Language Features插件
• 项目根目录的tsconfig.json配置正确，关键参数示例：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx", // React 17+ 推荐使用这个值
    "strict": true, // 开启严格类型检查，帮助排查类型问题
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

4. 正确使用AuthProvider

在应用入口文件（比如App.tsx）中正确导入并使用：

import AuthProvider from './AuthContext';

function App() {
  return (
    <AuthProvider>
      {/* 你的应用路由/组件 */}
    </AuthProvider>
  );
}

export default App;

验证效果 #

完成以上步骤后：

• VS Code应该能在编写AuthContext.Provider时自动提示属性
• 使用AuthProvider时的类型错误会消失
• useAuth() hook也会获得正确的类型提示

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