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的泛型參數(shù)指定了count的類型為number。這樣可以確保在編寫代碼時(shí)會(huì)得到正確的類型檢查。

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的第一個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，在這個(gè)回調(diào)函數(shù)中可以執(zhí)行副作用操作。第二個(gè)參數(shù)是一個(gè)依賴數(shù)組，只有當(dāng)依賴數(shù)組中的值發(fā)生變化時(shí)，useEffect才會(huì)重新執(zhí)行。

通過為useState和useEffect添加類型注解，可以讓TypeScript對(duì)代碼進(jìn)行更嚴(yán)格的類型檢查，從而減少錯(cuò)誤并提高代碼質(zhì)量。