在使用typescript的react中使用状态值时出现错误

Type 'string' is not assignable to type 'number'.

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState<number>(0); // 明确指定 count 的类型为 number

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;

Type '{ name: string; age: number; }' is missing the following properties from type 'Person': id, email

import React, { useState } from 'react';

interface Person {
  id: number;
  name: string;
  age: number;
  email: string;
}

const MyComponent: React.FC = () => {
  const [person, setPerson] = useState<Person>({
    id: 1,
    name: 'John Doe',
    age: 30,
    email: 'john.doe@example.com'
  });

  return (
    <div>
      <p>{person.name}</p>
      <button onClick={() => setPerson({ ...person, age: person.age + 1 })}>Increment Age</button>
    </div>
  );
};

export default MyComponent;

Type 'string' is not assignable to type 'State'.

import React, { useReducer } from 'react';

interface State {
  count: number;
}

type Action = { type: 'increment' } | { type: 'decrement' };

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

const MyComponent: React.FC = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default MyComponent;