如何在tsc编译时在JSX组件中添加额外的道具

npm install typescript --save-dev

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "React.createElement",
    "jsxFragmentFactory": "React.Fragment",
    "jsxImportSource": "react"
  },
  "include": [
    "src"
  ]
}

import React, { ReactNode } from 'react';

interface MyComponentProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
  additionalProp: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ additionalProp, children, ...rest }) => {
  return (
    <div {...rest}>
      <p>{additionalProp}</p>
      {children}
    </div>
  );
};

export default MyComponent;

import React from 'react';
import MyComponent from './MyComponent';

const App: React.FC = () => {
  return (
    <div>
      <MyComponent additionalProp="Extra Prop">
        <p>Child Component</p>
      </MyComponent>
    </div>
  );
};

export default App;