typescript 에러

react-native와 typescript로 공부를 하다 진짜 너무 황당한 에러를 맞딱뜨렸다..

'string | null' 형식의 인수는 'string' 형식의 매개 변수에 할당될 수 없습니다. 'null' 형식은 'string' 형식에 할당할 수 없습니다.

1. 무슨 내용의 에러인가

1. 우선 코드를 살펴보자

const key = 'todos';
const rawTodos = await AsyncStorage.getItem(key);
const savedTodos: ITodos[] = JSON.parse(rawTodos);

1. AsyncStorage에 있는 todos라는 key로 Object Value를 가져와서 rawTodos 변수에 저장한다.
2. rawTodos에 저장되어있는 Object를 JSON.parse를 통해 파싱을 해서 savedTodos 변수에 저장한다.
3. 이때 JSON.parse(rawTodos)에서 rawTodos에 빨간색 밑줄이 생기면서 위의 에러를 떨군다

2. 무엇이 문제인가

1. 해당 코드의 에러는 typescript에서 발생해서 타입이 맞지않는다는 에러인데 rawTodos에

   const rawTodos: string | null

   으로 type을 지정해줘도 위의 에러는 사라지지않았다

2. 해결방법

1. 정말 온갖 생쇼를 하다가 정말 간단하게 해결했다

1. 해결방법1

const key = 'todos';
const rawTodos = await AsyncStorage.getItem(key);
if (!rawTodos) {
  throw new Error('No saved todos');
}
const savedTodos: ITodos[] = JSON.parse(rawTodos);

위의 코드처럼 rawTodos가 없을때 즉 null일 경우 처리해준다

2. 해결방법2

tsconfig.json에서
strictNullChecks: false
로 설정해준다
typescript로 개발하다보면 현재의 경우처럼 빡세게 null 체크를 할 때가있는데 이걸 false로 해주면 좀 널널하게 바꿔준다는것 같다

3. 마무리

typescript를 공부하는 중이라 정말 여러가지 난관에 부딪히는거 같다
특히 저런 에러는 구글링을해도 잘 못찾겠더라
typescript를 잘다루기까지의 난관이 너무 험난하다...