如何在React TypeScript中使用createContext？解决参数缺失报错

报错原因 #

你遇到的错误是TypeScript严格类型检查导致的：React.createContext的类型定义要求必须传入defaultValue参数，直接调用React.createContext()时未传参，违反了TS的约束；而传入{}时满足参数要求，因此无报错。

正确实现步骤 #

1. 定义Context的类型

先明确Context要存储的数据结构，定义对应的TypeScript类型，避免使用any，提升类型安全性：

// 根据实际业务需求扩展类型属性
type AppContextType = {
  // 示例：可添加需要共享的状态或方法
  // user?: { name: string };
  // toggleTheme?: () => void;
};

2. 传入匹配类型的默认值

调用createContext时，传入符合上述类型的默认值，确保类型匹配：

// 若Context初始为空对象，直接传{}即可
const AppContext = React.createContext<AppContextType>({});

// 若后续会有必填属性，也可将默认值设为null（需配合非空判断）
// const AppContext = React.createContext<AppContextType | null>(null);

3. 优化Provider的类型约束

不要用any定义Provider的props，改用React内置的PropsWithChildren来约束children属性，更规范：

import React, { useContext, PropsWithChildren } from 'react';

type AppContextType = {
  // 按需扩展属性
};

const AppContext = React.createContext<AppContextType>({});

const AppProvider = ({ children }: PropsWithChildren<{}>) => {
  // 这里可添加共享状态或方法，比如：
  // const [theme, setTheme] = useState('light');
  
  return (
    <AppContext.Provider value={{}}>
      {children}
    </AppContext.Provider>
  );
};

export { AppContext, AppProvider };

4. 类型安全地使用Context

使用useContext获取值时，TS会自动推导类型，确保访问的属性符合定义：

const SomeComponent = () => {
  const context = useContext(AppContext);
  // 访问属性时会有类型提示和检查，避免错误
  return <div>{context.user?.name}</div>;
};

内容的提问来源于stack exchange，提问作者Mahmudul Amin Fahim