Hits

TypeScript를 사용하다보면, 다음과 같은 상황이 나타납니다.

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]);
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를 보장해주면, 해결이 됩니다.

if (!emailRef?.current?.value) return;
if (!emailRef?.current?.value) return;

그러나, 위에서는 validationCheck라는 함수를 통해, 이미 check를 하고 있기 때문에, 조건문을 통한 처리는 넘어갑니다.

2️⃣ 논리연산자 사용

const reqData = {
  email: email?.current?.value || "",
  password: password?.current?.value || "",
  userName: userName?.current?.value || "",
  departMent: departMent?.current?.value || "",
  sex: sex,
  admission: admission?.current?.value || "",
};
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 연산자 사용

const reqData = {
  email: email.current.value!,
  password: password.current.value!,
  userName: userName.current.value!,
  departMent: departMent.current.value!,
  sex: sex,
  admission: admission.current.value!,
};
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을 강제로 지정해준다.

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,
};
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,
};