创建React Context时遇TypeScript类型推断错误，求替代解决方案

你遇到的问题是TypeScript自动把{ foo: true }中的true推断为字面量类型true，而非更宽泛的boolean类型，导致和ContextType里的foo: boolean类型不匹配。不用类型断言的话，有两种更自然的解决方式：

方式一：给createContext显式指定泛型参数 #

直接在createContext后加上<ContextType>，明确告知TypeScript这个Context的类型是你定义的ContextType，避免它把默认值的类型收窄到字面量：

import { createContext } from 'react';

export type ContextType = {
  foo: boolean,
};

// 显式指定泛型参数
export const FooContext = createContext<ContextType>({
  foo: true,
});

这是React + TypeScript中创建Context的标准写法之一，简洁且无需额外的类型断言或变量。

方式二：给默认值变量显式标注类型 #

先定义一个标注了ContextType类型的默认值变量，再将其传入createContext，通过变量的类型约束让TypeScript识别值的正确类型：

import { createContext } from 'react';

export type ContextType = {
  foo: boolean,
};

// 给变量显式标注类型
const defaultContextValue: ContextType = {
  foo: true,
};

export const FooContext = createContext(defaultContextValue);

这种方式适合默认值结构复杂的场景，能让代码逻辑更清晰。

原理说明 #

TypeScript处理字面量时会自动收窄到最具体的类型（比如true而非boolean），而通过显式指定泛型或变量类型，我们强制TypeScript使用更宽泛的boolean类型，从而匹配ContextType的定义。

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