Vuelidate Optional Type

Make an optional property Required in TS

Vuelidate를 사용하던 하던 도중 Optional 한 타입으로 정의된 Property가 useVuelidate를 하는데 말썽을 일으켰다.

Optional Property를 Required Property로 바꾸어 해결할 수 있었다.

---

문제 발생

개발을 하던 도중 Form의 Validation Check를 Vuelidate라는 서드파티를 이용하여 진행하고 있었다.

정의한 타입

위처럼 email, phone, call property가 optional 하게 정의해 놓았다.

그 후에 Vuelidate에서  Validation Check 하는 rules를 모두 작성한 후에

useVuelidate with TSLint Errors

useVuelidate를 하는 과정에서 state의 타입이 계속 말썽을 일으켰다.

rules

위 사진에서 보다시피 rules에서는 phone, email, call의 규칙을 모두 정의해 주었다. 하지만 useVuelidate에서 rules와 state를 map 하는 과정에서 state의 optional property들이 문제가 되었다.

이를 해결하기 위해 고민을 하다가, validation check를 하는 과정에서는 어차피 값이 들어가 있을 테니 optional type을 required type으로 변경하면 될 것 같았다.

문제 해결

우선 앞으로도 이런 문제가 계속 발생할 것이기에 Type을 입력받고, 변경하고자 하는 property를 입력하면, 해당 property의 타입을 optional에서 required로 변경하는 메서드를 작성했다.

Method that Change Optional Type Property to Required Type Property

Use Methods

위처럼 깔끔하게 동작한다.