为什么TS认为`setValue`可能是一个‘boolean`？
为什么TS认为`setValue`可能是一个‘boolean`？
提问于 2021-02-24 13:28:54
为什么TS认为setOpen 可能是一个boolean?？
import { useState } from 'react'
export default function useLocalStorage (key: string, initialValue: T) {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key)
return item ? JSON.parse(item) : initialValue
} catch (error) {
console.log(error)
return initialValue
}
})
const setValue = (value: T) => {
try {
setStoredValue(value)
window.localStorage.setItem(key, JSON.stringify(value))
} catch (error) {
console.log(error)
}
}
return [storedValue, setValue]
}
const [open, setOpen] = useLocalStorage('someKey', false)
console.log(open);
setOpen(true) // setOpen: boolean | (value: boolean) => voidStack Overflow用户
回答已采纳
发布于 2021-02-24 13:50:33
因为您没有声明useLocalStorage默认情况下，它会推断出联合类型的数组，即(boolean | (value: boolean) => void)[]而不是元组[boolean, (value: boolean) => void]...。
声明函数的返回类型：
export default function useLocalStorage (key: string, initialValue: T): [boolean, (value: boolean) => void] {
...不过，您的代码还有另一个不太明显的问题，那就是setValue没有正确记录。useReducer()会更适合这样做：
export default function useLocalStorage (key: string, initialValue: T) {
return useReducer((prev: T, next: T) => {
try {
window.localStorage.setItem(key, JSON.stringify(next))
return next
} catch (error) {
console.log(error)
return prev
}
}, initialValue, () => {
try {
const item = window.localStorage.getItem(key)
return item === null ? initialValue : JSON.parse(item)
} catch (error) {
console.log(error)
return initialValue
}
})
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66345177
复制相关文章
相似问题
腾讯云开发者
