TypeScript中的useState和useEffect如何使用

在TypeScript中使用useState和useEffect和在JavaScript中使用基本相同，只是需要为useState和useEffect添加类型注解。

1. 使用useState:

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

export default MyComponent;

在上面的示例中，useState的泛型参数指定了count的类型为number。这样可以确保在编写代码时会得到正确的类型检查。

2. 使用useEffect:

import React, { useState, useEffect } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    console.log('Component mounted or count changed');
  }, [count]);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

export default MyComponent;

在上面的示例中，useEffect的第一个参数是一个回调函数，在这个回调函数中可以执行副作用操作。第二个参数是一个依赖数组，只有当依赖数组中的值发生变化时，useEffect才会重新执行。

通过为useState和useEffect添加类型注解，可以让TypeScript对代码进行更严格的类型检查，从而减少错误并提高代码质量。