Tengo este código mecanografiado simple para reaccionar
type fruitCode = 'apple' | 'banana' interface fruitList { name: fruitCode } const [arr, setArr] = useState<fruitList[] | []>([]) useEffect(() => { const arrList = [{ name: 'apple' }, { name: 'banana' }]; //error? setArr(arrList) }, [])demostración https://codesandbox.io/s/react-typescript-forked-gi6fw?file=/src/App.tsx:103-391
¿Cómo puedo restringir que el valor de mi propiedad sea 'manzana' o 'plátano'?
Typescript no puede inferir el tipo de arrList , así que configúrelo directamente
const arrList: fruitList[] = [ // ... ] Yo también eliminaría | [] de la definición de tipo de estado, ya que es redundante; una matriz vacía aún satisface el <fruitList[]> .
const [arr, setArr] = useState<fruitList[]>([]) Finalmente, sus interfaces y tipos no deben ser parte del componente. Muévelos arriba de la App
type fruitCode = "apple" | "banana"; interface fruitList { name: fruitCode; } export default function App() { // ... } Notará que no hay advertencias sobre sus dependencias useEffect después de esto.