FRONTEND/Typescript
[TS] SetStateAction<type> useState의 set 함수타입
숭코기
2023. 8. 18. 16:14
728x90
JS 파일로 작성된 프로젝트를 TS로 변환하던 과정에서 문제가 발생했다.
다른 변수들은 타입을 지정해줘서 문제 없이 잘 적용이 되었는데
useState의 set 함수 부분에서 빨간줄이 사라지지 않아 고뇌..
문제상황
const [notes, setNotes] = useState([]);
const sortNotes = () {
let newList: noteTypes[] = [];
...
setNotes(newList)
// error 발생
Argument of type 'noteType[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
Type 'noteType[]' is not assignable to type 'never[]'.
Type 'noteType' is not assignable to type 'never'.
}
notes는 useState([])로 명시해줘서 배열이라는 걸 알 수 있지만
setNotes는 어떤 type으로 지정해줘야 할지 감이 잡히지 않았다.
setNotes에 마우스를 올려보고 나서야 React.SetStateAction<never[]> 이라고 표시된걸 발견할 수 있었다.
💡 never 타입
https://ui.toast.com/posts/ko_20220323
타입스크립트의 Never 타입 완벽 가이드
타입스크립트의 never 타입은 다른 타입만큼 흔하게 사용되거나 피할 수 없는 것이 아니기 때문에 충분히 논의되고 있지 않다. 타입스크립트 초보자는 조건부 타입 같은 고급 타입을 처리하거나
ui.toast.com
해결방법
// noteType은 내가 따로 지정해준 타입
const [notes, setNotes] = useState<noteType[]>([]);
or
const [notes, setNotes] = useState<never[]>([]);
728x90