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對代碼進行更嚴格的類型檢查，從而減少錯誤并提高代碼質量。