React组件的Typescript定义文件疑难解答

import React from 'react';

interface MyComponentProps {
  name: string;
  age?: number; // 可选属性
}

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      {age && <p>Age: {age}</p>}
    </div>
  );
};

export default MyComponent;

import React from 'react';

interface MyComponentProps {
  name: string;
  age?: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      {age && <p>Age: {age}</p>}
    </div>
  );
};

MyComponent.defaultProps = {
  age: 0, // 默认值为0
};

export default MyComponent;

import React, { useState } from 'react';

interface MyComponentState {
  count: number;
}

const MyComponent: React.FC = () => {
  const [state, setState] = useState<MyComponentState>({ count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => setState({ count: state.count + 1 })}>Increment</button>
    </div>
  );
};

export default MyComponent;

import React from 'react';

interface WithLoggerProps {
  logger: (message: string) => void;
}

const withLogger = <P extends object>(WrappedComponent: React.ComponentType<P & WithLoggerProps>) => {
  return (props: P) => {
    const logger = (message: string) => console.log(message);

    return <WrappedComponent {...props} logger={logger} />;
  };
};

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC<MyComponentProps & WithLoggerProps> = ({ name, logger }) => {
  logger(`Hello, ${name}!`);

  return <div>Hello, {name}!</div>;
};

export default withLogger(MyComponent);

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

interface Theme {
  primaryColor: string;
  secondaryColor: string;
}

const ThemeContext = createContext<Theme | undefined>(undefined);

interface MyComponentProps {
  theme: Theme;
}

const MyComponent: React.FC<MyComponentProps> = ({ theme }) => {
  return (
    <div style={{ color: theme.primaryColor }}>
      Hello, World!
    </div>
  );
};

const MyComponentWithContext: React.FC = () => {
  const theme = useContext(ThemeContext);

  if (!theme) {
    throw new Error('ThemeContext must be provided');
  }

  return <MyComponent theme={theme} />;
};

export default MyComponentWithContext;