TypeScript中如何创建空createContext？解决类型不匹配报错

错误原因 #

你定义的data类型是对象结构（包含可选的state属性），但创建Context时传入的默认值是数字1，TypeScript严格的类型检查机制判定两者类型不兼容，因此抛出Type '1' has no properties in common with type 'data'的错误。

解决方案 #

根据你的实际业务需求，选择以下两种处理方式：

方式一：Context传递对象类型数据 #

如果你的Context确实需要传递包含state属性的对象，需将默认值修改为符合data类型的对象结构，同时建议替换any为具体类型（比如这里的数字类型number），避免使用any破坏类型安全：

import React from "react";

// 定义具体的对象类型，替换any为明确类型
type data = {
    state?: number;
};

// 创建符合data类型的默认值对象
const defaultState: data = { state: 1 };
export const BasicContext = React.createContext<data>(defaultState);

方式二：Context传递单个数字类型数据 #

如果你的Context仅需传递单个数字值，直接修改data的类型定义为数字类型即可：

import React from "react";

// 将类型定义为数字类型
type data = number;

const state = 1;
export const BasicContext = React.createContext<data>(state);

额外场景：允许Context初始值为undefined #

如果不想设置默认值，可将类型改为data | undefined，但使用useContext时需处理undefined的情况：

import React, { useContext } from "react";

type data = {
    state?: number;
};

export const BasicContext = React.createContext<data | undefined>(undefined);

// 使用Context时的处理示例
const SomeComponent = () => {
  const contextValue = useContext(BasicContext);
  if (!contextValue) {
    // 处理未提供Context的边界情况
    return <div>未获取到Context数据</div>;
  }
  return <div>当前state值：{contextValue.state}</div>;
};

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