如何在React Context中正确为children添加TypeScript类型

你可以通过两种React官方提供的类型来替代any，既安全又符合TypeScript规范：

方案1：直接使用React.ReactNode #

React.ReactNode是React内置的类型，涵盖了所有合法的子元素类型（单个组件、多个组件、文本、null、undefined等），是最常用的children类型：

import React, { createContext, useMemo } from 'react';

interface PostsContextValues {
  posts: PostType[];
}

export const PostsContext = createContext<PostsContextValues>({
  posts: []
});

// 替换any为明确的children类型定义
export const PostsContextProvider = ({ children }: { children: React.ReactNode }) => {
  const value = useMemo(
    () => ({
      posts: data
    }),
    [data]
  );

  return (
    <PostsContext.Provider value={value}>{children}</PostsContext.Provider>
  );
};

方案2：使用React.PropsWithChildren工具类型 #

如果你的Provider后续需要添加其他自定义props，用PropsWithChildren会更简洁，它会自动为你注入children的类型定义：

// 无需手动定义children，工具类型自动处理
export const PostsContextProvider = ({ children }: React.PropsWithChildren<{}>) => {
  // 原有逻辑保持不变
};

// 若后续需要添加自定义props（比如theme），直接扩展即可：
export const PostsContextProvider = ({ children, theme }: React.PropsWithChildren<{ theme: string }>) => {
  // ...新增逻辑
};

这两种方案都能在Codesandbox中正常识别，完全避免使用any类型，同时保证类型安全。

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