TypeScript能否根据传入值自动推导React Context类型？

直接像你示例中那样用React.createContext(null)的话，TypeScript无法自动推导Provider中value的具体类型——因为初始化时传入了null，此时ctx的类型会是{myName: string} | null，并非你期望的{myName: string}。

不过你不需要必须手动创建接口或类型，可以通过以下方式实现自动推导：

方式1：利用默认值自动推导类型 #

先定义Context的默认值，再将其传入createContext，TypeScript会自动基于默认值推导Context的类型：

// 先定义与Provider中value结构一致的默认值
const defaultContextValue = { myName: 'John Doe' }
// 传入默认值，让TypeScript自动推导类型
const MyContext = React.createContext(defaultContextValue)

const MyProvider = ({ children }) => {
  const myName = 'John Doe'
  return (
    <MyContext.Provider value={{ myName }}>
      {children}
    </MyContext.Provider>
  )
}

// 此时ctx的类型自动为{myName: string}
const ctx = useContext(MyContext)

方式2：手动定义类型（当默认值无法匹配实际value时） #

如果你的默认值必须用null或其他与实际value结构不符的值，就需要手动定义类型，再通过泛型传给createContext：

// 手动定义Context的类型
type MyContextType = { myName: string }

// 用泛型指定类型，默认值设为null（需明确类型包含null）
const MyContext = React.createContext<MyContextType | null>(null)

const MyProvider = ({ children }) => {
  const myName = 'John Doe'
  return (
    <MyContext.Provider value={{ myName }}>
      {children}
    </MyContext.Provider>
  )
}

// 此时ctx的类型为MyContextType | null，若确定组件被Provider包裹，可使用非空断言
const ctx = useContext(MyContext)!

总结：只要给createContext传入与Provider中value结构一致的默认值，TypeScript就能自动推导Context的类型；只有当默认值与实际value类型不匹配时，才需要手动定义类型。

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