如何在TypeScript中让React组件的children属性变为必填项？

要让TypeScript在未传入children时给出警告，你需要把children从可选属性改为必填属性，具体有两种常用实现方式：

方法一：自定义包含必填children的Props接口 #

直接在属性接口里声明children为必填，不依赖默认将children设为可选的React.PropsWithChildren：

import React from 'react';

interface TestProps {
  id: string;
  children: React.ReactNode; // 明确标记为必填属性
}

const Test = ({ children, id }: TestProps) => {
  return <div id={id}>{children}</div>;
};

此时如果像这样使用组件：

<Test id={'hi'}></Test>

TypeScript会直接抛出错误，提示children属性缺失。

方法二：修改PropsWithChildren的可选属性为必填 #

若你仍想使用React.PropsWithChildren，可以通过交叉类型或Required工具类型强制children为必填：

方式A：使用交叉类型 #

import React from 'react';

interface TestI {
  id: string;
}

const Test = ({ children, id }: React.PropsWithChildren<TestI> & { children: React.ReactNode }) => {
  return <div id={id}>{children}</div>;
};

方式B：使用Required工具类型 #

React.PropsWithChildren<T>本质是T & { children?: React.ReactNode }，用Required可将所有可选属性转为必填：

import React from 'react';

interface TestI {
  id: string;
}

const Test = ({ children, id }: Required<React.PropsWithChildren<TestI>>) => {
  return <div id={id}>{children}</div>;
};

以上两种方式都能实现目标：当组件未传入children时，TypeScript会立即给出类型错误提示。

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