typescript 使用預設值作為數組 object 中的屬性值錯誤？

Question

我有這個簡單的 typescript 代碼用於反應

type fruitCode = 'apple' | 'banana'

interface fruitList {
  name: fruitCode
}

const [arr, setArr] = useState<fruitList[] | []>([])

useEffect(() => {
  const arrList = [{
    name: 'apple'
  }, {
    name: 'banana'
  }];

  //error?
  setArr(arrList)
}, [])

演示https://codesandbox.io/s/react-typescript-forked-gi6fw?file=/src/App.tsx:103-391

如何限制我的財產價值是“蘋果”和“香蕉”？

Answer 1

Typescript 無法推斷arrList的類型所以直接設置

const arrList: fruitList[] = [
  // ...
]

我也會刪除| [] | []來自 state 類型定義，只是沒有意義

const [arr, setArr] = useState<fruitList[]>([])

空數組仍然滿足fruitList[]要求。

最后，你的接口和類型不應該是組件的一部分。 將它們移到App上方

type fruitCode = "apple" | "banana";
interface fruitList {
  name: fruitCode;
}

export default function App() {
  // ...
}

您會注意到在此之后沒有關於您的useEffect依賴項的警告。