[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fdevlog-juneby.vercel.app%2Fposts%2FTypeScript%2Fhandle-undefined-null-in-typescript&count_bg=%233B82F6&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=views&edge_flat=false)](https://hits.seeyoufarm.com)

TypeScript를 사용하다보면, 다음과 같은 상황이 나타납니다. ```tsx const submit = useCallback(() => { const isValid = validationCheck(); if (!isValid) { return; } const reqData = { email: email.current.value, password: password.current.value, userName: userName.current.value, departMent: departMent.current.value, sex: sex, admission: admission.current.value, }; signUpMutation.mutate(reqData); }, [sex, signUpMutation, validationCheck]); ``` 위 코드를 확인해보면, `validationCheck` 라는 함수를 통해, data의 타입이 `undefined`또는 `null`인 경우를 처리합니다. 분명, `validationCheck`함수를 통해 예외처리를 했는데, `reqData`의 `email, password, ... 프로퍼티`가 `undefined` 일 수도 있다고 나옵니다. 이떼, 다음과 같은 방법들을 통해 해결할 수 있습니다. # 1️⃣ if를 통한 처리 if문을 통해, type의 safety를 보장해주면, 해결이 됩니다. ```ts if (!emailRef?.current?.value) return; ``` 그러나, 위에서는 `validationCheck`라는 함수를 통해, 이미 check를 하고 있기 때문에, 조건문을 통한 처리는 넘어갑니다. # 2️⃣ 논리연산자 사용 ```tsx const reqData = { email: email?.current?.value || "", password: password?.current?.value || "", userName: userName?.current?.value || "", departMent: departMent?.current?.value || "", sex: sex, admission: admission?.current?.value || "", }; ``` 논리 연산자를 사용해, 값이 `null` 또는 `undefined`라면, 값을 치환하도록 만들어, type safety를 보장해줍니다. # 3️⃣ non-null assertion 연산자 사용 ```tsx const reqData = { email: email.current.value!, password: password.current.value!, userName: userName.current.value!, departMent: departMent.current.value!, sex: sex, admission: admission.current.value!, }; ``` 끝에 `!` 를 붙힘으로써, TypeScript 컴파일러에게 변수가 `null` 또는 `undefined` 일 수 없음을 알려준다. # 4️⃣ as 키워드 사용 `as` 키워드를 통해 값의 type을 `강제로 지정`해준다. ```tsx const reqData = { email: email.current.value as string, password: password.current.value as string, userName: userName.current.value as string, departMent: departMent.current.value as string, sex: sex, admission: admission.current.value as string, }; ```

TypeScript에서 undefined, null 처리하기